웹디자인 CSS 공부 중 - Codecademy

1. CSS 박스모델

the box model 박스 모델 in CSS 출처: codecademy

2. vertical line collapse (가로 줄 마진은 더해지는데, 세로줄 마진은 큰게 덮어버린다)

CSS vertical margin collapse 출처: codecademy

 

3. box-sizing: content-box; 와 box-sizing: border-box;의 차이점 - 사이즈의 기준이 콘텐츠까지만이냐 / 보더까지냐

CSS content-box vs. boder-box 출처: codemancers

출처: codemancers

 

4. 줄의 높이는 font-size +leading

    줄간격의 의미

line height 개념 줄간격 leading CSS 출처: codecademy

 

 

5. CSS 의 align 속성들 display: flex; 일때

W3 

CSS Box Alignment Module Level 3

justify-content/align-content 와 justify-items/align items의 차이 비교 출처: w3c

 

6. display: grid; 

 

CSS flex layout (single-axis oriented) vs. grid layout (double-axis oriented) 출처: w3c

출처: w3c