박스 모델은 모든 요소를 콘텐츠 → padding → border → margin 의 사각형으로 다루는 CSS 핵심 개념으로, 요소의 크기와 간격·정렬이 모두 이 구조에서 계산된다.
01. width,height
설명
요소의 가로 너비와 세로 높이를 지정한다. 최소/최대 크기를 제한하여 반응형 레이아웃에 활용할 수 있다.
| 값 | 설명 |
|---|---|
width |
요소의 콘텐츠 가로 너비 |
height |
요소의 콘텐츠 세로 높이 |
min-width |
요소의 최소 가로 너비 |
min-height |
요소의 최소 세로 높이 |
max-width |
요소의 최대 가로 너비 |
max-height |
요소의 최대 세로 높이 |
단위는
px,%,em,vw,vh등을 사용할 수 있으며,%는 부모 요소 기준으로 계산된다.
✔ BOXMODEL
-
배경이미지 모눈 한개의 크기는 10px 입니다. (모눈의 눈금을 보고 박스의 크기를 확인하세요)
-
빨간 박스의 너비는 600px
-
초록색 테두리는 20px
-
박스의 총 높이는 100px
조건에 맞는 박스를 만들어보세요
“`html
BOX MODEL
언어란 무엇인가? 음성으로 의사를 표현하는 것.
의지를 관철시키려는 의도가 있건 없건 음성으로 의사를 표현하기만 하면 그것은 언어인가?
“`
“`html
<h3>BOX MODEL</h3>
<p>언어란 무엇인가? 음성으로 의사를 표현하는 것.<br>언어란 무엇인가? 음성으로 의사를 표현하는 것.<br>언어란 무엇인가? 음성으로 의사를 표현하는 것.</p>
“`
02. padding
설명
要素와 콘텐츠 사이의 안쪽 여백을 지정한다. 값의 개수에 따라 적용 방향이 달라진다.
| 값 개수 | 적용 방향 |
|---|---|
| 1개 | 상·우·하·좌 전체 동일 |
| 2개 | 상하 · 좌우 |
| 3개 | 상 · 좌우 · 하 |
| 4개 | 상 · 우 · 하 · 좌 (시계 방향) |
margin과 달리 음수 값을 사용할 수 없다. 자세한 내용은 🔗MDN 참고.
“`html
BOX
철수가 영희에게 퍼블리셔란 무슨 일을 하는 직업이니? 하고 물었다.
그러자 영희는 철수에게 아~ 그건 다 함께 잘 살기 위해 인터넷 선장이 되는 일이야 라고 말했다.
“`
“`html
BOX
철수가 영희에게 퍼블리셔란 무슨 일을 하는 직업이니? 하고 물었다.
그러자 영희는 철수에게 아~ 그건 다 함께 잘 살기 위해 인터넷 선장이 되는 일이야 라고 말했다.
“`
03. margin
설명
요소의 바깥쪽 여백을 지정하여 다른 요소와의 거리를 조절한다. margin: 0 auto로 블록 요소를 수평 중앙 정렬할 수 있다.
| 값 | 설명 |
|---|---|
margin |
상·우·하·좌 한 번에 지정 (padding과 동일한 개수 규칙) |
margin-top / margin-bottom |
위·아래 개별 마진 |
margin-left / margin-right |
좌·우 개별 마진 |
auto |
브라우저가 자동으로 계산 (중앙 정렬에 사용) |
인접한 블록 요소의 상하 마진은 큰 값 하나로 겹치는 '마진 상쇄' 현상이 발생한다. 자세한 내용은 🔗MDN 참고.
“`html
유래없이 뜨거운 날씨이다. 섭씨 38도를 웃도는 온도에서 에어콘은 이제 살기 위한 도구가 되었다.
달걀을 사다 놓기만 해도 병아리로 부화된다는 농담같은 이야기가 현재 대한민국의 실화다.
드디어 섭씨 40도가 넘었다. 엄마 뱃속보다 뜨거운 날씨, 감사해야 할까? 해가 뜨거울 뿐인데 오존층이 파괴되어 오존주의보가 발령되었다.
“`
“`html
solid
dotted
dashed
double
groove
ridge
inset
outset
```
```html
solid
dotted
dashed
double
groove
ridge
inset
outset
```
```html
Whenever you are asked if you can do a job, tell "Certainly I
can!" Then get busy and find out how to do it. (Theodore Roosevelt)
당신이 어떤 일을 해낼 수 있는지 누군가가 물어보면 대답해라.
"물론이죠!" 그 다음 어떻게 그 일을 해낼 수 있을지 부지런히
고민하라. (시어도어 루스벨트)
```
05. border-radius
설명
요소의 테두리 모서리를 둥글게 만든다. 각 모서리별로 반지름을 지정할 수 있으며, 값을 1~4개 사용하여 다양한 둥근 모양을 만들 수 있다.
| 값 개수 | 적용 방향 |
|---|---|
| 1개 | 네 모서리 동일 |
| 2개 | 좌상+우하 · 우상+좌하 |
| 3개 | 좌상 · 우상+좌하 · 우하 |
| 4개 | 좌상 · 우상 · 우하 · 좌하 (시계 방향) |
/ 구분 |
border-radius: 수평반지름 / 수직반지름 (타원형 모서리) |
border-radius: 50%를 정사각형 요소에 적용하면 완전한 원이 된다.
```html
radius1
radius2
radius3
radius4
```
```html
radius1
radius2
radius3
radius4
radius5 ///width:430px;height:100px;
radius6
```
06. border-image
설명
이미지를 요소의 테두리로 사용한다. 이미지를 9개의 영역(4개 모서리, 4개 측면, 중앙)으로 나누어 테두리에 적용한다.
| 값 | 설명 |
|---|---|
border-image-source |
사용할 이미지 URL 또는 gradient |
border-image-slice |
이미지를 자를 오프셋 (숫자 또는 %) |
border-image-width |
테두리 이미지의 너비 |
border-image-outset |
테두리 바깥으로 확장할 크기 |
border-image-repeat |
반복 방식 (stretch, repeat, round, space) |
border-image |
위 값을 한 번에 지정 |
border-image사용 시border속성도 함께 설정해야 이미지가 잘린다. 자세한 내용은 🔗MDN 참고.
```html
```
```html
```
`border-image: url(img/border.png) 20`에서 `20`이 slice 값이다. 단위가 없으면 픽셀로 해석한다. 네 변에서 각각 20px 안쪽에 선을 그어 이미지를 9조각으로 나눈다.
- 모서리 4개: 크기 그대로 테두리 네 귀퉁이에 고정된다.
- 변 4개: 테두리 길이에 맞춰 늘어난다(
stretch기본값). 위·아래는 가로로, 좌·우는 세로로. - 가운데 1개: 기본은 버려진다. 보이게 하려면
fill을 붙인다 →... 20 fill.
#### 예제
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Border Image</title>
<style>
div {
/* 단위 안쓰면 px */
border-image: url(border.jpg) 45 fill / auto repeat;
width: 600px;
height: 300px;
margin: 150px auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
border-image-slice
border-image-slice : 브라우저에게 테두리 조각을 만들기 위해 이미지를 슬라이스할 위치를 알려준다.
/* 모든 방향 */
border-image-slice: 30%;
/* 세로방향 | 가로방향 */
border-image-slice: 10% 30%;
/* 위 | 가로방향 | 아래 */
border-image-slice: 30 30% 45;
/* 위 | 오른쪽 | 아래 | 왼쪽 */
border-image-slice: 7 12 14 5;
/* `fill` 키워드 */
border-image-slice: 10% fill 7 12;
/* 전역 값 */
border-image-slice: inherit;
border-image-slice: initial;
border-image-slice: unset;
이미지는 4개 모서리, 4개 측면, 중앙의 9개 섹션으로 나뉜다.
브라우저에게 테두리 조각을 만들기 위해 이미지를 슬라이스할 위치를 알려준다.
border-image-slice: [ number | percentage ] | fill | initial | inherit
07. box-sizing
설명
요소의 크기 계산 기준을 설정한다. content-box(기본값)는 콘텐츠 크기만 적용되고, border-box는 padding과 border를 포함한 총 크기를 지정 값으로 계산한다.
| 값 | 설명 |
|---|---|
content-box |
width/height = 콘텐츠 크기 (padding, border 별도 추가) |
border-box |
width/height = padding + border + 콘텐츠 (실무에서 주로 사용) |
* { box-sizing: border-box; }로 전역 설정하면 레이아웃 계산이 훨씬 직관적이다.
```html
It's impossible not only starting good but also keeping it firm!!
It's impossible not only starting good but also keeping it firm!!
```
```html
It's impossible not only starting good but also keeping it firm!!
It's impossible not only starting good but also keeping it firm!!
```
08. box-shadow
설명
요소에 그림자 효과를 추가한다. 수평/수직 오프셋, 흐림 반경, 확장 반경, 색상을 지정할 수 있으며 inset 키워드로 안쪽 그림자를 만들 수 있다.
| 값 | 설명 |
|---|---|
h-shadow |
수평 오프셋 (양수=오른쪽, 음수=왼쪽) |
v-shadow |
수직 오프셋 (양수=아래, 음수=위) |
blur |
흐림 반경 (클수록 부드러운 그림자) |
spread |
그림자 확장/축소 크기 |
color |
그림자 색상 |
inset |
안쪽 그림자로 변경 (생략 시 바깥 그림자) |
box-shadow는 쉼표로 구분하여 여러 개의 그림자를 겹쳐 지정할 수 있다. 다중 그림자 활용 시 입체감이 살아난다.
```html
It's impossible not only starting good but also keeping it firm!!
It's impossible not only starting good but also keeping it firm!!
It's impossible not only starting good but also keeping it firm!!
It's impossible not only starting good but also keeping it firm!!
It's impossible not only starting good but also keeping it firm!!
It's impossible not only starting good but also keeping it firm!!
```
```html
It's impossible not only starting good but also keeping it firm!!
It's impossible not only starting good but also keeping it firm!!
It's impossible not only starting good but also keeping it firm!!
It's impossible not only starting good but also keeping it firm!!
It's impossible not only starting good but also keeping it firm!!
It's impossible not only starting good but also keeping it firm!!
</Accordion>