3. 블록&인라인

• 이전 포스팅에서 살펴본 콘텐츠 모델은 사실 나중에 좀 더 복잡하게 분류된 것이고, 그 이전에는 요소들을 크게 블록 레벨과 인라인 레벨로 구분했었다.
• 시각적으로 차이가 명확하다.

1) 블록 레벨 요소

한 줄에 하나의 요소 표시

• 부모 요소의 가로 영역에 맞게 꽉 채워져 표현되는 요소이다.
• 양옆으로 다른 요소가 배치되지 않게 박스를 생성하므로 박스의 위아래로 줄 바꿈이 생기게 된다.

블록 수준 요소는 항상 새 줄에서 시작하여 사용 가능한 전체 너비를 차지한다.

div, h1~h6, p, ul, li, table ...

2) 인라인 레벨 요소

한 줄에 여러 개의 요소 표시

• 하나의 라인 안에서 자신의 내용만큼의 박스를 만드는 요소이다.
• 라인의 흐름을 끊지 않고 요소 앞 뒤로도 줄 바꿈이 되지 않아 다른 인라인 요소들이 자리할 수 있다.
• 인라인 레벨 요소는 블록 레벨 요소의 자식으로 분류되기 때문에 자손으로 블록 레벨 요소를 가질 수 없다.
• 즉, 인라인 레벨 요소는 블록 레벨 요소를 포함할 수 없다.

인라인 요소는 새 줄에서 시작하지 않고 필요한만큼만 너비를 차지한다.

span, i, img, em, strong, a ...