box Model과 box-sizing

정진우·2024년 2월 13일

목록 보기

1/15

박스모델은 요소와 요소 간의 레이아웃을 짜거나 크기와 위치 등을 정할 때 중요하게 작용하며, box model의 구조는 브라우저의 개발자 도구로 이를 시각적으로 확인할 수 있습니다. 이 박스는 Content(콘텐츠), Padding(안쪽 여백), Border(테두리), Margin(바깥 여백)으로 구성됩니다.

margin(외부 여백) : border(테두리) 바깥에 위치하는 요소의 외부 여백 영역입니다. 보통 주변에 위치한 다른 엘리먼트와의 상하좌우 간격을 두기 위해서 쓰입니다.
border(테두리) : 테두리 스타일, 두께, 색상을 지정하는 데 사용됩니다.
padding(내부 여백) : 요소의 내부 여백을 설정하는 데 사용됩니다. 이 내부 여백은 요소의 Content와 border 사이의 공간을 나타내며, 레이아웃을 조절하고 시각적인 디자인을 적용하는 데 유용합니다. 컨텐츠의 width(너비)와 height(높이)를 지정해줄 수 있습니다.
Content(콘텐츠) : 요소의 텍스트나 이미지 등의 실제 내용이 위치하는 영역입니다.

Box model 종류

Block element

블록 레벨 엘리먼트는 보통 새로운 블록을 형성하며, 수직으로 쌓이는 형태를 가지고 있습니다. 각 블록 엘리먼트는 새로운 줄에서 시작하며, 기본적으로 블록 엘리먼트는 부모 요소의 너비를 100% 차지하려고 합니다. 따라서 블록 엘리먼트의 너비는 부모 요소의 너비에 맞추어집니다.
<div>, <p>, <h1>~<h6>, <ul>, <ol>, <li> 등이 있습니다.

Inline element

인라인 엘리먼트는 수평으로 나란히 표시되며, 요소의 width(너비)와 height(높이)는 해당 콘텐츠에 따라 결정되며 따로 지정할 수 없습니다. 자동으로 줄 바꿈을 발생시키지 않으며, 주로 텍스트 스타일링, 강조, 링크 등 작은 부분에 대한 스타일링이나 동작을 정의하는 데 사용됩니다.
인라인 엘리먼트의 요소는 width(너비)와 height(높이)는 해당 콘텐츠에 따라 결정되며 따로 지정할 수 없기 때문에 수직으로는 margin을 가질 수 없습니다.
<span>, <a>, <strong>, <em>, <img>, <br>등이 있습니다.

margin

margin은 박스의 외부 여백을 나타냅니다. 마진은 해당 박스와 주변 요소 사이의 간격을 조절하는 데 사용됩니다. 마진은 외부의 여백이므로, 해당 박스의 border(테두리) 바깥쪽에 적용되며, 다른 요소와 간격을 결정합니다.

margin 속성

모든 방향의 마진을 한 번에 설정합니다.
margin: top right bottom left; 순서로 값을 지정할 수 있습니다.
auto 값을 사용하면 브라우저가 해당 방향의 마진을 자동으로 계산합니다.
일반적으로 수평 가운데 정렬을 위해 margin-left와 margin-right에 auto를 사용합니다.

/* 모든 방향에 10px 마진 적용 */
margin: 10px;

/* 상하 10px, 좌우 20px 마진 적용 */
margin: 10px 20px;

/* 상 10px, 좌우 20px, 하 30px 마진 적용 */
margin: 10px 20px 30px;

/* 상 10px, 우 20px, 하 30px, 좌 40px 마진 적용 */
margin: 10px 20px 30px 40px;

margin-left: auto; /* 좌측 여백을 자동으로 계산하여 수평 가운데 정렬 */ 
margin-right: auto; /* 우측 여백을 자동으로 계산하여 수평 가운데 정렬 */

border

border 속성은 요소의 테두리를 스타일링하는 데 사용됩니다.

border 속성

border-width (테두리 너비)
- 테두리의 두께를 지정합니다.
- 예: border-width: 2px;
border-style (테두리 스타일)
- 테두리의 스타일을 지정합니다.
- 주로 사용되는 값으로는 solid (실선), dashed (대시선), dotted (점선), double (이중선) 등이 있습니다.
- 예: 예: border-style: dashed;
border-color (테두리 색상)
- 테두리의 색상을 지정합니다.
- 예: border-color: #333;

이러한 속성들은 합쳐서 border속성으로 사용될 수 있습니다.

/* div요소에 4px 두께의 실선(solid) 스타일의 검은색 테두리가 적용된다. */
div { 
  border: 4px solid black; 
}
/* 너비 border-width / 스타일 border-style / 색상 `border-color` */

padding

padding 속성은 요소의 내부 여백을 설정하는 데 사용됩니다. 이 속성은 콘텐츠 요소(content)와 테두리(border) 사이의 공간을 조절하는 데 사용됩니다.

/* 모든 방향에 10px 패딩 적용 */
padding: 10px;

/* 상하 10px, 좌우 20px */
padding: 10px 20px;

/* 상 10px, 좌우 20px, 하 30px */
padding: 10px 20px 30px;

/* 상 10px, 우 20px, 하 30px, 좌 40px */
padding: 10px 20px 30px 40px;

content

태그가 차지하는 공간은 텍스트나 이미지 등의 실제 콘텐츠가 표시되는 영역입니다. 요소가 블록 레벨 요소인 경우, 콘텐츠 영역의 크기를 width, min-width, max-width, height, min-height, max-height 속성을 사용하여 명시적으로 설정할 수 있습니다.

box-sizing

박스의 크기를 화면에 표시하는 방식을 변경하는 속성입니다. 기본적으로 요소의 크기는 해당 요소의 콘텐츠 크기(content size)로 정의됩니다. 그러나 box-sizing 속성을 사용하면 테두리(border)와 안쪽 여백(padding)을 포함한 전체 요소의 크기를 정의할 수 있습니다. 예시를 작성하면서 알아보겠습니다.

.item {
  width: 100px;
  height: 100px;
  background-color: royalblue;
}

너비와 높이의 값이 100px인 <div>두 개가 있습니다. 이 둘의 크기는 현재 똑같습니다. 여기서 첫 번째 아이템 부분에 border와 padding를 추가해보겠습니다.

브라우저의 개발자 도구에서 첫 번째 .item의 크기를 확인해 보면 148픽셀로 명시되어 있습니다. 기본적으로 너비와 높이가 각각 100픽셀로 지정되어 있지만, border와 padding을 사용하면 콘텐츠 영역을 제외한 박스 모델의 크기가 커지게 됩니다.

전체 박스 모델의 크기는 100(content) + 40(좌우 padding) + 8(좌우 border) = 148px 입니다. border와 padding을 사용하면 처음에 의도한 크기로 출력되지 않는 경우가 있습니다. 이런 불편함은 CSS 박스 모델의 box-sizing 속성을 사용하여 해결할 수 있습니다.

box-sizing의 속성

content-box (기본값): 요소의 크기는 콘텐츠 영역(content area)만을 포함합니다. 테두리(border)와 내부 여백(padding)은 크기에 포함되지 않습니다.
border-box: 요소의 크기는 테두리(border)와 안쪽 여백(padding)을 포함한 전체 영역을 나타냅니다. 이는 요소의 크기를 더 직관적으로 조절할 수 있게 해줍니다.

앞서 생성한 <div>에 box-sizing 속성을 사용한 예시를 작성해보겠습니다.

.item {
  width: 100px;
  height: 100px;
  background-color: royalblue;
}
.item:first-child {
  border: 4px solid black;
  padding: 20px;
  box-sizing: border-box;
}

border-box를 사용하면 테두리(Border)와 안쪽 여백(Padding)을 콘텐츠 영역에 포함하여 크기를 계산합니다. 따라서 box-sizing: border-box;로 설정하면 콘텐츠 영역의 크기만 지정하면 되어서 편리합니다. 패딩과 보더는 크기에 추가로 고려되어, 크기 지정 시 직관적으로 다룰 수 있습니다.

참고

정진우

내가 바뀌지 않으면 아무것도 바뀌지 않는다 🔥🔥🔥

다음 포스트