CSS 박스 모델과 요소의 크기

HeeGeun.Lee·2022년 10월 17일
1

css

목록 보기
1/2
post-thumbnail

Introduction

문서의 레이아웃을 계산할 때, 브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현한다.
CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 결정한다.
하나의 박스는 네 부분(영역)으로 이루어진다.

  • 콘텐츠 영역(content): 요소의 콘텐츠가 표시되는 영역
  • 안쪽 여백 영역(padding): content 영역과 border 사이의 안쪽 여백
  • 테두리 영역(border): padding 영역과 margin 사이의 테두리
  • 바깥 여백 영역(margin): border를 기준으로 다른 요소와의 바깥쪽 여백

이렇게 HTML 요소 박스는 다양한 속성에 의해 결정되며, 이를 ‘CSS 박스 모델(Box Model)’이라고 한다.

참조: https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model


box-sizing 속성

콘텐츠 영역을 표시하는 CSS문법 중 box-sizing이라고 하는 속성이 있는데, 이는 요소의 너비와 높이를 계산하는 방법을 지정한다.

  • content-box : 콘텐츠 영역이 포함된 기준으로 크기를 정한다.
  • border-box : 콘텐츠, 테두리 영역이 포함된 기준으로 크기를 정한다.

같은 크기라 할지라도 box-sizing의 속성값에 따라서 box의 너비와 높이가 달라진다.


요소의 크기

width, height 속성

HTML 요소에 대한 너비와 높이는 각각 width, height 속성를 사용한다.

  • auto: 기본 값으로 display 속성 값이 "block"인 경우 width 속성은 기본적으로 화면 너비 전체를 차지하며, height 속성은 콘텐츠 높이에 따라 자동으로 조절된다.
  • length: 길이 단위 값으로 적용되는 방식은 box-sizing 속성 값에 따르며, px, cm, em, rem 등의 단위로 직접 길이를 지정한다.
  • percentage(%): 자신을 포함한 요소의 값을 참조하여 비율로 결정한다. 단위는 %으로 지정한다.
  • initial: 대상 요소의 기본값이 적용된다.
  • inherit: 부모 요소의 길이를 상속받는다.

min–width, min–height, max–width, max–height 속성

요소의 최소 및 최대 너비와 높이를 지정하는 속성이며, width 및 height 속성과 사용 값이 동일하다.

결론

박스의 크기, 위치, 속성을 결정할 때 사용하는 CSS 문법에 대해 자세히 알 수 있었고, box-sizing 속성을 사용할 때 너비, 높이 계산을 편하게 하려면 border-box를 쓰는 것이 좋을 것 같았다.

박스 모델에 연관된 속성에는 display, visibility, overflow도 있긴 하나 이번 글에서는 크기와 관련된 속성만 알아보았다.

profile
느리지만 천천히.

0개의 댓글