안녕하세요 인포돈 입니다.
백엔드를 학습하고 있는 입장에서 정말 css를 구성하는 것만큼 귀찮은 작업은 없다고 생각합니다 ㅜㅜ 그러나 테스트를 위해서, 간단한 메뉴 바 정도는 정말 빠르게 만들 수 있도록 틈틈이 연습해 두시면, 도움이 되는 것을 알아두세요! 때문에 이번 포스트에서는 1차, 2차, 3차 드롭 다운 메뉴 바를 만든는 법을 이해해봅시다.
1차 드롭다운 메뉴 바
HTML 코드
<nav class="box">
<ul>
<li><a href="#">아이템 1</a></li>
<li><a href="#">아이템 2</a></li>
<li><a href="#">아이템 3</a></li>
</ul>
</nav>css 코드
/* 초기화 작업 */
body, ul, li{
margin : 0;
padding : 0;
list-style : none;
}
a{
text-decoration: none;
color:inherit;
font-weight : bold;
}
.box {
text-align : center;
}
.box > ul {
background-color : #afafaf;
display:inline-block;
padding : 0 20px;
border-radius : 5px;
}
.box > ul > li {
display:inline-block;
}
.box > ul > li > a{
display:inline-block;
padding : 8px 50px;
}
.box > ul > li:hover > a{
background-color : black;
color : white;
}
1차 메뉴는 정말 어렵지 않게 만들 수 있다. 다른 것은 주의 깊게 볼 필요가 없고, 당연히 display에 집중해서 보면 된다. 기본적으로 nav태그는 inline-block형식으로 되어있기 때문에, 자식 태그들의 중앙 정렬을 위해서 text-align : center 속성을 사용한다.
ul 태그의 경우 li태그를 가로 정렬로 보기 위해서 inline - block속성을 주었다. 즉, 가로로 정렬되어 있는 li를 볼 수 있다.
li 태그의 경우 해당 안에 있는 a 태그가 아래로 넘어가는 현상을 막기 위해 inline-block 속성을 주었다.
a 태그의 경우 기본적으로 inline이어서 padding이 먹히지 않는다. 이를 고치기 위해 inline-block을 사용하였다.
사실 1차 드롭다운 메뉴바는 크게 어렵지 않다. 이제 본격적으로 2차부터 이해해보도록 해보자.
2차 드롭다운 메뉴 바
HTML 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<nav class="box">
<ul>
<li>
<a href="#">메인 아이템 1</a>
<ul>
<li><a href="#">세부 아이템 1</a></li>
<li><a href="#">세부 아이템 2</a></li>
<li><a href="#">세부 아이템 3</a></li>
</ul>
</li>
<li>
<a href="#">메인 아이템 2</a>
<ul>
<li><a href="#">세부 아이템 1</a></li>
<li><a href="#">세부 아이템 2</a></li>
<li><a href="#">세부 아이템 3</a></li>
</ul>
</li>
<li>
<a href="#">메인 아이템 3</a>
<ul>
<li><a href="#">세부 아이템 1</a></li>
<li><a href="#">세부 아이템 2</a></li>
<li><a href="#">세부 아이템 3</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>css 코드
/* 초기화 작업 */
body, ul, li{
margin : 0;
padding : 0;
list-style : none;
}
a{
text-decoration: none;
color:inherit;
font-weight : bold;
}
/* 가운데 정렬 */
.box {
text-align : center;
}
/* ul 설정 */
.box > ul {
background-color : #afafaf;
display:inline-block;
padding : 0 20px;
border-radius : 5px;
}
/* li 설정 */
.box > ul > li {
display:inline-block;
}
/* a 설정 */
.box ul > li > a{
display:inline-block;
padding : 8px 50px;
}
/* a hover 설정 */
.box ul > li:hover > a{
background-color : black;
color : white;
}
/* 세부 아이템 설정 */
.box > ul > li > ul {
display:none;
position:absolute;
background-color : #afafaf;
}
.box > ul > li:hover > ul{
display:block;
}
2차 메뉴이다. 크게 어려울 것이 없지만, display, position에 대한 이해가 없다면, 굉장히 어려운 기술이 된다. 이를 쉽게 이해하기 위해서는 아래 포스트를 참고하고 오길 바란다.
[HTML/CSS] display와 positon의 이해
안녕하세요 인포돈 입니다. 기업에는 CSS에서 가장 기초지만, 많이 사용하고 모르면 CSS를 다루기 힘들어지는 display와 position에 대해 이해해 보자 Display css를 활용하기 위해서 display의 개념을
infodon.tistory.com
이해를 했다면, 핵심만 집어서 이해할 수 있다.
- 세부 아이템 position이 absolute인 이유
세부 아이템 position을 absolute로 지정하지 않으면, 부모 태그에 종속적이게 된다. 즉, 부모 태그 안에 생성이 되기 때문에, 올바르지 않은 드롭다운을 나타내게 된다. (부모 태그가 늘어나면서 세부 아이템들을 포함하게 된다.) 즉, 자식은 독립적으로 나타내기 위해 absolute를 사용했다.
이 외에는 어려울 것이 없다. 3차로 넘어가 보자!
3차 드롭다운 메뉴 바
HTML 코드
<!--
nav.menu-box-1>ul>li*3>a[href="#"]{1차 메뉴 아이템 $}+ul>li*3>a[href="#"]{2차 메뉴 아이템 $}+ul>li*3>a[href="#"]{3차 메뉴 아이템 $}
-->
<nav class="menu-box-1">
<ul>
<li>
<a href="#">1차 메뉴 아이템 1</a>
<ul>
<li>
<a href="#">2차 메뉴 아이템 1</a>
<ul>
<li><a href="#">3차 메뉴 아이템 1</a></li>
<li><a href="#">3차 메뉴 아이템 2</a></li>
<li><a href="#">3차 메뉴 아이템 3</a></li>
</ul>
</li>
<li>
<a href="#">2차 메뉴 아이템 2</a>
<ul>
<li><a href="#">3차 메뉴 아이템 1</a></li>
<li><a href="#">3차 메뉴 아이템 2</a></li>
<li><a href="#">3차 메뉴 아이템 3</a></li>
</ul>
</li>
<li>
<a href="#">2차 메뉴 아이템 3</a>
<ul>
<li><a href="#">3차 메뉴 아이템 1</a></li>
<li><a href="#">3차 메뉴 아이템 2</a></li>
<li><a href="#">3차 메뉴 아이템 3</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">1차 메뉴 아이템 2</a>
<ul>
<li>
<a href="#">2차 메뉴 아이템 1</a>
<ul>
<li><a href="#">3차 메뉴 아이템 1</a></li>
<li><a href="#">3차 메뉴 아이템 2</a></li>
<li><a href="#">3차 메뉴 아이템 3</a></li>
</ul>
</li>
<li>
<a href="#">2차 메뉴 아이템 2</a>
<ul>
<li><a href="#">3차 메뉴 아이템 1</a></li>
<li><a href="#">3차 메뉴 아이템 2</a></li>
<li><a href="#">3차 메뉴 아이템 3</a></li>
</ul>
</li>
<li>
<a href="#">2차 메뉴 아이템 3</a>
<ul>
<li><a href="#">3차 메뉴 아이템 1</a></li>
<li><a href="#">3차 메뉴 아이템 2</a></li>
<li><a href="#">3차 메뉴 아이템 3</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">1차 메뉴 아이템 3</a>
<ul>
<li>
<a href="#">2차 메뉴 아이템 1</a>
<ul>
<li><a href="#">3차 메뉴 아이템 1</a></li>
<li><a href="#">3차 메뉴 아이템 2</a></li>
<li><a href="#">3차 메뉴 아이템 3</a></li>
</ul>
</li>
<li>
<a href="#">2차 메뉴 아이템 2</a>
<ul>
<li><a href="#">3차 메뉴 아이템 1</a></li>
<li><a href="#">3차 메뉴 아이템 2</a></li>
<li><a href="#">3차 메뉴 아이템 3</a></li>
</ul>
</li>
<li>
<a href="#">2차 메뉴 아이템 3</a>
<ul>
<li><a href="#">3차 메뉴 아이템 1</a></li>
<li><a href="#">3차 메뉴 아이템 2</a></li>
<li><a href="#">3차 메뉴 아이템 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>css 코드
body, ul, li{
margin : 0;
padding : 0;
list-style:none;
}
a{
text-decoration:none;
color : inherit;
font-weight:bold;
}
.menu-box-1 {
text-align:center;
}
.menu-box-1 ul{
display : inline-block;
background-color : #afafaf;
}
.menu-box-1 > ul{
padding : 0 20px;
border-radius : 8px;
}
.menu-box-1 ul > li{
display : inline-block;
position : relative;
}
.menu-box-1 ul > li > a{
display : inline-block;
padding : 10px 20px;
}
.menu-box-1 ul > li:hover > a{
background-color : black;
color : white;
}
.menu-box-1 ul > li:hover > ul{
display:block;
}
.menu-box-1 ul ul ul > li{
white-space:nowrap;
}
.menu-box-1 ul ul{
display:none;
position:absolute;
}
.menu-box-1 ul ul ul{
top:0;
left:100%;
}
.menu-box-1 > ul > li:last-child > ul > li > ul{
left:auto;
right:100%;
}
3차 메뉴는 조금 복잡해 보이지만, 이전에 말했듯 display와 position을 이해했다면, 사실 코드만 길뿐 전혀 어렵지 않은 코드가 된다. 핵심적인 사항만 가려보자.
기본적으로 2차 드롭다운 메뉴를 기반으로 하기에 3차의 핵심은 바로 3차 메뉴를 2차 메뉴 오른쪽에 지정하는 것이다. 이 부분을 이해하기 위해서 (만약 css선택자를 이해하지 못한다면, css 선택자를 이해하고 와야 한다). menu-box-1 ul > li 의경우 menu-box-1 클래스를 가지고 있는 태그 아래 있는 모든 ul (자식, 손자, 증손자 싹 다)에 있는 li들의 position을 relative로 설정한다.
즉, relative는 absolute와 fix를 그룹화해서 빠져나가지 못하게 한다. 그 후 2차 메뉴, 3차 메뉴 ul의 경우 position을 absolute로 잡아 놓게 된다면, 자신의 전 차 메뉴에 종속적이지만 absolute를 가지는 메뉴가 되게 된다.
이때, 이전 글에서 말했듯이 absolute의 경우 top., right, left, bottom를 통해 위치를 조정한다. (이때 부모 relative속성이 있으니 이를 기준으로 움직인다.) 따라서 left:100%를 주게 된다면, 완벽히 부모 li태그에서 100% 떨어진 곳에 자신이 보이게 된다. 그림에서 보이는 것처럼 말이다.
이점을 이해한다면 3차 드롭다운 메뉴도 끝이다.
'FrontEnd > HTML&CSS' 카테고리의 다른 글
| [HTML/CSS] display와 positon의 이해 (0) | 2022.09.05 |
|---|
