CSS Box Model

 

이미지 출처

https://www.w3schools.com/css/css_boxmodel.asp

---

웹 페이지의 모든 요소는 사각형의 상자 모양으로 구성되어 있는데, 이를 **CSS 박스 모델(Box Model)**이라고 부릅니다.

이 모델은 요소를 구성하는 네 가지 영역(Content, Padding, Border, Margin)이 어떻게 겹쳐지고 상호작용하는지를 정의하는 표준 규약입니다.

---

1. 박스 모델의 구성 요소

박스 모델은 안쪽에서 바깥쪽으로 다음과 같은 순서로 이루어져 있습니다.

• Content (내용): 텍스트나 이미지가 들어있는 실제 영역입니다.
• Padding (안쪽 여백): 테두리와 내용 사이의 공간입니다.
• Border (테두리): 패딩과 마진 사이의 경계선입니다.
• Margin (바깥 여백): 테두리 바깥의 공간으로, 다른 요소와의 거리를 조절합니다.

---

2. width와 height (너비와 높이)

요소의 크기를 결정하는 기본 속성입니다.

• 기본적으로 width와 height는 Content 영역의 크기만을 의미합니다.
• 따라서 패딩이나 보더가 추가되면 브라우저가 계산하는 실제 요소의 전체 크기는 우리가 지정한 width보다 더 커지게 됩니다.

---

3. box-sizing (크기 계산 방식)

패딩과 테두리가 추가될 때 요소의 전체 너비가 변하는 것을 제어하는 매우 중요한 속성입니다.

• content-box (기본값): width를 100px로 설정하고 패딩을 20px 주면, 전체 너비는 140px(100 + 20 + 20)이 됩니다.
• border-box (권장): 패딩과 테두리 두께를 width 안에 포함시킵니다. width를 100px로 설정하면 패딩을 아무리 늘려도 전체 너비는 100px로 고정되어 레이아웃 계산이 훨씬 쉬워집니다.

---

4. box-shadow (박스 그림자)

박스 모델의 테두리 바깥이나 안쪽에 그림자 효과를 주어 입체감을 더하는 속성입니다.

• 구문: box-shadow: [가로위치] [세로위치] [흐림정도] [번짐정도] [색상];
• 이 속성은 박스 모델의 물리적인 크기(너비, 높이)에는 영향을 주지 않으므로 레이아웃을 망가뜨리지 않고 시각적인 깊이감만 부여합니다.

---

🖥️ 실전 예제 코드

HTML

 

<style>
  .box {
    /* 1. 크기 설정 */
    width: 200px;
    height: 100px;
    
    /* 2. 크기 계산 방식 변경 (강력 추천) */
    box-sizing: border-box; 
    
    padding: 20px;
    border: 5px solid #34495e;
    background-color: #3498db;
    color: white;
    
    /* 3. 그림자 효과 (가로 10, 세로 10, 흐림 15, 색상 반투명 검정) */
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
  }
</style>
 
<div class="box">Box Model</div>

---

📋 박스 모델 핵심 요약

키워드	역할	비고
width/height	요소의 가로/세로 크기 결정	box-sizing 설정에 따라 기준이 변함
box-sizing	박스 크기 산정 기준 설정	border-box를 쓰면 레이아웃 설계가 편함
box-shadow	요소에 입체적인 그림자 추가	레이아웃 크기에는 영향을 주지 않음

---

웹 레이아웃의 가장 밑바닥 논리인 박스 모델을 정복하셨습니다!

---