CSS의 Box Model

 

🔶   Box Model 🔶

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

이 박스는 내용(content), 패딩(padding), 테두리(border), 여백(margin) 4가지 영역으로 구성되어 있다.

 

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

 

🔹  Box Model 구성 요소

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

• content (내용): 실제 텍스트, 이미지, 요소가 들어가는 영역.
  • 속성: width, height.
• padding (안쪽 여백): 내용(content)과 테두리(border) 사이의 공간.
  • 속성: padding, padding-top, padding-right, padding-bottom, padding-left
• border (테두리): 박스를 감싸는 선.
  • 속성: border-width, border-style, border-color, border(축약).
• margin (바깥 여백): 박스와 다른 요소 사이의 간격.
  • 속성: margin, margin-top, margin-right, margin-bottom, margin-left.

 

🔹  width (넓이)와 height (높이)

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

div {
  width: 200px;   /* 콘텐츠 영역 너비 */
  height: 100px;  /* 콘텐츠 영역 높이 */
}

• 기본적으로 Content 영역의 크기만 지정.

 

div {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  margin: 20px;
  box-sizing: content-box;
}

• Content 영역: 200px
  Padding: 10px × 2 = 20px
  Border: 5px × 2 = 10px
  Margin: 20px × 2 = 40px
  
  • 총 너비 = 200 + 20 + 10 + 40 = 270px
    총 높이 = height + padding + border + margin

👉🏻  따라서, 패딩 보더 마진이 추가되면 브라우저가 계산하는 실제 요소의 전체 크기는 우리가 지정한 너비보다 커지게 된다.

 

🔹 box-sizing 속성

Box Model의 계산 방식을 바꿀 수 있는 속성.

/* 총 너비 = 230px (padding과 border 포함) */
div {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: content-box;
}

• content-box: width, height는 content만 포함. (기본값)

 

/* 총 너비 = 200px (padding과 border 포함) */
div {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;
}

• border-box: width, height에 padding + border까지 포함.

 

🔹 box-shadow 속성

박스에 그림자 효과를 주어 입체적으로 만드는 속성.

selector { box-shadow: offset-x offset-y blur-radius spread-radius color inset; }

• 문법: box-shadow: 가로위치 세로위치 흐림정도 번짐정도 색상 외.내부적용;
  • offset-x: 그림자 좌우 이동. (양수 → 오른쪽, 음수 → 왼쪽) (필수)
  • offset-y: 그림자 위아래 이동. (양수 → 아래, 음수 → 위) (필수)
  • blur-radius: 흐림 정도. (값 클수록 퍼지고, 0이면 선명한 그림자)
  • spread-radius: 그림자 크기 확장/축소. (양수 → 커짐, 음수 → 작아짐)
  • color: 그림자 색.
  • inset: 안쪽 그림자. (기본: 외부 그림자, inset: 내부 그림자)

 

 

📋 박스 모델 핵심 요약 📋

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

 

 

⚙️ 실 전 예제 코드 ⚙️

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