CSS- display
2020. 7. 31. 14:23ㆍWeb(CSS)
|
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
@charset "UTF-8";
pre{
background-color: #aff;
width: 600px;
margin: 5em auto;
padding: 1em 0 2em 1.5em;
font-size: 1.2em;
font-family: "맑은 고딕",sans-serif;
}
pre>b{
color: #055;
display: none;
}
pre:hover>b{display: inline;}
nav li{
border: 1px solid;
margin-right: 50px;
padding: 10px 30px;
width: 20%;
display: inline-block;
}
nav a{
border: 1px solid;
width: 100%;
display: block;
}
.sub{display: none;}
.mn01:hover>.sub {
display: inline;
}
//----------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="display.css" rel="stylesheet">
</head>
<body>
<h1>display 요소의 성격지정</h1>
<ol>
<li>display: inline; block요소를 inline 요소로 바꿈</li>
<li>display: block; inline요소를 block 요소로 바꿈</li>
<li>display: inline-block; inline,block 요소들을 중간으로 바꿈</li>
<li>display: none; 화면에서 사라짐</li>
</ol>
<pre>
block요소는 한줄에 나란히 올수없음.
크기 적용가능. 양사방 margin 적용가능.
inline요소는 한줄에 나란히 올수있음.
크기 적용불가능. 좌우 margin만 적용가능.
<b>
inline-block은 한줄에 나란히 올수있으면서
크기 적용가능. 양사방 margin 적용가능.
</b>
</pre>
<nav>
<ul>
<li class="mn01"><a href="#">menu01</a>
<ul class="sub">
<li><a href="#">sub01</a></li>
<li><a href="#">sub02</a></li>
</ul>
</li>
<li><a href="#">menu02</a></li>
<li><a href="#">menu03</a></li>
</ul>
</nav>
</body>
</html>
|
cs |
화면에 출력할 때에 나란히 오게 할 수 있는 기능과 크기 조절할 수 있는 기능을 가진 display를 알아보았다.
어려운 건 없고 그냥 상황에 따라 적용시켜가면서 하면 된다!
'Web(CSS)' 카테고리의 다른 글
| CSS - overflow (0) | 2020.07.31 |
|---|---|
| CSS - float (0) | 2020.07.31 |
| CSS - padding (0) | 2020.07.27 |
| CSS - margin (0) | 2020.07.27 |
| CSS - text (0) | 2020.07.27 |