웹 페이지를 설계하는 시맨틱 태그
시맨틱 태그는 태그의 이름만으로 태그의 용도나 역할에 대한 의미가 명확한 태그를 말한다.
🟣 hearder 태그
- 웹 페이지에서 헤더 영억을 구분
- 최상단이나 좌측에 위치
- 로고, 검색, 메뉴와 같은 요소들을 포함함
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
최상단이나 좌측에 위치
로고, 검색, 메뉴와 같은 요소들을 포함
</header>
</body>
</html>
🟣 nav 태그
- 웹 페이지에서 내부의 다른 영역이나 외부를 연결하는 링크 영역을 구분
- 보통 헤더 영역에서의 메뉴나 목차와 같은 요소가 많음
- 굳이 내부나 외부를 연결하는 링크가 전부 nav 태그일 필요는 없음
- 주요 탐색 링크 영역만 포함해도 됨
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<nav>
메뉴 또는 목차 같은 요소에 많이 사용
</nav>
</header>
</body>
</html>
🟣 section 태그
- 웹 페이지에서 논리적으로 관련 있는 내용 영역을 구분
- 보통 내용의 제목을 나타내는 hn 태그 중 하나를 포함
- section 요소안에 header 나 footer를 넣을 수 있음
- body에 들어 갈 수 있는 모든 요소를 넣음
- class나 id 속성을 사용해 특정한 정보도 넣을 수 있음
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
논리적인 내용의 영역을 구분
</section>
</body>
</html>
🟣 article 태그
- 웹 페이지에서 독립적인, 별개인 영역을 구분
- 제일 좋은 영역은 네이버에서 기준으로 보면 로그인창이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
</section>
<article>
로그인 영역은 메인 페이지에서도 사용하지만,
다른 페이지에서도 많이 사용하기 때문이다.
</article>
</body>
</html>
🟣 aside 태그
- 주력 내용이나 독립적인 내용으로 보기 어려워서 section 태그로 영역을 구분할 수 없을 때 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
</section>
<article>
</article>
<aside>
aside !!!!!!!
</aside>
</body>
</html>
🟣 footer 태그
- 웹 페이지에서 푸터 영역을 구분
- 푸터 영역은 보통 웹 페이지의 최하단에 있음
- 저작권 정보, 연락처, 사이트 맵 등의 요소를 포함
- 항상 끝에 쓸 필요는 없음
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
</section>
<article>
</article>
<aside>
</aside>
<footer>
최하단에 위치하고 있지만
꼭 굳이 최하단에 쓸 필요는 없다
</footer>
</body>
</html>
🟣 main 태그
- 웹 페이지의 주요 내용을 지정할 때 사용
- 문서 내에서 한 번만 사용해야 함. 중요한 규칙 !!!!
<header>,<nav>,<article>,<aside>,<footer>태그의 하위에 포함할 수 없음
공부 중. !!! !