CSS 박스 모델 (CSS Box Model)
CSS 박스 모델은 웹 페이지에서 요소들이 어떻게 배치되고 크기 조정이 되는지를 정의하는 중요한 개념이다. 모든 HTML 요소는 박스 모델을 기반으로 렌더링되며, 이 모델은 요소의 내용(content), 패딩(padding), 테두리(border), 마진(margin) 영역으로 구성된다.
1. 박스 모델 구성 요소
박스 모델은 다음 네 가지 주요 영역으로 구성된다:
- 내용 (Content):
- 실제로 표시되는 요소의 내용이 위치한 영역이다.
- 예를 들어, 텍스트나 이미지 등이 들어가는 공간이다.
- width와 height 속성으로 크기가 설정된다.
- 패딩 (Padding):
- 내용 영역과 테두리 영역 사이의 공간이다.
- 이 공간은 요소의 배경색(background)과 함께 렌더링된다.
- padding 속성으로 설정할 수 있으며, 네 방향 (상, 하, 좌, 우) 모두 개별적으로 지정할 수 있다.
- 테두리 (Border):
- 요소의 내용과 패딩을 감싸는 선이다.
- border 속성으로 설정할 수 있으며, 두께, 스타일, 색상 등을 지정할 수 있다.
- 마진 (Margin):
- 요소의 테두리 바깥의 여백 공간이다.
- 마진은 다른 요소와의 간격을 조정하는 데 사용된다.
- margin 속성으로 설정하며, 마진도 네 방향 (상, 하, 좌, 우)으로 설정할 수 있다.
- 마진의 경우, 서로 인접한 두 요소가 있을 때 자동으로 합쳐지는 마진 결합(margin collapse) 현상이 발생할 수 있다.
2. 박스 모델의 계산
CSS에서 width와 height는 **내용 영역(content area)**의 크기를 기준으로 설정된다. 즉, width와 height를 설정하면 패딩, 테두리, 마진의 크기를 포함하지 않는다. 하지만 패딩, 테두리, 마진을 포함하는 전체 요소의 크기를 계산하려면 박스 모델의 계산 방법을 이해해야 한다.
기본 박스 모델 계산:
전체 너비 = content width + padding left + padding right + border left + border right + margin left + margin right
전체 높이 = content height + padding top + padding bottom + border top + border bottom + margin top + margin bottom
box-sizing 속성:
box-sizing 속성은 박스 모델의 크기를 계산하는 방법을 제어할 수 있다.
- content-box (기본값):
- width와 height는 내용 영역만을 포함하며, 패딩과 테두리는 포함되지 않는다.
- border-box:
- width와 height는 내용 영역 + 패딩 + 테두리까지 포함되며, 패딩과 테두리 크기가 width와 height에 영향을 미친다.
예시:
/* 기본값: content-box */
div {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}
이 경우, 전체 너비는 200px + 20px + 20px + 5px + 5px + 10px + 10px = 270px이고, 전체 높이는 100px + 20px + 20px + 5px + 5px + 10px + 10px = 170px이다.
/* border-box */
div {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid black;
margin: 10px;
box-sizing: border-box;
}
이 경우, width와 height는 패딩과 테두리를 포함한 값으로 계산되므로, content의 크기는 실제로 150px x 60px이 된다.
3. 예시 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Model Example</title>
<style>
div {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid black;
margin: 10px;
box-sizing: border-box; /* 패딩과 테두리가 width, height에 포함되도록 설정 */
}
</style>
</head>
<body>
<div>Box Model Example</div>
</body>
</html>
이 예시에서는 box-sizing: border-box를 사용하여, width와 height에 패딩과 테두리가 포함되도록 설정했다. 이를 통해 전체 박스의 크기를 쉽게 제어할 수 있다.
'CSS' 카테고리의 다른 글
| 다양한 css selector (0) | 2024.05.20 |
|---|