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
이다.
마진 축소(붕괴)관련 참고 링크
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
Last updated