예시
요 페이지를 한번 만들어보자
전체적인 레이아웃을 설정할때 크게 곤충처럼 머리 가슴 배로 나누는 것 처럼
헤더, 콘텐츠, 푸터로 나누어 보면 된다.
이렇게 위를 header, 중간을 content , 밑을 footer로 나누었다.
그리고 div태그를 left, center,right로 나누었다.
이제 css를 정리해줄 차례
먼저 전체를 width 1000px로 잡아놓고
가운데 정렬을 해주었다.
그리고 왼쪽의 박스들을 일단 width 150으로 정리해두었고
background color와 border를 정의해주었다.
센터와 오른쪽도 마찬가지다
그리고 div 박스들의 radius를 설정해주었다.
border-radius는 상단왼쪽부터 시계방향으로 설정이 된다.
그래서 header에 left_content의 border-radius는 30 0 30 0 인데 두개가 이렇게 반복되면 30 0 으로 써도 된다.
그리고 li로 설정해준 menu들이 원래는 세로로 정렬되어있는데 가로로 정렬해야하기 때문에
float left로 준다
그리고 밑에 하이 서울 브랜드를 시작할때 float속성이 남아 있을 수 있기 때문에
clear both를 해준다.
<결과 코드>
|
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
96
97
98
99
100
101
102
103
104
105
106
107
108
|
<!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>Document</title>
<style>
#header,#content,#footer{
width: 1000px;
margin: 0 auto;
overflow: hidden;
}
#header .left_space, #content .left_space, #footer .left_space{
width: 150px;
height: 150px;
float: left;
background-color: orange;
border: 1px solid red;
}
#header .center_space, #content .center_space, #footer .center_space{
width: 694px;
height: 150px;
float: left;
background-color: orange;
border: 1px solid red;
}
#header .right_space, #content .right_space, #footer .right_space{
width: 150px;
height: 150px;
float: left;
background-color: orange;
border: 1px solid red;
}
#header .left_space, #footer .right_space{
border-radius: 30px 0;
}
#header .right_space, #footer .left_space{
border-radius: 0 30px;
}
#header .center_space{
border-radius: 0 0 30px 30px;
}
#content .center_space{
border-radius: 30px;
height: 300px;
}
#footer .center_space{
border-radius: 30px 30px 0 0 ;
}
#content .left_space{
border-radius: 0 30px 30px 0;
height: 300px;
}
#content .right_space{
border-radius:30px 0 0 30px;
height: 300px;
}
#content .center_space ul li{
list-style: none;
float: left;
padding: 0 40px;
font-weight: bold;
font-size: 20px;
}
#content .hiseoul{
clear: both;
padding: 10px;
}
</style>
</head>
<body>
<div id="header">
<div class="left_space"></div>
<div class="center_space"></div>
<div class="right_space"></div>
</div>
<div id="content">
<div class="left_space"></div>
<div class="center_space">
<div>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
</div>
<div class="hiseoul">
<h1>하이 서울 브랜드</h1>
<p>어쩌꾸 저쩌구 설명 좌라라락</p>
</div>
</div>
<div class="right_space"></div>
</div>
<div id="footer">
<div class="left_space"></div>
<div class="center_space"></div>
<div class="right_space"></div>
</div>
</body>
</html>
|
cs |
728x90
'WEB > html,CSS' 카테고리의 다른 글
| [html] 블록요소와 인라인요소 차이/ display:block; display:inline; (0) | 2021.04.05 |
|---|---|
| [html][css] header 메뉴 만들기/ 가운데 수평정렬, 수직 정렬하는 법 (0) | 2021.04.05 |
| [html][css]구조 선택자 nth-child/ first-child/last-child (0) | 2021.04.04 |
| [html][css] 상태 선택자 input:focus / input:enabled/input:disabled css change (0) | 2021.04.04 |
| [html][css]반응선택자 hover css change (0) | 2021.04.04 |