728x90
<nav>는 일련의 내비게이션 링크를 정의하는 태그입니다.
다른 페이지 or 현재 페이지의 다른 부분과 연결되는 링크들의 집합을 말합니다.
메뉴, 목차, 인덱스 등이 있습니다.
과거에는 거의 모든 것을 div로 묶어서 사용했지만 html5로 넘어오면서 각 영역별로 그 의미를 명확히 하기 위해 nav 같은 태그를 사용하기 시작했습니다.
그러니까 보이는 것은 달라지는 것이 없지만 문서상의 의미가 있다는 것입니다.
예를 들어 웹 스크 랩핑을 한다고 했을 때 해당 페이지와 연결된 핵심 페이지 정보를 가져오기 위해서 nav태그의 링크를 가져오면 되지요.
nav 태그가 모든 링크를 가지고 있을 필요는 없습니다.
nav태그가 만들어진 목적은 핵심 링크를 담는 데 있습니다.
예제를 통해 알아보도록 하겠습니다.
1. 기본 사용법
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML nav tag</title>
</head>
<body>
<nav>
<a href="/html">HTML</a>
<a href="/css">CSS</a>
<a href="/javascript">JavaScript</a>
</nav>
</body>
</html>
2. 가운데 정렬하기.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<style>
nav {
display: block;
width: 150px;
margin: 0 auto;
}
</style>
<title>HTML nav tag</title>
</head>
<body>
<nav>
<a href="/html">HTML</a>
<a href="/css">CSS</a>
<a href="/javascript">JavaScript</a>
</nav>
</body>
</html>
3.background 설정하기.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<style>
nav {
display: block;
width: 150px;
margin: 0 auto;
background:#000000;
}
</style>
<title>HTML nav tag</title>
</head>
<body>
<nav>
<a href="/html">HTML</a>
<a href="/css">CSS</a>
<a href="/javascript">JavaScript</a>
</nav>
</body>
</html>
끝까지 읽어 주셔서 감사합니다 ㅎㅎ
728x90
'기타 > html' 카테고리의 다른 글
| [HTML] div 태그 id class style 사용법 (0) | 2020.12.11 |
|---|---|
| [HTML] meta tag 사용법 및 예제 (0) | 2020.12.09 |
| [HTML] html table 태그 사용법 및 예제 (0) | 2020.12.05 |
| [HTML] a tag 사용법 및 예제 (0) | 2020.12.04 |
| [HTML] link 태그 사용법 및 예제 (0) | 2020.12.03 |
