Normal Flow

MDN 문서를 보고 간단하게 정리. 추후에 내용 추가하자!

개념 정의

  • Normal Flow 또는 flow layout은 레이아웃을 변경하기 전에 블록 및 인라인 요소가 페이지에 표시되는 방식을 말한다.

  • Normal Flow은 브라우저의 뷰포트 내부에 요소가 배치되는 시스템이다. 기본적으로 블록 수준 요소는 부모의 쓰기 모드(initial: horizontal-tb)를 기반 블록흐름 방향으로 배치된다.

  • 웹 페이지의 요소는 작동 방식을 변경하기 위해 CSS를 적용하지 않은 경우 정상적인 흐름(Normal flow)으로 레이아웃된다. 그 정상적인 흐름에서 그들의 위치를 ​​조정하거나 그것들을 완전히 제거함으로써 요소들의 작동 방식을 변경할 수 있다.

  • 우선, 개별 요소 상자는 요소의 내용을 취한 다음 그 주위에 padding, border, margin을 추가하여 배치된다.(box model)

  • 기본적으로 블록 레벨 요소의 컨텐츠는 이를 포함하는 상위 요소의 사용 가능한 인라인 공간을 채우고 컨텐츠를 수용하기 위해 블록 차원에서 증가한다. 인라인 요소는 콘텐츠의 크기다. 인라인 요소에는 너비나 높이를 설정할 수 없다. 블록 수준 요소의 내용 안에 있을 뿐이다. 이러한 방식으로 인라인 요소의 크기를 제어하려면 블록레벨 요소처럼 작동하도록 설정해야다 display: block; (또는 display: inline-block;둘 다의 특성을 혼합하는 경우).

  • 인라인 요소는 다르게 작동한다. 새 줄에 나타나지 않습니다. 대신, 부모 블록 수준 요소의 너비 내에 공간이 있는한 서로 같은 줄에 있고 인접한(또는 래핑된) 텍스트 콘텐츠에 배치다. 공백이 없으면 넘쳐나는 텍스트나 요소가 새 줄로 이동된.

  • 인접한 두 요소 모두에 여백(margin)이 설정되어 있고, 두 여백이 닿으면 두 요소 중 더 큰 것이 남아 있고, 더 작은 요소가 사라진다. 이것을 여백 축소라고 한다.

마진 축소(Margin collapsing)

  • margin에 대해 이해해야할 핵심 사항은 Margin collapsing의 개념이다.

  • margin이 닿는 두 요소가 있고 두 margin양수이면 해당 margin이 결합되어 가장 큰 개별 margin의 크기인 하나의 margin이 된다.

  • 하나 또는 두 margin이 모두 음수이면 전체에서 음수 값이 차감된다.

  • 아래 예에는 두 개의 단락이 있다. 상단 단락은 margin-bottom: 50px이다. 두 번째 단락은 margin-top: 30px이다. margin이 함께 축소되어 상자 사이의 실제 margin은 두 margin의 합계가 아니라 50px이다.

<div class="container">
  <p class="one">I am paragraph one.</p>
  <p class="two">I am paragraph two.</p>
</div>

마진 축소(붕괴)관련 참고 링크

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

Last updated