|
속성 |
설명 |
|
border-box |
박스 모델의 가장 외곽인 테두리 까지 적용 |
|
padding-box |
박스 모델에서 테두리를 뺀 패딩의 범위까지 적용 |
|
content-box |
박스 모델에서 내용만 적용 |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!
DOCTYPE
html>
<html lang
=
"kr"
>
<head>
<meta charset
=
"utf-8"
>
<title>
키보드와 하루
</title>
<style>
div
{
margin-top
:
20px
;
background-color
:
red
;
border
:
3px solid #000
;
width
:
200px
;
padding
:
30px
;
}
</style>
</head>
<body>
1
<div style
= '
background-clip
:
border-box
'
>
키보드와 하루
</div>
2
<div style
= '
background-clip
:
padding-box
'
>
키보드와 하루
</div>
3
<div style
= '
background-clip
:
content-box
'
>
키보드와 하루
</div>
</body>
</html>
|
| [css3] background-repeat - 배경 이미지 반복 방법 (0) | 2021.04.14 |
|---|---|
| [css3] background-image - 배경 이미지 삽입 (0) | 2021.04.14 |
| [css3] background-color - 배경 색 지정 (0) | 2021.04.13 |
| [css3] list-style - 목록 속성 한꺼번에 지정 (0) | 2021.04.12 |
| [css3] list-style-position - 목록에서 들여쓰기 (0) | 2021.04.12 |
