📌 CSS 박스 모델(Box Model) 이해하기
웹 페이지의 모든 요소는 2차원 공간 안에서 각자의 너비(width)와 높이(height)를 가지며, 이를 '박스'라고 부릅니다. 박스 모델은 이 박스를 크게 네 가지 영역으로 나누어 구분한 디자인 개념입니다.
🔹 박스 모델의 세부 영역:
영역 설명 관련 CSS 속성
| 콘텐츠(Content) 영역 | 요소 안의 콘텐츠를 표시하는 공간 | width, height |
| 안쪽 여백(Padding) | 콘텐츠 주변의 내부 여백 | padding |
| 경계선(Border) | 콘텐츠와 안쪽 여백을 감싸는 테두리 | border |
| 바깥쪽 여백(Margin) | 요소의 바깥 부분에서 요소를 감싸는 외부 여백 | margin |
🔹 각 영역의 특징과 사용 방법:
- 콘텐츠 영역: 실제 콘텐츠가 들어가는 영역으로, 너비(width)와 높이(height) 속성을 이용해 크기를 지정합니다.
- 안쪽 여백(Padding): 콘텐츠와 테두리(border) 사이의 간격을 조정합니다.
- 경계선(Border): 콘텐츠와 패딩을 둘러싸는 선으로, 두께, 스타일, 색상 등을 지정할 수 있습니다.
- 바깥쪽 여백(Margin): 요소 간의 간격을 설정하여 다른 요소와의 간격을 유지하거나 배치를 조정합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible"
contect="IE=edge"
>
<title>여백다루기기</title>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid black;
/* # 위치에다가 접미사를 주게되면 거기에만 적용
top bottom left right */
margin: 10px 20px 30px 40px;
padding-top: 20px;
padding-right: 50px;
/* # content 박스의 순수한 200x200이 되므로 박스모델이 정해진다. */
box-sizing:content-box;
/* # border 박스 사이즈가 200x200이 되고 그안에 요소가다들어간다. */
box-sizing:border-box;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
/* # 위치에다가 접미사를 주게되면 거기에만 적용
top bottom left right */
/* # content 박스의 순수한 200x200이 되므로 박스모델이 정해진다. */
box-sizing:content-box;
/* # border 박스 사이즈가 200x200이 되고 그안에 요소가다들어간다. */
box-sizing:border-box;
📌 CSS 박스 모델
CSS 박스 모델은 웹 페이지에서 각 요소가 차지하는 공간을 정의하는 개념으로, 4개의 영역으로 구성됩니다:
- 콘텐츠 영역(content): 실제 텍스트나 이미지 같은 콘텐츠가 위치하는 영역
- 패딩(padding): 콘텐츠 주변의 여백
- 보더(border): 패딩을 둘러싼 테두리
- 마진(margin): 요소 바깥의 여백, 다른 요소와의 간격을 만듭니다.
🧩 박스 모델의 크기
- 요소의 크기는 기본적으로 width와 height로 정의되지만, box-sizing 속성에 따라 계산되는 방식이 달라집니다.
📌 box-sizing 속성
**box-sizing**은 **width**와 height 속성의 적용 범위를 결정합니다.
즉, 요소의 크기가 어떻게 계산되는지를 지정하는 속성입니다.
🧑🏫 box-sizing 속성의 2가지 주요 값
- content-box (기본값)
- border-box
✅ box-sizing: content-box;
- 기본값입니다.
- **width**와 **height**는 **콘텐츠 영역(content)**의 크기만을 지정합니다.
- **패딩(padding)**과 **보더(border)**는 요소 크기에 추가됩니다.
✅ 예시 (content-box)
#content {
width: 200px;
height: 200px;
padding: 20px;
border: 10px solid black;
box-sizing: content-box;
}- 200px x 200px는 콘텐츠 영역의 크기입니다.
- **패딩(20px)**과 **보더(10px)**는 콘텐츠 영역 외부에 추가되어, 실제 요소가 차지하는 공간은 240px x 240px입니다.
✅ box-sizing: border-box;
- **width**와 **height**는 전체 요소의 크기(콘텐츠 + 패딩 + 보더)를 지정합니다.
- 패딩과 보더가 요소 크기 안에 포함되므로, 설정한 **width**와 **height**가 전체 요소의 크기로 적용됩니다.
✅ 예시 (border-box)
#content {
width: 200px;
height: 200px;
padding: 20px;
border: 10px solid black;
box-sizing: border-box;
}- 200px x 200px는 전체 요소의 크기입니다.
- **패딩(20px)**과 **보더(10px)**는 요소 크기에 포함되므로, 실제 콘텐츠 영역은 160px x 160px이 됩니다.
📈 차이점 요약
속성 값width와 height 적용 대상패딩(padding)과 보더(border) 처리
| content-box | 콘텐츠 영역만 적용 | 패딩과 보더는 외부에 추가 |
| border-box | 전체 요소 크기 적용 | 패딩과 보더는 요소 크기에 포함 |
📌 결론
- box-sizing: content-box;: 기본값이며, 콘텐츠 영역의 크기만을 기준으로 계산합니다.
- box-sizing: border-box;: 패딩과 보더를 포함한 전체 요소 크기를 기준으로 계산됩니다.
추천: **border-box**를 사용하면 레이아웃 계산이 더 직관적이고 예측하기 쉬워지므로 많은 웹 개발자들이 선호합니다!
🔹 CSS로 크기 설정 시 주의점:
- 너비(width)와 높이(height)를 설정할 때는 수치와 단위를 함께 사용해야 합니다.
- 픽셀(px)과 퍼센트(%) 단위를 가장 많이 사용하지만, 상황에 따라 다양한 단위를 활용할 수 있습니다.
🔍 개발자 도구를 활용한 박스 모델 확인: 크롬과 같은 브라우저의 개발자 도구(F12)를 통해 각 요소의 박스 모델 구조와 크기를 시각적으로 확인할 수 있습니다. 이를 통해 실제 웹페이지 디자인 시 각 요소의 정확한 크기와 여백을 쉽게 파악할 수 있습니다.
✅ 정리 및 복습 포인트:
- 모든 웹 요소는 박스 모델로 관리됨
- 박스 모델은 콘텐츠, 패딩, 보더, 마진으로 구성
- 크기 지정 시 단위와 수치 필수 (px, % 등)
- 개발자 도구로 박스 모델 구조를 시각적으로 확인 가능
CSS 박스 모델의 기본 구조와 특성을 잘 이해하면 더욱 효율적이고 명확한 웹 디자인을 구현할 수 있습니다.
'HTML & CSS' 카테고리의 다른 글
| Chapter 2-8. 색깔을 지정하는 다양한 방법(CSS) (0) | 2025.03.31 |
|---|---|
| Chapter 2-7. 배경 다루기(CSS) (0) | 2025.03.31 |
| Chapter 2-5 테두리 스타일(CSS) (0) | 2025.03.31 |
| Chapter 2-4 박스모델이란?(CSS) (0) | 2025.03.31 |
| Chapter 2-3 선택자 기본편(CSS) (0) | 2025.03.31 |