- CSS 레이아웃을 이미 써 본 독자가 레이아웃 알고리듬을 세부 규칙까지 이해하도록 만든 장별 학습 자료임
inline,block,z-index, 박스 모델을 단순 사용법이 아니라 포매팅 컨텍스트와 스태킹 컨텍스트 같은 결정 규칙으로 다시 설명함- 일반 흐름에서 블록과 인라인 요소의 상대 위치는
display만으로 정해지지 않고, 형제 요소와 컨텍스트가 함께 영향을 줌 - 박스 모델의 크기와
margin: auto계산은 포지셔닝 방식에 따라 달라지므로, 하나의 규칙으로 외우기 어려움 - 정상 흐름, float, 절대 위치 지정, margin collapsing, overflow,
z-index, 의사 요소, Flexbox를 거쳐 센터링과 그리드 프레임워크 같은 실전 레이아웃 문제로 이어짐
CSS 레이아웃을 규칙으로 이해하기
- 이 자료는 CSS 레이아웃을 팁 모음이 아니라 규칙 기반 시스템으로 보고, 각 규칙을 장별로 따라가며 설명하는 긴 학습 자료임
- “pedantic”이라는 표현처럼 사소해 보이는 세부사항과 형식적 규칙까지 따지는 접근을 취함
- 대상 독자는 CSS를 처음 배우는 사람이 아니라, 이미 CSS를 쓰지만 레이아웃 동작을 더 엄밀하게 이해하려는 사람임
- 웹사이트는 보통 점진적으로 발전하기 때문에 작은 팁과 트릭으로만 레이아웃을 익히기 쉽고, 그 과정에서 레이아웃 알고리듬 자체를 놓칠 수 있음
- 주요 개념을 순서대로 다루며, 각 개념을 확인할 수 있는 적용 예제를 함께 제공함
장별 구성
- Chapter 1: Box positioning in CSS는 HTML 요소가 만드는 박스들이 서로 어떻게 배치되는지 다룸
- CSS의 세 가지 주요 포지셔닝 방식: 정상 흐름, float, 절대 위치 지정
- 정상 흐름의 anonymous box generation, formatting context, line box, line box 안의 정렬
- float order, clearfix, float와 부모 높이의 상호작용
- Chapter 2: Box sizing in CSS는 박스 모델과 포지셔닝 방식에 따른 차이를 다룸
height,width,margin계산은 서로 다른 메커니즘을 사용함- 계산 방식을 이해하려면 현재 쓰는 포지셔닝 방식과 계산 메커니즘을 함께 봐야 함
- Chapter 3: Additional properties that influence positioning는 박스 배치에 영향을 주는 추가 속성과 메커니즘을 정리함
- margin collapsing, negative margins, overflow
max-width,max-height,min-width,min-height- stacking context와
z-index - 의사 요소가 레이아웃에 미치는 영향
- CSS3
box-sizing속성
- Chapter 4: Flexbox는 CSS 3 Flexbox 레이아웃 모드를 설명함
- Chapter 5: CSS layout - tricks and layout techniques는 앞 장의 내용을 실제 문제에 적용함
- 수평·수직 센터링
- CSS 그리드 프레임워크의 작동 방식
- 다단 레이아웃
- 흔한 함정과 레이아웃 트릭
- reference index는 특정 개념이나 속성을 찾아 관련 장과 섹션으로 이동할 때 사용할 수 있음