본문 바로가기

CSS Box Model

1. CSS Box Model: 웹 레이아웃의 기초

CSS Box Model은 웹 페이지 레이아웃의 근간을 이루는 중요한 개념입니다. 모든 HTML 요소는 하나의 '박스'로 취급되며, 이 박스는 콘텐츠, 패딩, 테두리, 마진으로 구성됩니다. Box Model을 이해하면 웹 페이지의 구조를 더 정확하게 제어할 수 있습니다.

처음 레이아웃을 잡을 때 이 박스 모델을 그려보는 것이 중요합니다. 이 박스 모델을 그리면서 데이터를 어떻게 구조화하고, 그에 알맞은 태그는 무엇인지 생각해 보아야 합니다.

앞서 말씀드린 것처럼 이러한 박스모델은 요소, 패딩, 테두리, 마진으로 구성되어 있습니다.

구성 요소설명
콘텐츠(content)텍스트, 이미지 등 실제 보여줄 내용
패딩(padding)콘텐츠와 테두리 사이의 내부 여백
테두리(border)요소와 패딩을 감싸는 테두리
마진(margin)테두리 밖의 외부 여백

CSS box model은 블록 박스에 적용됩니다. 인라인 박스는 박스 모델에 정의된 일부 동작만 사용합니다.

주의: Box Model은 기본적으로 블록 레벨 요소에 완전히 적용됩니다. 인라인 요소는 width, height, 상하 마진값이 적용되지 않습니다.

인라인 요소 - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

1.1 width

요소의 너비를 설정합니다. 기본값은 콘텐츠 영역의 너비이지만 box-sizing 속성을 사용하여 테두리 영역까지 포함할 수 있습니다. 너비를 입력하지 않으면 auto로 브라우저가 계산하여 지정합니다. 이때, 부모 요소의 너비를 기준으로 계산하여 가득 채웁니다.

<div class="box">hello</div>

.box {
  width: 300px;
  height: auto;
  background-color: lightblue;
}

1.2 height

요소의 높이를 설정합니다. 입력하지 않으면 auto로 브라우저가 계산하여 지정합니다. 이때, width와는 다르게 content의 높이만큼만 설정됩니다.

아래 예제에서 넓이와 높이를 각각 auto로 변경해 보세요.

<div>hello</div>

div {
  width: auto;
  height: 200px;
  background-color: lightblue;
}

1.3 padding

패딩은 콘텐츠 주변의 여백을 만듭니다. 이 여백은 border 안쪽 여백입니다. padding 속성은 단축 속성으로, 네 방향의 패딩을 한 번에 지정할 수 있습니다. 작성 순서는 시계방향으로 top, right, bottom, left입니다. 순서대로 padding-top, padding-right, padding-bottom, padding-left 이며 개별 속성을 사용할 수도 있습니다.

p {
  padding: 10px; /* top, right, bottom, left 모두 10px */
  padding: 10px 20px; /* top, bottom :10px,  left, right:20px */
  padding: 10px 20px 30px; /* top:10px, left,right:20px, bottom:30px */
  padding: 10px 20px 30px 40px;
}

<div class="box">hello</div>

.box {
  border: 1px solid black;
  padding: 20px;
  background-color: lightblue;
}

1.4 margin

마진은 요소 주변의 여백을 만듭니다. 마진은 border 바깥 여백입니다. margin 속성은 단축 속성으로, 네 방향의 마진을 한 번에 지정할 수 있습니다. 작성 순서는 시계방향으로 top, right, bottom, left입니다. 순서대로 margin-top, margin-right, margin-bottom, margin-left 이며 개별 속성을 사용할 수도 있습니다.

<div class="box">hello</div>

.box {
  border: 1px solid black;
  margin: 20px;
  background-color: lightblue;
}

이 마진을 사용해서 요소를 배치할 수도 있습니다.

  • 가운데 배치
<div class="box">hello</div>

.box {
  width: 200px;
  margin: auto;
  background-color: lightblue;
}
  • 오른쪽 배치
<div class="box">hello</div>

.box {
  width: 200px;
  margin-left: auto;
  background-color: lightblue;
}

1.5 border

요소의 테두리를 지정합니다. 테두리는 요소가 차지하는 전체 너비, 높이의 일부입니다. 단축 속성입니다. 다만 이렇게 되었을 때 일부 CSS에서 계산하기 어려운 경우가 있는데 이 경우에는 box-sizing 속성을 사용하여 테두리를 포함하도록 설정할 수 있습니다.

이 속성은 선의 두께, 스타일, 색상을 지정할 수 있는 단축속성입니다. 세부적인 속성은 아래와 같습니다.

.box {
  /* 두께 스타일 색상 */
  border: 1px solid black;

  /* 각기 다른 테두리 적용 */
  border-top: 2px dashed red;
  border-right: 3px dotted green;
  border-bottom: 4px double blue;
  border-left: 5px groove yellow;
}

<div class="box">hello</div>

.box {
  border: 4px double black;
  background-color: lightblue;
}

1.6 box-sizing

box-sizing 속성은 요소의 총 너비와 높이를 계산하는 방식을 지정합니다. 기본값은 content-box입니다. border-box로 설정하면 테두리와 패딩을 포함하여 요소의 총 너비와 높이를 계산합니다.

값설명계산 방식
content-box기본값width/height = 콘텐츠만
border-boxborder, padding 포함width/height = 콘텐츠 + padding + border
<div class="box">hello</div>

.box {
  width: 100px;
  padding: 20px;
  border: 30px solid black;
  /* box-sizing: border-box; */
  background-color: lightblue;
}

이 박스의 넓이는 몇일까요? width 100px + padding 20px _ 2 + border 30px _ 2를 해서 200px이 됩니다.

1.7 border-radius

border-radius 속성을 사용하면 요소의 모서리를 둥글게 만들 수 있습니다. 이 또한 단축 속성이며 자세한 속성은 아래와 같습니다.

  • border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius