CSS를 공부하면서 가장 의문이 들었던 점은 왜 CSS를 가르쳐 주는 많은 사람들이 "이런 상황엔 이렇게 하면 이렇게 보여요"라고만 말하고 왜 그런지에 대해 설명해주지 않는다는 것이었다. CSS도 렌더링하는 과정이 존재하고 렌더링을 하기 위한 엔진이 있기에(HTML과 합쳐져있지만) 때문에 작동 원리가 존재할텐데 이건 이렇게 써요라고 말하는게, 마치 스패너의 수많은 활용 방법 중 한 가지 가르쳐주고 그렇게 써야 하는 것처럼 말하는 것 같아 맘에 들지 않았다. 그래서 CSS의 작동 방식에 관심을 갖게 되었고, 그 중 가장 근본이 된다 생각하는 flow와 inline, block에 대해 찾아보고 이해한 점을 기록해보려 한다.
1. CSS Flow Layout
HTML로 문서를 작성하면 태그들을 쓰는데, 이 때 각 요소들은 쓰여진 그대로 순서를 갖는다. 예를 들어,
<body>
<header>
<div class="first"></div>
<div class="second"></div>
<p>Hello!</p>
</header>
</body>이 경우 CSS를 적용하지 않으면 "flow 상 first div와 second div, p가 순서대로 그려진다"고 말할 수 있으며, 이렇게 작성된 순서대로 나타나는 flow를 Normal Flow라고 부른다. 또한, Flow layout이란 Inline 요소들이 layout 상에 어떠한 변화도 주지 않았을 때 화면에 나타나는 방식을 말한다. 이들에게 변화가 주어지면 각자가 독립적으로 움직이기 시작한다.
2. Block(블록 요소)
블록 요소는 normal flow의 경우 앞뒤로 line break가 일어나는 요소를 말한다. 즉, 블록 요소를 사용하면 요소들에 별다른 CSS를 적용하지 않은 경우 다음 요소가 줄바꿈 된 채로 그려지게 된다. 이는 너비나 높이와 상관 없이 글자의 방향과 수직 방향으로 줄바꿈이 일어나며, 다음 요소들이 블록 요소에 해당한다.
address, article, aside, blockquote, details, dialog, dd, div, dl, dt, fieldset, figcaption, figure, footer, form, heading tags, header, li, main, nav, ol, p, section, table, ul, 등...
2-1. Margin Collapsing(마진 병합)
블록 요소의 큰 특징 중 하나는 블록들 끼리 normal flow인 경우 각각의 margin이 병합되는 현상이 일어난다는 것이다. 이를 알고 있지 않으면 분명 margin 값을 넣었는데 왜 안들어갔지? 하며 당황할 수가 있다. 하지만 block과 같이 동작하는 float 요소나 position: absolute 값을 지정한 요소들은 normal flow를 벗어났기 때문에 이런 현상이 발생하지 않는다!! 마진 병합은 두 가지 경우에 대해 일어나는데,
1) Adjacent Siblings : 인접한 형제 요소들 사이에서 병합이 일어남
2) 컨텐츠가 없는 경우 부모 요소로부터의 margin이나 형제 요소들과의 margin이 무시당함
추가적으로 음수 margin들 사이에선 절댓값이 가장 큰 것들끼리 합쳐지게 되므로... 가장 좋은 방법은 한 방향으로만 마진을 주는 것!!!이다. 헷갈리기 때문에 일단 normal flow인지 체크한 뒤, 그런 경우 블록 요소들 사이에선 margin 값을 위로만 지정하거나, 아래로만 지정하여 병합으로 인한 혼란을 예방하는 것이 좋다.
3. Inline(인라인 요소)
Inline 요소는 block과 다르게 text flow를 따라 컨텐츠의 사이즈에 맞춰 배치되는 특징이 있다. 따라서 수직 방향의 margin과 padding은 적용되지 않으며, 해당 값을 지정하고 싶다면 display 속성을 inline-block/block 값으로 설정하는 방법을 사용할 수 있다.
