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>

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

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

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

1.2 height

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

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

<div>hello</div>

<div>hello</div>

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

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;
}

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>

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

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

.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>

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

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

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

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

가운데 배치

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

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

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

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

오른쪽 배치

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

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

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

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

1.5 border

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

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

border-width border-style border-color
- border-width
  - border-top-width
  - border-right-width
  - border-bottom-width
  - border-left-width
- border-style
  - border-top-style
  - border-right-style
  - border-bottom-style
  - border-left-style
- border-color
  - border-top-color
  - border-right-color
  - border-bottom-color
  - border-left-color
border-style border-style - CSS: Cascading Style Sheets | MDN
border-image border-image - CSS: Cascading Style Sheets | MDN

.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;
}

.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>

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

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

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

1.6 box-sizing

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

값	설명	계산 방식
`content-box`	기본값	width/height = 콘텐츠만
`border-box`	border, padding 포함	width/height = 콘텐츠 + padding + border

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

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

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

.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

HTML/CSS 베이스캠프

CSS Box Model