CSS 박스 모델

CSS가 마음처럼 되지 않아 복습해보고자 web.dev 사이트를 이용해 복습해보고자 한다.

 

도입

다음의 HTML 코드에,

<p>I am a paragraph of text that has a few words in it.</p>

 

다음의 CSS 코드를 적용하면

p {
  width: 100px;
  height: 50px;
  padding: 20px;
  border: 1px solid;
}

 

내용이 height 태그로 지정한 20px을 벗어나게 된다. 왜 그럴까?

 

CSS로 보여지는 모든 것은 박스 형태이다.

박스 모델에 대한 이해가 있어야 위의 경우처럼 예상치 못하게 작동하는 것을 막을 수 있다.

 

Content and sizing

Extrinsic sizing

위의 예시에서 작성했듯, width와 height 속성에 특정한 값을 지정해주어 크기를 정하는 경우를 외부에서 크기를 지정한다고 하여 Extrinsic sizing이라고 한다.

overflow 속성을 이용해 위 사진처럼 내용이 지정한 범위를 벗어나는 경우 숨길지, 스크롤하게 만들지 등을 지정해줄 수 있다.

 

Intrinsic sizing

반면, width: min-content 를 이용해 내용의 크기에 맞춰 알아서 사이즈가 정해지도록 만들 수도 있다. 이를 내부에서 크기를 결정한다고 하여 Intrinsic sizing이라고 한다.

Intrinsic sizing이 브라우저의 기본 설정(default behavior)이다. Extrinsic sizing보다 더 유연하게 작동한다.

 

The areas of the box model

박스 모델은 네 가지의 주요 영역으로 나눠질 수 있다.

 

• Content box: 내용이 들어가는 영역이다.
• Padding box: padding 속성으로 정의할 수 있는 영역이다. overflow 속성이 auto나 scroll일 경우, padding box 영역에 스크롤 바가 생긴다.
• Border box: border 속성으로 정의할 수 있는 영역이다. 요소의 visual frame을 생성한다.
• Margin box: margin 속성으로 정의할 수 있는 영역이다. outline, box-shadow 등이 margin box 영역을 차지한다. (outline이나 box-shadow를 설정해도 border edge 내부의 영역은 변하지 않는다.

A useful analogy

박스 모델은 액자에 걸린 그림으로 비유할 수 있겠다.

 

Debug the box model

개발자 도구를 이용해 box model을 더 자세히 살펴볼 수 있다.

 

Control the box model

• User agent style sheet: CSS를 이용해 스타일을 지정해주지 않으면, 각 브라우저가 가진 user agent style sheet가 적용된다. 브라우저마다 스타일이 조금씩 다르기도 하고, 내가 설정하지 않은 모양으로 움직이기도 하기 때문에 CSS 초기화를 할 때도 있다.
• display 속성값: inline과 inline-block은 필요한 공간만 차지하는 반면, block은 한 줄을 모두 차지한다.
  inline 요소도 block margin이 있지만 다른 요소들이 무시한다.
  inline-block 요소의 block margin은 지켜지지만 첫 요소는 inline과 비슷하게 작동한다.
• box-sizing 속성값: content-box를 사용하면 width, height 등을 지정할 때 content box 영역만 계산해 작동한다.
  border-box는 width, height를 지정해주면 content box+padding box+border box를 모두 합한 영역의 크기로 계산된다.

 

 

모든 사진 및 내용 출처: https://web.dev/learn/css/box-model