안녕하세요. 오늘은 CSS Box-Model에 알아볼게요.
CSS Box-Model
웹 문서에서 내용 배치 시 각 요소를 박스 형태로 구성해요.
각 박스 모델은 실제 내용이 들어가는 콘텐츠 영역과 테두리, 여백으로 구성할 수 있어요.
블록 레벨 요소 & 인라인 레벨 요소
블록레벨(Block-level) 요소는 태그를 사용해 요소 삽입 시 혼자 한 줄을 차지하는 것으로
해당 요소의 너비가 100%라 블록 레벨 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수가 없어요.
ex - <h1>, <div>, <p>
아래는 블록 레벨 요소 예제예요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>블록 레벨</title>
<style>
body * {
width: 250px;
border:1px solid blue;
}
.red {
color:red;
font-weight:bold;
}
</style>
</head>
<body>
<h1>롯데 자이언츠</h1>
<div>2023 프로야구 <p class="red">정규시즌</p>우승팀은 </div>
<p>롯데 <br />자이언츠 </p>
</body>
</html>
인라인 레벨 (inline-level) 요소는 태그를 사용해 요소 삽입 시 해당 콘텐츠만큼 영역을 차지함으로
나머지 공간에 다른 요소 삽입이 가능해요.
한 줄에 여러 개의 인라인 레벨 요소를 삽입이 가능해요.
인라인 레벨 요소의 예제예요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>인라인 레벨</title>
<style>
body * {
width: 250px;
border:1px solid blue;
}
.red {
color:red;
font-weight:bold;
}
</style>
</head>
<body>
<h1>롯데 자이언츠</h1>
<div>2023 프로야구 <span class="red">정규시즌</span>우승팀은 </div>
<p>롯데 <br />자이언츠 </p>
</body>
</html>
박스 모델의 기본 구성
웹 문서의 '블록 레벨 요소'는 모두 박스형태로
스타일 시트에서는 이렇게 박스 형태인 요소를 '박스 모델(Box Model) 요소'라고 해요.
웹 문서의 박스 모델 확인 방법은
웹 브라우저에서 박스 모델을 확인할 부분을 우 클릭 -> [검사] 선택하거나
F12 누른 뒤 해당 요소 선택 후 클릭하면 돼요.
개발자 도구 창: 웹 브라우저 - ctrl + shift + i / F12
width, height 속성
콘텐츠 영역의 크기 지정으로
콘텐츠 주변의 여백이나 테두리를 뺀 콘텐츠 영역의 크기예요.
| 종류 | 설명 |
| <크기> | 너비나 높이의 값을 px OR em 단위로 지정 |
| <백분율> | 박스 모델을 포함하는 부모 요소를 기준으로 너빗값이나 높잇값을 백분율(%)로 지정 |
| auto | 박스 모델의 너빗값과 높잇값이 콘텐츠 양에 따라 자동으로 결정 : 기본값 |
box - sizing 속성
박스 모델의 크기 계산으로 웹 문서에 여러 가지 요소 배치 시 실제 박스 모델이 차지하는 크기예요.
콘텐츠 영역 뒤에도 콘텐츠와 테두리 사이의 여백, 테두리 두께까지 계산이 필요해요.
즉 box-sizing은 박스 모델의 너비와 높이를 어떻게 결정할 것인지를 지정하는 친구예요.
| 종류 | 설명 |
| border-box | 테두리까지 포함해서 너빗값을 지정 |
| content-box | 콘텐츠 영역만 너빗값을 지정 : 기본 |
box-shadow 속성
박스 모델에 그림자 효과를 주는 속성으로
이미지나 <div>와 같은 전체 영역에 지정해서 삽입해요.
/*기본형*/
box-shadow: <수평 거리> <수직 거리> <흐림 정도> <번짐 정도> <색상> inset
box-shadow 속성값은 아래 표와 같아요.
| 종류 | 설명 |
| <수평 거리> | 그림자가 가로로 얼마나 떨어져 있는지 나타냄 양숫값 : 요소의 오른쪽 / 음숫값 : 요소의 왼쪽 ❗필수 속성❗ |
| <수직 거리> | 그림자가 세로로 얼마나 떨어져 있는지 나타냄 양숫값 : 요소의 아래쪽 / 음숫값 : 요소의 위쪽 ❗필수 속성❗ |
| <흐림 정도> | 생략 시 0을 기본값 → 진한 그림자 표시 커질수록 부드러운 그림자를 표시 (음수값 사용❌) |
| <번짐 정도> | 양숫값 : 모든 방향으로 그림자가 퍼져서 박스보다 그림자가 크게 표시 음숫값 : 모든 방향으로 그림자 축소 기본값 : 0 |
| <색상> | 한 가지만 지정 OR 공백으로 구분하여 여러 개의 색상 지정 가능 기본값 : 검은색 |
| inset | 이 키워드를 함께 표시할 경우 테두리 안쪽 그림자로 그려짐 |
다음은 box-shadow예제예요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>박스모델</title>
<style>
div {
width:200px;
height:100px;
display:inline-block;
margin:15px;
border:1px solid blue;
border-radius:20px;
}
.box1{ box-shadow:2px -2px 5px 0px;} /* 오른쪽 윗부분에 그림자 */
.box2{ box-shadow:5px 5px 15px 5px blue;} /* 오른쪽 아랫부분에 파란색 그림자 */
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
여기까지 CSS Box-Model에 알아봤는데요.
박스모델을 잘 이해하신다면 디자인이 조금 더 쉬워질 것 같아요.
'Frontend > CSS' 카테고리의 다른 글
| CSS margin & padding (0) | 2025.10.22 |
|---|---|
| CSS border (0) | 2025.10.20 |
| CSS Values & Units (0) | 2025.10.16 |
| CSS Text / List / Table Style (3) (0) | 2025.10.14 |
| CSS Text / List / Table Style (2) (0) | 2025.10.04 |