-
flex를 이용한 네비만드는법웹사이트/HTML & CSS 2021. 7. 23. 14:03
flex를 이용한 네비를 만들어보겠습니다.
완성된 소스코드부터 보여드리겠습니다.
<!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/flex_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>*{ color:#000; text-decoration: none; box-sizing: border-box; } .header{ width: 100%; height:100%; } .section{ width: 1720px; height: 100px; border: 1px solid; margin: 0 auto; position: relative; display:flex; justify-content: space-between; } .logo{ font-size:36px; flex: 1; padding: 0 0 0 30px; line-height: 2.75; } .nav{ flex:8; } .nav ul{ display: flex; justify-content: center; } .nav ul li{ font-size: 16px; margin: 0 15px; line-height:6.25; } .profile{ flex: 1; } .profile ul{ display: flex; justify-content:flex-end; } .profile ul li{ font-size: 14px; line-height: 7.0; margin-right: 30px; }위 코드들이 완성된 코드입니다.
완성 화면입니다.
차근차근 알아볼까요??
1. section클래스
width: 1720px; height: 100px; -> 너비와 높이를 각각 1720픽셀 100픽셀을 주어 헤더의 섹션 공간을 주었습니다.
border: 1px solid; -> 테두리 1픽셀을 주어 사각형을 주었습니다.
margin: 0 auto -> 0은 위아래에 대한 간격을 0을 준다는 말입니다. auto는 자동으로 좌우 마진을 배분해줍니다.
그리고 고대해왔던 우리가 배우려고 한 flex를 주겠습니다.
display: flex;를 주면 수평으로 배치가 됩니다.
justify-content => flex의 주축을 기준으로 자식 요소들을 어떻게 배치할 것인가를 설정하는 값입니다.
저희는 왼쪽 로고 가운데 메뉴 오른쪽 프로필의 위치를 잡기 위해서
justify-content : space-between; 을 넣겠습니다.
이렇게 해서 코드는 아래에 코드가 되겠습니다.
.section{ width: 1720px; height: 100px; border: 1px solid ; margin: 0 auto; display:flex; justify-content: space-between; }결과로
이렇게 왼쪽에는 로고가 오른쪽에는 프로필이 가운데는 메뉴가 위치를 잡게 됩니다.
2. logo클래스
로고 클래스의 너비를 주기 위해
flex: 1
폰트 사이즈
font-size : 36px
왼쪽 여백을 padding으로 줌
padding-left: 30px 또는 padding : 0px 0px 0px 30px;
세로 중앙 정렬하기 위해
line-height: 2.75;
여기서 flex 속성을 사용했는데
flex : flex-grow, flex-shrink, flex-basis 속성을 지정할 수가 있습니다.
flex-grow 속성은 flex 자식 요소의 증가 너비 비율을 설정해줍니다. => 기본값 0
flex-shrink 속성은 자식 요소의 감소 너비 비율을 설정해줍니다. => 기본값 1
flex-basis 속성 자식 요소의 기본 너비 설정입니다. => 기본값 auto
여기서 우리는 flex : 1을 주었는데요. flex-grow를 설정해준 겁니다.
그러므로 1만큼의 너비를 갖게 됩니다.
.logo{ font-size:36px; flex: 1; padding: 0px 0px 0px 30px; line-height: 2.75; }결과를 보시면
제가 보기 쉽게 logo 클래스에 테두리 빨간색을 넣었습니다.
보시면 logo 클래스가 너비를 다 차지하는 것 을 볼 수가 있습니다.
이게 왜 그러냐면 logo클래스는 flex 1 너비를 주었습니다.
하지만 nav 클래스와 profile 클래스는 너비를 주지 않았습니다. 그래서
logo 클래스가 자리를 다 차지하게 된 겁니다.
nav클래스와 profile 클래스의 너비를 주게 되면 자리 찾아갑니다.
3. nav 클래스
flex : 8을 줍니다.
여기서 8을 준이유는
로고 클래스 1 , 프로파일 클래스 1 , 네비 클래스 8 종합 10을 기준으로 했습니다.
여기서 10은 제 임의로 기준을 잡은 겁니다.
.nav{ flex:8; }
어떤가요? 네비 클래스도 너비를 갖게 되었죠??
4. nav 클래스 ul
nav클래스 안에 li를 수평으로 배치하기 위해서
아까 section클래스처럼 display :flex를 주겠습니다.
그리고 자식 요소들이 가운데 배치되게 하기 위해
justify-content: center
를 주겠습니다.
.nav ul{ display: flex; justify-content: center; }
display : flex와 justify-content: center를 준상태가
위 사진 결과입니다.
5. nav클래스 ul li
이제 저 menu1, menu2, menu3, menu4를 수직 가운데 정렬하기 위해
line-height: 6.25;
폰트 사이즈 16px
각각 요소마다 여백을 주기 위해 margin : 0 15px;
.nav ul li{ font-size: 16px; margin: 0 15px; line-height:6.25; }
6. profile클래스
너비를 주기 위해
flex: 1
.profile{ flex: 1; }
너비를 갖게 되었습니다.
7. profile클래스 ul
이것도 수평 정렬하기 위해
display: flex를 주겠습니다.
그리고 오른쪽으로 붙이기 위해
justify-content: flex-end;
를 넣어 flex주축 기준 마지막 쪽에 붙입니다.
.profile ul{ display: flex; justify-content:flex-end; }
8. profile 클래스 ul li
세로 중앙 정렬 후 오른쪽으로 여백 30px만큼 주겠습니다.
폰트 사이즈는 14px이고요
line-height: 7;
margin-right: 30px;
.profile ul li{ font-size: 14px; line-height: 7.0; margin-right: 30px; }
이로써 display: flex를 이용한 네비 만드는 방법을 알아보았습니다.
다음에는
드롭다운 메뉴를 만들어 보겠습니다.
'웹사이트 > HTML & CSS' 카테고리의 다른 글
css로 드롭다운메뉴 만드는법 (0) 2021.07.25 float를 이용한 네비만드는법 (0) 2021.07.21 inline-block를 이용한 네비만드는법 (0) 2021.07.19 웹디자인퍼블리싱 HTML & CSS (5) (0) 2021.07.17 웹디자인퍼블리싱 HTML & CSS (4) (0) 2021.07.17