1. 시맨틱 태그란?
: 시맨틱 태그란 그 이름만 봐도 의미를 알 수 있는 태그를 의미한다.
왜 시맨틱 태그를 사용하는가❓
1. 웹 브라우저가 HTML 소스코드만 보고도 어느 부분이 제목이고 메뉴이고 본문인지 쉽게 알 수 있다.
2. 문서 구조가 정확히 나누어지므로 여러 스마트 기기의 다양한 화면에서 웹 문서를 표현하기 쉽다.
3. 인터넷에서 웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있다.
헤더(header)
- <header></header>
- 사이트 로고, 제목, 검색창, 사이트 메뉴를 삽입한다.
네비게이션(nav)
- <nav></nav>
- 사이트의 메뉴들이 위치
- nav 태그는 웹 문서의 위치에 영향을 받지 않으므로 헤더나 푸터, 사이드바 안에 포함할 수 있고 독립해서 사용할 수도 있다.
메인(main)
- <main></main>
- 사이트의 본문 내용 위치
- 메뉴, 사이드바, 로고처럼 페이지마다 똑같이 들어간 정보는 넣을 수 없다.
큰 단위 콘텐츠 구역(article)
- <article></article>
- 기사에서 하나의 글처럼 독립적으로 구성할 수 있는 요소
- 다른 페이지에서도 그대로 가져다 쓸 수 있는 요소
- article 태그는 여러 개를 사용할 수 있다.
- article 태그 내부에 section 태그를 넣을 수도 있다.
작은 단위 콘텐츠 구역(section)
- <section></section>
- 기사의 글 안에서 한 문단, 혹은 한 분야를 구성하는 요소
- 하나의 article안에 여러 개의 section을 사용
사이드 바(aside)
- <aside></aside>
- 본문 내용 외에 왼쪽이나 오른쪽, 혹은 아래쪽에 사이드 바를 만든다.
- 주로 광고 위치
푸터(footer)
- <footer></footer>
- 사이트 제작 정보, 저작권 정보, 연락처 등이 위치
- 푸터에서는 header, section, article 등 다른 시맨틱 태그를 모두 사용할 수 있다.
코드 구조
<body>
<header>
<div>로고</div>
<nav>메뉴</nav>
</header>
<main>
<article>
<section>본문 내용 1</section>
<section>본문 내용 2</section>
<section>본문 내용 3</section>
</article>
</main>
<footer>푸터</footer>
</body>
2. div와 span
: div와 span 태그는 다른 태그들을 감싸는 컨테이너 태그로 자체적 의미는 없다.
: 레이아웃을 설정하거나 CSS 작업을 하는데 용이하게 하려고 사용한다.
시맨틱 태그가 있는데 div와 span은 왜 사용하는가❓
다양한 시맨틱 태그들이 있지만 용도에 적합하지 않을 때 div 또는 span 태그를 사용하면 좋다.
div와 span의 차이점
- <div> : 브라우저 화면의 크기 전체를 차지해 한줄 씩(세로로) 늘어남
- <span> : 태그 사이즈 만큼을 차지해 옆으로(가로로) 늘어남
참고 사이트: https://gyyeom.tistory.com/79
'Web > HTML' 카테고리의 다른 글
| [HTML] 자주 사용되는 HTML 태그정리2 - 표, 멀티미디어 (0) | 2023.05.04 |
|---|---|
| [HTML] 자주 사용되는 HTML 태그정리1 - 텍스트, 목록 (0) | 2023.05.04 |
