HTML & CSS/Sass(SCSS) 2

Sass(SCSS) 기초문법 1

1. $변수선언 CSS 는 변수를 사용할 수 없습니다. 때문에 반복적으로 사용되는 코드를 계속해서 입력해야하고, 그 코드가 바뀌면 모든 코드를 수정해야하는 어려움이 있습니다. 하지만 Sass(SCSS)는 그 코드를 변수로 지정해 필요한곳에 사용할 수 있습니다. 이는 나중에 코드를 수정해야할 상황에서 변수의 값만 변경하면 되므로 작업이 간단해 집니다. 예를 들어 $red: #fe3900 $red 라는 변수를 선언하고 사용시 /*scss*/ GNB{background-color: $red;} CTA{background-color:$red;} modal{background-color:$red;} GNB, CTA, modal 세개의 요소 모두 background-color 값을 $red라는 변수를 통해 선언을 ..

Sass(SCSS) 시작하기!!

css는 웹에 표현될 요소들을 시각적으로 풍부하게 꾸며주고, 장식하는 역할을 맡고 있습니다. 이런 css의 장점때문에 오늘날의 웹은 과거와 비교해서 훨씬 세련되게 발전할수 있었습니다. 하지만 시각적으로 화려한 UI와 디자인을 웹에 부여하기 위해서 고도화된 css 코드를 작성해야 하는데, 그에 반해 css문법적 한계는 뚜렷 한 상황 이었습니다. 이때 등장한 것이 바로 "CSS 전처리기(CSS Preprocessor )" 입니다. [CSS 전처리기(CSS Preprocessor )] css 전처리기는 오늘날 복잡해지고 무거워진 css코드를 보다 간결하고 깔끔하게 만들어줍니다. 전처리기는 CSS 문법과 굉장히 유사하지만 선택자의 중첩(Nesting)이나 조건문, 반복문, 다양한 단위(Unit)의 연산 등… 표..