## Grid: ### Why we use CSS-Grid? #### Flexbox로는 Grid를 만들기가 어렵다 flex box에서는: 1. 요소들을 정렬한 뒤, 첫째줄을 제외한 다른 요소들의 공백을 맞춰주려면 요소마다 개별적으로 margin 등을 적용해야 한다. 2. 요소들을 순서대로 격자모양으로 배치하는 것이 어렵다. - flex box에서 justify-content / align-items: space-between 을 적용했을 때: 1 2 3 4 5 body { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } div { width: 200px; height: 200px; backgroun..

## SCSS: ### Preprocessors and Set Up 1. SCSS는 기본적으로 css의 전처리기 - css의 전처리기 (preprocessor): SCSS -> 컴파일 -> CSS 코드 - css의 다른 preprocessor: stylus, less 등 2. SCSS가 Sass의 공식 syntax (둘이 같다고 생각하면 됨) 3. 컴파일하거나 빌드하는 단계가 필요 - gulp나 webpack을 이용 - 만들어진 gulp / webpack은 예시) styles.scss 등의 특정 파일을 css파일로 컴파일 - index.html은 컴파일된 css파일을 가리키고 있어야 함 (브라우저는 scss를 이해 못하기 때문) ### Concepts 1. Variables - scss파일들이 들어 있는..