Binary World

<CSS> Box Model 본문

개발자의 길/Web Programming

<CSS> Box Model

모쿠 2017. 3. 30. 14:49

<Box Model>



<05_boxmodel.html>


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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Box Model</title>
<style>
.c1 {
    border: 4px solid black;
}
.c2 {
    border: 4px dotted red;
    margin: 10px;
}
.c3 {
    border: 4px dashed blue;
    padding: 10px;
    margin: 20px;
}
.c4 {
    border-width: 10px;
    border-style: groove;
    /* solid, dotted, dashed, groove, ridge, inset, none, ... */
    border-color: red;
}
.c5 {
    height: 100px;
    border-width: 10px;
    border-top-style: solid;
    border-right-style: dotted;
    border-left-style: dashed;
    border-bottom-style: double;
    border-radius: 20px;
}
</style>
</head>
<body>
 
<h1>Box Model</h1>
<!--  
Box Model:
1. margin: 자기 자신과 외부 요소와의 간격
2. border: 테두리선
3. padding: 테두리선과 요소 내부의 컨텐트와의 간격
4. width/height: 컨텐트의 가로/세로 길이
-->
 
<div class="c1">여기는 단락1입니다.</div>
<div class="c2">여기는 단락2입니다.</div>
<div class="c3">여기는 단락3입니다.</div>
<div class="c4">Border 테스트</div>
<div class="c5">Border 테스트 2</div>
 
</body>
</html>
 
cs



<출력화면>





저작자표시 비영리

'개발자의 길 > Web Programming' 카테고리의 다른 글

<CSS> Text  (0) 2017.03.30
<CSS> Margin  (0) 2017.03.30
<CSS> Color삽입  (0) 2017.03.30
<CSS> Selector(선택자)  (0) 2017.03.30
<CSS> CSS 적용 순서  (0) 2017.03.30
'개발자의 길/Web Programming' Related Articles more
Comments