정상 문서 흐름
- normal document flow
- 인라인 요소(inline element)
- 연결되어 가로로 배치
- 연결된 인라인 요소의 폭의 합이 부모의 폭을 모두 차지하면 다음 줄로 래핑
- 부모의 폭이 자식의 배치를 결정함
- 블럭 요소(block element)
- 개별적으로 세로로 배치
- 부모의 폭을 모두 차지함
- 부모의 높이와 상관없이 무한하게 아래로 증가함
- 자식의 배치가 부모의 높이를 결정함
가로 중앙 배치
- 가로 중앙에 배치하기 위해서는 더블 컨테이너 패턴(double-container pattern)을 사용
- 더블 컨테이너 패턴
- 자식의 최대폭을 부모보다 작게 고정
- 자식의 마진을 자동으로
논리 스타일
- 글의 방향이 바뀌는 경우를 대비하여 top, bottom, left, right 스타일 대신 논리적 스타일을 사용
| width |
inline-size |
| height |
block-size |
| margin-top |
margin-block-start |
| margin-bottom |
margin-block-end |
| margin-left |
margin-inline-start |
| margin-right |
margin-inline-end |