-
inline-block를 이용한 네비만드는법웹사이트/HTML & CSS 2021. 7. 19. 12:55
css를 이용하여 수평 nivigation bar를 만들어 보도록 하겠습니다.
3가지 방법으로 보여드리겠습니다.
1. inline-block을 이용한 navigation
2. float를 이용한 navigation
3. flex를 이용한 navigation
모양은 아래의 이미지대로 만들겠습니다.
로고 폰트 크기는 36px
메뉴 폰트 크기는 16px
로그인 회원가입 크기는 14px입니다.
아래 사진은 inline-block을 이용해서 css navigation bar를 만들었습니다.
네비게이션바 완성된 모습 inline-block으로 하는 방법에 대해서 알아보겠습니다.
먼저 html 코드입니다.
<!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>메뉴바 만들기</title> <link rel="stylesheet" href="./css/reset.css"> <link rel="stylesheet" href="./css/style.css"> </head> <body> <div class="header"> <div class="section"> <div class="logo"> <a href="#">LOGO</a> </div> <div class="nav"> <ul> <li><a href="#">menu 1</a></li> <li><a href="#">menu 2</a></li> <li><a href="#">menu 3</a></li> <li><a href="#">menu 4</a></li> </ul> </div> <div class="profile"> <ul> <li><a href="#">로그인</a></li> <li><a href="#">회원가입</a></li> </ul> </div> </div> </div> </body> </html>css 소스코드입니다.
*{ color:#000; box-sizing: border-box; text-decoration: none; list-style: none; } .header{ height: 100px; width:1720px; border:1px solid; margin:0 auto; } .section{ height: 100%; width: 100%; font-size: 0px; } .section .logo{ width:6%; display: inline-block; height: 100%; font-size: 36px; line-height: 2.8; margin-left: 30px; vertical-align:top; } .section .nav{ font-size: 0; width: 82%; height:100%; text-align: center; display: inline-block; } .section .nav ul li{ font-size: 16px; line-height: 6.2; margin: 0 15px; display: inline-block; } .section .profile{ display: inline-block; width:10.2%; text-align: right; font-size: 0; height:100%; } .section .profile ul li{ display: inline-block; line-height: 7.14; font-size: 14px; margin: 0 30px 0 0; }1. 먼저 width: 1720px 그리고 height: 100px을 주기 위해서
section클래스에 width 1720px , height 100px을 줍니다.
2. 로고 클래스에 너비 값을 6% 주고 display -> inline-block
vertical-align -> top;
height: 100%;
font-size : 36px
line-height: 2.8;
margin-left: 30px;
여기서 vertical-align: top 준이유는
설정을 안 하면 아래에 이미지처럼
nav클래스와 profile클래스의 위치가 조금 이상하게 됩니다.
inline-block을 이용하여 수평 네비게이션바 여기서 vertical-align:top을 로고 클래스에 주게 되면
이렇게 똑바로 위에 붙게 됩니다.
3. 그다음 li태그들을 display inline-block을 주게 되면 한 줄로 세워지게 됩니다.
그다음 여백들을 주어서 margin: 0 15px;주어 위아래로는 0을 주고 좌우로 15px을 주었습니다.
4. profile클래스에 text-align: right를 해줘서 오른쪽으로 붙이고
오른쪽만 여백으로 30px을 주기 위해 margin: 0 30px 0 0; 했습니다.
다음에는 float를 이용한 내비게이션을 해보도록 하겠습니다.
'웹사이트 > HTML & CSS' 카테고리의 다른 글
flex를 이용한 네비만드는법 (0) 2021.07.23 float를 이용한 네비만드는법 (0) 2021.07.21 웹디자인퍼블리싱 HTML & CSS (5) (0) 2021.07.17 웹디자인퍼블리싱 HTML & CSS (4) (0) 2021.07.17 웹디자인퍼블리싱 HTML & CSS (3) (0) 2021.07.13