[CSS] Box Model 너 뭐야!?

MDN 박스 모델

CSS에 포함되는 모든 요소의 외장은 박스이며, 이 박스를 이해하는 것은 CSS을 통해 레이아웃을 생성하거나, 아이템과 다른 아이템을 정렬하는 것을 가능하게 하는 열쇠입니다. CSS에는 크게 두 가지 박스 (블록 박스와 인라인 박스) 유형이 있습니다. 이러한 특성은 박스가 페이지 대열 측면 및 페이지의 다른 박스와 관련하여 박스의 작동 방식을 나타냅니다.

'Box Model'과 'Block' 개념을 제대로 인지하고 있지 않으면 혼동이 있을 수 있다. 'Block' 요소는 'Box Model'의 한 유형이다. 모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부른다.

 

CSS box model의 특징

• box 모델이란 말에 느낌대로 기본적으로 '사각형'의 모양을 필수로 가진다!
• block 요소의 공간은 width, height, padding, borders, margins들을 계산해서 만들어진다.
• height가 정해져 있지 않다면 가지고 있는 content의 높이와 padding이 더해져서 height가 결정된다.
• width가 정해져 있지 않다면 float 속성이 없는 box는 부모 태그에 width(-padding)를 상속받는다. 

!주의사항

• width를 100%로 설정하면 부모 태그의 padding, margin, border 등의 요소 때문에 box가 overflow될 수가 있다.
• Collapsing Margins - margin이 더 큰 box에 margin으로 겹침
• position 속성이 relative or absolute에 따라 다르게 동작한다.

blcok 요소와 in-line 요소

• block 요소는 부모 컨테이너를 채우기 위해 자연스럽게 가로로 확장되므로 width를 "100 %"로 설정할 필요가 없다.
• block 요소는 기본적으로 상위 box의 가장 왼쪽 가장자리, 이전 블록 요소 아래에서 시작된다.
  (float or position 적용이 되지 않았을 때)
• in-line 요소는 width 및 height 속성 설정이 불가하다.
• in-line 요소는 text 속성과 같은 흐름이 있어 white-space, font-size, letter-spacing 속성 사용이 가능하다.
• in-line 요소는 vertical-align 속성을 사용하여 정렬 할 수 있지만 block 요소는 정렬 할 수 없다.
• in-line 요소는 줄 아래에 있는 텍스트 요소 (예 : 문자 "g")를 표현하기 위해 아래에 공간이 있다. (typograpy 참고)
• in-line 요소에 float이 적용되면 block 요소가 된다.

floating layout

CSS float 속성은 특히 국내 실무 내에서 레이아웃 설계하는 과정에서 많이 사용하는 속성입니다. 복잡한 형태의 레이아웃을 구성하는데 필요한 핵심 속성으로 특정 요소를 떠있게, 흐르도록, 부유하게 하도록 하는 속성입니다. 다시 말해, float 속성을 사용해 박스를 왼쪽(left) 또는 오른쪽(right)으로 "부유"시키는 레이아웃 기법입니다. 여기서 '부유하다' 라는 의미는 요소가 기본적인 문서 배치의 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽으로 이동하는 것을 말합니다.

clear - floating 해제 기법

플로팅한 요소는 문서의 흐름상에서 벗어난 상태이기 때문에 레이아웃을 무너뜨리게 되는 현상을 보게 될 것입니다.
이는 플롯을 사용하면 발생되는 현상이며 이러한 문제를 해결하기 위해서는 float 을 해제해 주어야 합니다. 여기서 "float 을 해제한다" 는 의미는 float 이 적용된 요소를 해제하는 것이 아니라 clear 속성을 적용해 float 의 영향을 받지 않도록 한다는 의미입니다.

floating 적용으로 레이아웃이 깨지는 경우

 

1. 부모 요소에 float 속성을 주는 방법

2. 부모 요소에 display: inline-block을 주는 방법

3. 부모 요소에 overflow: hidden을 주는 방법

4. 가상(추상) 선택자 :: 를 사용하는 방법

 

등이 있다.

출처: https://webclub.tistory.com/606 [Web Club]

출처: Understand the box model