지난 포스팅에서 CSS 레이아웃을 구성하는 키워드 3가지 중 BFC(Block Format Context, 블록 서식 맥락)에 대해 알아보았다. 이번에는 Normal flow에 대해 알아보자.

Normal Flow란?

---

• 웹페이지에 CSS를 적용하지 않았을 때 문서의 가장 기본적인 레이아웃 흐름
• Block 레벨 요소는 block의 흐름을, inline 레벨 요소는 inline의 흐름을 따름
  
  

종류

---

normal flow의 형태를 구분짓는 것은 element의 기본 diplay 속성으로, block 레벨 요소와 inline 레벨 요소로 나뉜다.

Block Level Element

• 상자를 쌓는 것처럼 블록 레벨 요소의 앞과 뒤를 개행하여 그림
• 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지함
• content 높이를 height으로 가짐
• 종류: address, article, aside, blockquote, details, dialog, dd, div, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, li, main, nav, ol, p, pre, section, table, ul
  
  

Inline Level Element

• 콘텐츠의 흐름을 끊지 않고 요소를 구성하는 태그에 할당된 공간만을 너비로 가지며, 별도로 지정할 수 없음
• 새로운 줄을 만들지 않으며 필요한 너비만 차지함
• 줄바꿈을 강제하지 않음
• 콘텐츠의 흐름 방향으로만 padding과 margin 이 적용됨
• 종류: a, abbr, acronym, audio(control이 보일 경우), b, bdi, bdo, big, br, button, canvas, cite, code, data, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, label, map, mark, meter, noscript, object, output, picture, progress, q, ruby, s, samp, script, select, slot, small, span, strong, sub, sup, template, textarea, u, tt, var, video, wbr