구획을 나누는 태그
<div> : division
- 순수 컨테이너 - 스스로는 아무것도 표현하지 않음
- 다른 요소들을 묶거나 문서의 구획을 나눔
- 전역(공통)속성만 가짐
- block 요소
시맨틱 태그
의미가 부여된 태그이다. 각 구획의 용도와 내용의 의미를 태그로써 알 수 있게 한다.
(검색엔진 등이 사이트를 분석하는 데 도움을 줌)
<div>를 대체해서 사용하는 태그들
<header>
- 페이지의 최상단에 위치
- 일반적으로 제목, 로고, 검색창 등의 내용을 포함
- 페이지의 소개 및 탐색에 도움을 줌
<footer>
- 페이지의 최하단에 위치
- 일반적으로 작성자, 저작권 정보, 관련 문서 등 포함
<nav>
- 링크들(현재 페이지 내 구획 또른 다른 페이지로의)을 포함
<aside>
- 문서의 주 내용과 간접적으로 연관된 부분
- 주로 사이드바 등에 사용
<main>
<body>의 주요 컨텐츠- 메인 컨텐츠가 이 구획에 들어감
<section>
- 컨텐츠 내 큰 단위의 독립적인 구획
- 다른 시맨틱 태그의 의미에 해당하지 않는 구획
<article>
- 독립적으로 재사용되거나 반복적으로 나타나는 구획
- 게시판이나 뉴스, 갤러리의 목록상 각 항목
프론트엔드 공부 기록