Flex를 이용한 페이지 상단의 메뉴바 만드는 방법을 간단히 알아 보겠습니다. 사용된 태그는 <nav>, <ul>, <li>입니다.
나무위키 CSS 바로가기
Html 기본 세팅
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Flex를 이용한 li 메뉴바</title>
</head>
<body>
<div class="header-wrap">
<div class="logo-wrap">
<a href="#">로고</a>
</div>
<div class="menu-wrap">
<ul>
<li><a href="#">메뉴 1</a></li>
<li><a href="#">메뉴 2</a></li>
<li><a href="#">메뉴 3</a></li>
</ul>
</div>
<div class="login-wrap">
<ul>
<li><a href="#">로그인</a></li>
<li><a href="#">회원가입</a></li>
</ul>
</div>
</div>
</body>
</html>
CSS 설정
a {
color:#fff;
text-decoration:none;
}
a:hover,
a:focus,
a:active {
color:#999;
}
ul {
margin:0;
padding:0;
list-style:none;
}
.header-wrap {
display:flex;
justify-content:space-between;
background-color:#333;
padding:10px 15px;
}
.logo-wrap {
flex:1;
}
.menu-wrap {
flex:7;
}
.menu-wrap ul {
display:flex;
justify-content:center;
}
.menu-wrap ul li {
margin-right:20px
}
.menu-wrap ul li:last-child {
margin-right:0px
}
.login-wrap {
flex:2;
}
.login-wrap ul {
display:flex;
justify-content:flex-end;
}
.login-wrap ul li {
margin-right:10px;
}
.login-wrap ul li:last-child {
margin-right:0px;
}
CSS 설명하기
- header-wrap를 display:flex로 먼저 설정합니다.
- header-wrap에 justify-content:space-between를 설정합니다. 해당 설정 시 하위 div의 간격을 동일하게 설정합니다.
- logo-wrap에 flex:1 설정, menu-wrap에 flex:7 설정, login-wrap에 flex:2 설정을 합니다. 영역 전체를 10으로 보고, 1:7:2로 영역을 정해주는 설정입니다.
- menu-wrap ul에 display:flex;justify-content:center값을 설정하면 li가 중앙 정렬을 하게 됩니다.
- login-wrap ul에 display:flex;justify-content:flex-end값을 설정하면 li가 오른쪽 정렬을 하게 됩니다.
- 위 5가지 기본적인 flex 설정이었습니다. 하단에 결과보기를 확인해주세요!