공부 정리 공부 정리

CSS/SCSS

• SCSS 문법 알아보기 2

  CSS/SCSS 2021. 6. 27. 21:31

  반복문 /* SCSS */ /* -js- for (let i = 0; i < 10; i += 1) { console.log(`loop-${i}`) } */ // 1~10까지 반복 = 10번 반복 @for $i from 1 through 10 { // #{변수} - 문자 보간 .box:nth-child(#{$i}) { width: 100px * $i; } } /* CSS */ .box:nth-child(1) { width: 100px; } .box:nth-child(2) { width: 200px; } .box:nth-child(3) { width: 300px; } .box:nth-child(4) { width: 400px; } .box:nth-child(5) { width: 500px; } .box:nt..

  Read More
• SCSS 문법 알아보기 1

  CSS/SCSS 2021. 6. 26. 12:42

  주석 1. /* 내용 */ - 여러 줄 주석, 컴파일 되었을때 CSS 변환 되었을때 CSS 코드에 나타남 2. // - 한 줄 주석, 컴파일 되었을때 CSS 변환 되었을때 CSS 코드에 나타나지 않음 중첩 /* SCSS */ .container { ul { li { font-size: 40px; .name { color: royalblue; } .age { color: orange; } } } } /* CSS */ .container ul li { font-size: 40px; } .container ul li .name { color: royalblue; } .container ul li .age { color: orange; } 상위(부모) 선택자 참조 /* SCSS */ // & - 상위 선택자 참..

  Read More
• SCSS

  CSS/SCSS 2021. 6. 26. 11:46

  SCSS (Sass) CSS 전처리기 (Pre-Processor) 중 하나이며, 웹에서 동작 가능한 표준의 CSS로 컴파일해서 동작 CSS와 비교했을때 - CSS보다 심플한 표기법으로 CSS를 구조화하여 표현이 가능하다 - 스킬 레벨이 다른 팀원들과의 작업 시 발생할 수 있는 구문의 수준 차이를 평준화할 수 있다 - 표준 CSS보다 훨씬 많은 기능을 사용해서 편리하게 작성할 수 있다 SCSS 설치 NPM을 통해서 설치 1. 터미널에서 npm init -y 2. npm i -D parcel-bundler (parcel-bundler 설치) 3. npm i install --save-dev node-sass

  Read More