scss3 STEP | VSCode | SCSS 설치 및 실행방법 ⚙️ STEP | VSCode | SCSS 설치 및 실행방법 VSCode에서 SCSS를 설치하는 방법부터 실행하는 방법까지 알아봅시다. * SCSS CSS Preprocessor(전처리 프로그램) 중 하나로 CSS와 유사하지만 좀 더 다양한 기능으로 편리하게 사용할 수 있게 해주는 프로그램입니다. 당연히 CSS가 아닌 전처리 프로그램이기에 웹에서 직접 작동하지는 않으며, 작동할 수 있도록 CSS로 컴파일 후 작동할 수 있게 됩니다. 1 우선 Extension에서 Live Cass Compiler를 설치해줍니다. 2 설정에서 json 검색하고 User Settings 파일을 열어줍니다. 3 아래 표시된 부분을 추가시켜 줍니다. map 파일이 필요하신 분들은 "liveSassCompile.settings.g.. 2022. 9. 19. CSS | 움직이는 강아지 만들기 🐶 꼬까옷 입은 강아지 같이 만들어 보자 ! pug, scss, animation을 사용해서 움직이는 강아지를 만들어 봅시다. 아래 코드를 참고하셔서 각자 자신만의 강아지를 만들어 보세요 :) See the Pen CSS Dog by kkb75281 (@kkb75281) on CodePen. #1. HTML_pug 코드를 확인해보자 .dog .dog-body .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-torso .dog-head .dog-ears .dog-ear .dog-ear .dog-eyes .dog-eye .dog-eye .dog-muzzle .dog-tongue #2. CSS_scss 코드.. 2022. 8. 18. CSS | SCSS 🤔 SCSS, 그게 뭔데? CSS의 단점 | CSS 는 HTML 태그에 디자인을 넣어줄 때 사용합니다. 하지만 프로젝트 규모가 커지면 커질수록 가독성이 떨어진다거나 유지보수가 어려워지는 일이 발생하게 됩니다. 이러한 CSS의 단점을 보완하여 코드의 재활용성과 효율성을 높이기 위해 나온 개념이 SCSS라고 합니다. Variables(변수) 변수를 지정해놓고 사용하기 때문에 오차 범위를 줄여주며, 디자인 컨셉이 변경되거나 변경사항이 생겼을때도 유지보수가 간편합니다. $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } CSS 확인하기 body { font: 1.. 2022. 8. 18. 이전 1 다음
