이번 글에서는 normal flow, 즉 내가 요소의 레이아웃을 변경하지 않았을 시 웹페이지 요소가 자기 자신을 스스로(?) 배치하는 방법에 관해 알아볼 것이다!

(대충 스폰지밥이 보통흐름을 설명 하는 짤로 시작하겠다.)

보통 흐름은 웹 페이지의 '순정' 이라고 생각하면 된다. 즉, CSS를 적용하지 않은 경우 웹 페이지의 요소는 normal flow로 배치된다. 개발자가 따로 "넌 이렇게 배치돼라!" 라고 하지 않아도, 자기만의 규칙들을 가지고 알아서 배치된다는 것이다!

블록 레벨 요소 vs 인라인 요소

HTML(Hypertext Markup Language)의 요소는 역사적으로 "블록 레벨" 요소와 "인라인" 요소로 분류됐다.

블록 레벨 요소는 부모 요소의 전체 공간을 차지하여 블록을 만든다. 쉽게 설명하면 이 친구는 욕심이 그득해서 자기가 위치한 곳 한 줄을 다 차지해버린다. 아래 예제를 보면 이해가 쉬울 것이다.

블록 레벨 요소는 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한! 늘어나 가능한 모든 너비를 차지한다.

자, 그럼 인라인 요소는 무엇일까? 인라인 요소는 콘텐츠의 흐름을 끊지 않고, 요소를 구성하는 태그에 할당된 공간만 차지한다. 쉽게 설명하면 이 친구는 욕심이 없고 자기 분수를 알아서 자기 사이즈만큼만 너비를 차지한다.

인라인 요소는 새로운 줄을 만들지 않으며 필요한 너비만 차지한다.

블룩 수준 요소의 내용물은 자기 부모 요소의 너비 100%와 자체 내용물의 최대 높이가 되며, 인라인 요소는 자체 내용물의 최대 높이를 취하는 동시에 최대 너비를 취한다. 당연하게도 인라인 요소는 너비와 높이를 설정할 수 없다!

인라인 요소의 크기를 제어하고 싶다면 그것을 display: block; 속성값이나 양쪽의 성격이 혼합된 display: inline-block;을 가지고 블럭 수준 요소처럼 행동하도록 설정할 필요가 있다.

마진 축소 (margin collapsing)

두 개의 인접 요소가 모두 자체 여백이 지정되어 있다면 두 여백은 접촉하고 그중 큰 여백만 남게 되고, 작은 여백은 사라지는 이상한 규칙이 있는데, 이를 마진 축소(margin collapsing)라고 한다. 이 내용은 추후에 따로 글을 쓸 예정이다.