728x90
반응형
|
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
93
94
95
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
.container {
border: 1px solid black;
width: 1200px;
margin: auto;
}
header {
background-color: skyblue;
height: 100px;
/*overflow:hidden*/
}
header article {
background-color: gray;
width: 300px;
height: 100px;
}
.logo {
float: left;
}
.navi {
float: right;
}
.box1 {
background-color: yellowgreen;
height: 300px;
}
.box2 {
background-color: greenyellow;
/*높이를 주지 않음 box2에 자식요소가 있기에
높이 안줌*/
/*높이 값이 없을 때 높이 찾아주려면 overflow hidden*/
border: 5px blue;
overflow: hidden;
}
.box2 article {
/*공통적인걸 몰아주기*/
width: 33.3333%;
/*100퍼센트에서 나누기3*/
height: 300px;
/*article은 블럭요소니까 세로 배치*/
/*세로 배치 한걸 가로로 바꿔주는게 float left*/
float: left;
}
.sub1 {
background-color: darkgray;
}
.sub2 {
background-color: lightgray;
}
.sub3 {
background-color: lightslategray;
}
footer {
background-color: skyblue;
height: 100px;
}
</style>
<body>
<div class="container">
<header>
<article class="logo"></article>
<article class="navi"></article>
</header>
<section class="box1"></section>
<section class="box2">
<article class="sub1"></article>
<article class="sub2"></article>
<article class="sub3"></article>
</section>
<footer></footer>
</div>
</body>
</html>
|
cs |
https://wooncloud.tistory.com/10
[CSS] Flex를 사용하여 DIV 예쁘게 배치하기 (Container 편)
◆ 옛날에 웹 디자인은...? 옛날에는 웹 디자인을 하면서 position, float, display 등으로 레이아웃을 배치하고 콘텐츠들을 정렬했었습니다. 하지만 한계가 있었고, text-align이나 vertical-align 등을 사용
wooncloud.tistory.com
728x90
반응형
'CSS' 카테고리의 다른 글
| [CSS] Grid 개념 (0) | 2022.07.18 |
|---|
댓글