CSS의 기본 규칙 (Normal flow, BFC, IFC)

HTML CSS를 그리다보면 레이아웃이 생각만큼 잘 구성되지 않아

구글에 많이 물어봤었던 경험이 있습니다.

최근 제로초님의 개발자 토크 영상을 보다가 CSS의 기본에 대해서 알아보기로 했습니다.

- 블록 요소, 인라인 요소, margin 과 정렬을 이해하고자 합니다.

이미 경험적으로 알고 있지만, 정리해둬야 할 필요가 있습니다.

■ css를 수정 해야하는데 경험적으로 이것저것 적용해보면서 눈에 보이는대로만 구현하면 반응형 디자인에서 문제가 발생하거나, 추후 유지보수할 때 복잡해집니다.

1. Normal Flow

- 특별히 생각할 것이 없습니다. 모든 요소는 위에서 아래로, 왼쪽에서 오른쪽 방향으로 배치됩니다.

* 두루미스에서 글을 작성할 때 html 태그를 붙여넣기하면 사라지는데, 해결 방법을 아시나요;;

 <div>
     <p>첫 번째 문단</p>
     <p>두 번째 문단</p>
     <span>인라인 요소1</span>
     <span>인라인 요소2</span>
 </div>

- p 태그로 두 블럭이 생기고, span 태그는 한줄로 그려집니다.

 첫 번째 문단
 두 번째 문단
 인라인 요소 1 인라인 요소 2

- 주로 레이아웃을 구성할 때 사용됩니다. (블록을 구성하고, 그 안에 인라인을 구성합니다.)

- 블록레벨 요소가 쌓이는 방식입니다.

- 블록 레벨 요소는 아래와 같습니다.

- 요소 안의 내용의 길이와 상관없이 부모 요소의 전체 너비를 차지합니다. (한 줄)

- 블록 안에 블록을 넣거나, 인라인 요소를 넣을 수 있습니다.

- width, height, margin, padding을 설정할 수 있습니다.

 <div style="padding :10px;"> 
     <h1>제목</h1>
     <p>짧은 문단입니다. </p>
 </div>

- div 태그 안에 두 줄이 생성됩니다.

- BFC가 생성되는 때는 아래와 같습니다. 그때그때 찾아보면 됩니다.

float 속성이 none이 아닌 경우
position이 absolute 또는 fixed인 경우
display가 inline-block, table-cell, table-caption, flex, inline-flex, grid, inline-grid인 경우
overflow가 visible이 아닌 경우 등

<p>
    안녕하세요! <strong> 두루미스 </strong> 두 번째 글입니다!
    <span style="color: pink;">좋아요</button> 버튼을 눌러주세요.
</p>

- 블록 요소 안에서 구성됩니다. (줄 단위 X)

- width와 height를 직접 설정할 수 없습니다. (내용의 크기만큼 차지합니다.)

- 수평 padding과 margin만 적용할 수 있습니다.

- 인라인 요소 안에 인라인 요소만 포함할 수 있습니다.

<span>, <a>, , <img>, <input> 등

그래서 언제 쓰나요?

- bfc는 float 상호작용이나 margin 상쇄를 처리하기 위해 쓰입니다.

- 자식에게 자유분방한 스타일을 걸면 부모는 감싸지 못 합니다.

(float, position absolute, fixed, display inline-block 등...)

- 이때 부모 요소에 bfc를 줘서 레이아웃을 구성합니다.

(부모 태그에 display: inline-block, overflow: auto, float: left 등을 적용합니다.)

<div class="부모" style="display: inline-block;">
    <div class="자식" style="float: left;">...</div>

</div>

- css는 인접한 두 태그의 상하 마진이 겹칩니다.

ex) 아래 두 div 태그 사이의 상하 간격은 150px이 아닌 100px입니다.

<div style="margin-bottom: 100px;">
..
</div>
<div style="margin-top: 50px;">
,,
</div>

- 위 상황에서 두 태그 사이에 새로운 bfc 요소를 추가합니다.

<div style="margin-bottom: 100px;"></div> 

<div style="overflow: auto;"></div> <!-- 새 bfc-->

<div style="margin-top: 50px;"></div>

ps. 두루미스 html 복붙 하는 방법을 아시나요;;