웹 개발에서 레이아웃을 설계할 때 반드시 알아야 할 개념이 CSS 박스 모델입니다. 모든 HTML 요소는 보이지 않는 박스로 구성되며, 박스 모델을 이해하면 웹 페이지의 여백, 테두리, 콘텐츠 배치를 완벽히 컨트롤할 수 있습니다. 이 글에서는 박스 모델의 개념부터 실전 예제까지 쉽게 설명합니다.
1. CSS 박스 모델이란?
CSS 박스 모델(Box Model)은 HTML 요소를 사각형 박스로 표현한 구조입니다. 박스는 다음과 같은 네 가지 영역으로 구성됩니다:
1. Content (콘텐츠): 텍스트나 이미지가 들어가는 공간.
2. Padding (패딩): 콘텐츠와 테두리 사이의 여백.
3. Border (보더): 요소를 감싸는 테두리.
4. Margin (마진): 요소 바깥의 여백, 다른 요소와의 간격.
시각적 구조:
| Margin |
|--------|
| Border |
|--------|
| Padding |
|--------|
| Content |
2. CSS 박스 모델 구성 요소
2-1. 콘텐츠 영역 (Content)
콘텐츠 영역은 글자, 이미지 등 실제 내용이 들어가는 공간입니다.
콘텐츠 크기 설정: width와 height 속성으로 지정합니다.
div {
width: 300px;
height: 150px;
}
2-2. 패딩 (Padding)
패딩은 콘텐츠와 테두리 사이의 내부 여백입니다.
패딩 설정 방법:
• 전체 패딩 지정:
div {
padding: 20px;
}
• 개별 방향 패딩 지정:
div {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 25px;
}
2-3. 보더 (Border)
보더는 요소를 감싸는 테두리입니다.
보더 설정 방법:
1. 보더 두께, 스타일, 색상 지정:
div {
border: 2px solid black;
}
2. 둥근 테두리:
div {
border-radius: 10px;
}
2-4. 마진 (Margin)
마진은 요소의 바깥 여백으로, 다른 요소와의 간격을 설정합니다.
마진 설정 방법:
• 전체 마진 지정:
div {
margin: 20px;
}
• 개별 방향 마진 지정:
div {
margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 25px;
}
Tip: margin: 0 auto;를 사용하면 요소를 가로 중앙 정렬할 수 있습니다.
3. 박스 크기 계산 (Box Sizing)
CSS에서 요소의 크기를 계산할 때 기본적으로 콘텐츠 영역만 width와 height에 포함됩니다. 하지만 padding과 border는 별도로 계산됩니다.
기본 계산 방식:
width = 콘텐츠 영역 + 패딩 + 테두리
box-sizing 속성으로 계산 방식 변경하기
1. content-box (기본값): 패딩과 보더가 크기에 포함되지 않습니다.
2. border-box: 패딩과 보더를 크기에 포함시킵니다.
div {
box-sizing: border-box;
}
4. 박스 모델 실전 예제
HTML 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 박스 모델</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box">박스 모델 예제</div>
</body>
</html>
CSS 코드
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.box {
width: 300px;
height: 150px;
padding: 20px;
border: 5px solid #007bff;
margin: 30px;
background-color: #fff;
text-align: center;
line-height: 150px;
box-sizing: border-box;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
결과: 박스는 300px의 고정 너비를 유지하며, 내부 여백과 테두리를 포함해 정확한 크기로 표시됩니다.
5. 박스 모델 활용 팁
1. 중앙 정렬:
margin: 0 auto;로 수평 중앙 정렬, flexbox로 수직 중앙 정렬까지 가능합니다.
2. box-sizing: border-box 활용:
패딩과 테두리를 포함한 크기를 정확히 계산할 수 있어 레이아웃 관리가 쉬워집니다.
3. 통일된 여백 설정:
CSS 변수(var())를 사용해 일관된 마진과 패딩 값을 설정하세요.
4. 디버깅:
브라우저 개발자 도구를 활용해 박스 모델의 크기와 여백을 시각적으로 확인하세요.
CSS 박스 모델은 웹 개발의 핵심 개념 중 하나입니다. 마진, 패딩, 테두리를 효율적으로 활용하면 깔끔한 레이아웃과 사용자 친화적인 디자인을 구현할 수 있습니다. 이 글의 내용을 바탕으로 다양한 요소를 스타일링하며 박스 모델을 직접 실습해 보세요.
다음 글에서는 CSS 레이아웃 기술 (Flexbox와 Grid)을 다뤄, 박스 모델과 함께 사용할 수 있는 고급 레이아웃 기법을 소개하겠습니다.
