반응형
잡설
오랜만에 글을 써본다 ㅎㅎ
요즘 암것도 하기 싫어서 놀고 있었는데 이제 다시 쓰기 시작 해야지ㅎㅎ
본론
요즘에서야 display에도 여러 속성들이 있다는 것을 알게 되었다.
요즘에 알게된 여러가지중에 table에 대해 먼저 알아보자
뭐 긴말이 필요하겠는가?
|
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
92
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Table</title>
</head>
<style>
*{
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
ul{
max-width: 1440px;
list-style: none;
padding:0;
display:flex;
}
li{
margin:0 10px;
font-size: 18px;
transition: all 0.5s;
cursor: pointer;
}
li:hover{
background:white;
color:black;
font-weight: 700;
}
.menu1 {
width: 100%;
background: black;
color:white;
display:flex;
justify-content: center;
margin:0px auto;
}
.menu2 {
margin:30px auto 0;
width: 100%;
background: black;
color:white;
display:flex;
justify-content: center;
}
.ul{
max-width: 1440px;
width: 100%;
display:table;
table-layout: fixed;
}
.item{
text-align: center;
display:table-cell;
vertical-align: middle;
transition: all 0.5s;
font-size: 18px;
cursor: pointer;
}
.item:hover{
background:white;
color:black;
font-weight: 700;
}
</style>
<body>
<div class="menu1">
<ul>
<li>1번항목</li>
<li>2번항목</li>
<li>3번항목</li>
<li>4번항목</li>
<li>5번항목</li>
</ul>
</div>
<div class="menu2">
<div class="ul">
<div class="item">1번 항목</div>
<div class="item">2번 항목</div>
<div class="item">3번 항목</div>
<div class="item">4번 항목</div>
<div class="item">5번 항목</div>
</div>
</div>
</body>
</html>
|
cs |
ul에 있는
display:table;//table 설정
table-layout: fixed; //아이템들 크기 고정
menu에있는
display:table-cell; 속성을 넣어야 작동함
반응형
'웹 > css' 카테고리의 다른 글
| styled-components vs scss (0) | 2021.02.19 |
|---|---|
| css vs scss(sass) vs styled-componets (0) | 2020.04.29 |