nav 태그는 없어도 무방 하지만 스크린 리더에서 인식이 되도록 하기 위해 추가 한다.
nav 태그를 제거 하더라도 보이는 형태는 변하지 않는다.
nav 태그 : 네비게이션 역할을 하는 링크 그룹을 나타낸다.
스크린 리더를 이용하는 사용자가 네비게이션을 쉽고 빠르게 찾을수 있다.
1. 리스트 기본
<nav>
<ul>
<li><a href="#">C++</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">HTML</a></li>
</ul>
</nav>
<ul>
<li><a href="#">C++</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">HTML</a></li>
</ul>
</nav>
결과)
2. 가로형으로 리스트 배열하기
ul {
list-style-type: none; /*점을 제거 한다*/
margin: 0; /*리스트 사이 틈을 제거 한다*/
padding: 0;
}
li {
display: inline; /*리스트를 가로로 배열*/
}
list-style-type: none; /*점을 제거 한다*/
margin: 0; /*리스트 사이 틈을 제거 한다*/
padding: 0;
}
li {
display: inline; /*리스트를 가로로 배열*/
}
결과)
3. 메뉴 꾸미기
두 번째 자식부터 왼쪽 테두리를 추가하는 방법 1
ul > *:not(:first-child) {
border-left: solid white 2px;
}
> : 자식 선택자.
* : 모든 요소를 선택한다.
:not(:first-child) : 첫번째 자식을 제외한 요소를 가리킨다.
두 번째 자식부터 왼쪽 테두리를 추가하는 방법 2
li {
float: left;
border-right:1px solid #bbb;
}
li:last-child {
border-right: none;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden; /*내용이 넘치면 보이지 않는다.*/
background-color: #333;
}
li {
float: left; /*내용을 왼쪽에 배치한다. 리스트가 가로로 배치 되게 한다*/
}
li a {
display: block;
color: white;
text-align: center; /*가로 중앙 정렬*/
padding: 14px 16px; /*위 아래 14px 만큼 간격, 왼쪽, 오른쪽으로 16px 만큼 padding을 준다*/
text-decoration: none; /*글자 장식을 하지 않는다*/
}
ul > *:not(:first-child) { /*세로 선을 표시 한다*/
border-left: solid white 2px;
}
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden; /*내용이 넘치면 보이지 않는다.*/
background-color: #333;
}
li {
float: left; /*내용을 왼쪽에 배치한다. 리스트가 가로로 배치 되게 한다*/
}
li a {
display: block;
color: white;
text-align: center; /*가로 중앙 정렬*/
padding: 14px 16px; /*위 아래 14px 만큼 간격, 왼쪽, 오른쪽으로 16px 만큼 padding을 준다*/
text-decoration: none; /*글자 장식을 하지 않는다*/
}
ul > *:not(:first-child) { /*세로 선을 표시 한다*/
border-left: solid white 2px;
}
결과)
4. 마우스 Over, 활성화된 메뉴 표시
li a:hover:not(.active) {
background-color: #111; /*마우스 오버된 요소의 칼라를 지정한다. active된 아이템은 제외*/
}
.active {
background-color: #4CAF50; /*현재 위치하고 있는 페이지를 나타낸다*/
}
background-color: #111; /*마우스 오버된 요소의 칼라를 지정한다. active된 아이템은 제외*/
}
.active {
background-color: #4CAF50; /*현재 위치하고 있는 페이지를 나타낸다*/
}
요소에는 다음과 같이 클래스를 지정해준다.
<li><a class="active" href="#">C++</a></li>
다운로드: menu_test.html
참고)
가로형 메뉴
https://www.w3schools.com/css/css_navbar.asp
밑바닥부터 홈페이지 만들기 - 가로형 메뉴 만들기
http://unikys.tistory.com/m/333
리스트 가로 선 긋기
https://code.i-harness.com/ko-kr/q/300a7f