<예시>
페이지의 메뉴 부분 header을 저렇게 만드는 방법을 알아보자
|
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
|
<!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">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div id="header">
<div class="container">
<div class="container-left clearfix">
<div class="logo">
<img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMTAzMDlfMjgg%2FMDAxNjE1MjY4MjM1NDI3.UPGULITVW-zQ7BqTcC6YZ7xSNCTpcEyKVPCMhH31YKQg.tBqXJeDQy8cMmA60AjJWVPAXNGlMlJFjO9BbH7LiCcIg.JPEG.vilip7%2F20210309_143658.jpg&type=sc960_832" alt="">
</div>
<div class="menu clearfix">
<div class="menu-item">Personal</div>
<div class="menu-item">Open Source</div>
<div class="menu-item">Business</div>
<div class="menu-item">Explore</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
cs |
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
|
/* html구조와 유사한 흐름으로 작성 */
body{
margin: 0;
padding: 0;
}
#header{
background-color: whtie;
border-bottom: 1px solid lightgray;
}
.container{
width: 980px;
margin: auto;
/* header에 주지말고 그 안의 요소에 padding을 준다. */
padding: 20px 0;
}
.container-left{
}
.logo{
float: left;
margin-right: 10px;
}
/* 이미지마다 클래스를 주게 되면 효율적인 코드 작성이 아니다. */
.logo img{
width: 30px;
/* img밑에 여백 없애는 코드 */
display: block;
}
.menu{
float: left;
}
.menu-item{
float: left;
/* 수직으로 가운데 정렬은 안쪽 여백을 둔다 */
padding: 8px 10px;
font-weight: bold;
}
/* float: left로 가로로 정렬 하고 부모 태그에 clearfix 클래스를 추가해준다*/
.clearfix::after{
content: "";
display: block;
clear: both;
}
|
cs |
차근차근 이해해보자
맨 처음에는 페이지가 이렇게 나온다.
그러면 일단 이미지의 크기를 줄여주고 가로로 정렬을 해준다.
|
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
|
body{
}
#header{
}
.container{
}
.container-left{
}
.logo{
}
.logo img{
width: 30px;
}
.menu{
}
.menu-item{
float: left;
}
.clearfix::after{
}
|
cs |
그러면 이렇게 된다.
그럼 여기서 딱 보면 해야할 것이
사진도 함께 가로로 정렬이 되어야하고, 글자사이의 간격이 있어야한다.
그리고 보기 쉽게 하기 위해 header와 container에 배경색을 주겠다.
|
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
|
body{
}
#header{
background-color: yellowgreen;
}
.container{
width: 980px;
background-color: tomato;
margin: 0 auto;
}
.container-left{
}
.logo{
float: left;
}
.logo img{
width: 30px;
margin-right: 5px;
}
.menu{
}
.menu-item{
float: left;
margin-right: 10px;
}
.clearfix::after{
content: "";
display: block;
clear: both;
}
|
cs |
- container을 가운데 정렬해주었다 (margin: 0 auto)
- img에 오른쪽 간격을 주었다 (marin-right: 5px)
- menu-item글자들에 오른쪽 간격을 주었다(margin-right:10px)
- float를 사용한 부모 태그에 clearfix클래스를 주고 정리하는 코드를 적어주었다
그러면 이렇게 된다.
글자들이 세로로도 중앙정렬이 되었으면 좋겠다.
그렇게 하는 법은 menu-item에 padding(안쪽 여백)을 주면 된다.
그런데 자세히 보면 이미지밑에 뜬금없는 여백이 있다. 그것을 고쳐주자
|
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
|
body{
margin: 0;
padding: 0;
}
#header{
background-color: yellowgreen;
}
.container{
width: 980px;
background-color: tomato;
margin: 0 auto;
}
.container-left{
}
.logo{
float: left;
}
.logo img{
width: 30px;
margin-right: 5px;
display: block;
}
.menu{
}
.menu-item{
float: left;
margin-right: 10px;
padding: 8px;
}
.clearfix::after{
content: "";
display: block;
clear: both;
}
|
cs |
- img에 display:block을 하여 밑에 여백을 없앴다.
- menu-item에 padding을 8px주어 세로로 가운데 정렬을 했다.
그럼 이렇게 됐다.
이제는 저 빨간색 부분을 조금 간격 있게 만들고,
글자를 볼드체로 바꾸겠다.
|
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
|
body{
margin: 0;
padding: 0;
}
#header{
background-color: yellowgreen;
}
.container{
width: 980px;
background-color: tomato;
margin: 0 auto;
padding: 20px;
}
.container-left{
}
.logo{
float: left;
}
.logo img{
width: 30px;
margin-right: 5px;
display: block;
}
.menu{
}
.menu-item{
float: left;
margin-right: 10px;
padding: 8px;
font-weight: bold;
}
.clearfix::after{
content: "";
display: block;
clear: both;
}
|
cs |
- container에 padding 20px을 주었고
- menu-item에 font-weight를 bold로 주었다.
그렇다면 이렇게 되었다.
이제 배경색을 바꾸고 밑줄을 만들어보겠다.
|
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
|
body{
margin: 0;
padding: 0;
}
#header{
background-color: white;
border-bottom:1px solid lightgray;
}
.container{
width: 980px;
margin: 0 auto;
padding: 20px;
}
.container-left{
}
.logo{
float: left;
}
.logo img{
width: 30px;
margin-right: 5px;
display: block;
}
.menu{
}
.menu-item{
float: left;
margin-right: 10px;
padding: 8px;
font-weight: bold;
}
.clearfix::after{
content: "";
display: block;
clear: both;
}
|
cs |
- header에 배경색을 흰색으로 바꾸고
- header에 border-bottom을 주었다.
- container에 background- color를 없앴다.
결과
728x90
'WEB > html,CSS' 카테고리의 다른 글
| [html] html 요소 / 컨텐츠 구분 / hn/ main/ article/ section/nav/address/div/ 예제 (0) | 2021.04.06 |
|---|---|
| [html] 블록요소와 인라인요소 차이/ display:block; display:inline; (0) | 2021.04.05 |
| [html][css] 선택자를 이용하여 레이아웃 만들어보기 (0) | 2021.04.04 |
| [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 |