div
div 요소는 "순수" 컨테이너로서 아무것도 표현하지도 의미하지도 않는다.
대신 다른 요소 여럿을 묶어 class나 id속성으로 꾸미기 쉽도록 돕는다.span
span 요소는 div와 아무의미 없는 순수 컨테이너이다.
❗<span>과 <div>와 매우 유사하지만, <div>는 블록 레벨 요소인 반면 <span>은 인라인 요소이다.
<body> 태그 안에 있는 span, div 태그들이 브라우저 상에서는 기본으로 양쪽 여백이 생긴다.
시맨틱 웹(Semantic Web)
Semantic: 의미의, 의미론적인
요소의 의미를 고려하여, 구조를 설계하고 코드를 작성한다.
의미론적인 마크업을 사용하면 아래와 같은 이점이 있다.
- 검색 엔진은 의미론적 마크업을 분석하여 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주한다.
- 시각 장애가 있는 사용자가 스크린리더로 페이지를 탐색할 때 의미론적 마크업을 푯말로 사용할 수 있다.
- 의미가 없는 끊임없는
div들을 탐색하는 것보다, 의미있는 코드 블록을 찾는 것이 훨씬 쉽다.- 개발자에게 태그 안에 채워질 데이터 유형을 제안한다.
- 의미있는 이름짓기(Semantic naming)는 적절한 사용자 정의 요소 / 구성 요소의 이름짓기(naming)를 반영한다.
header
header 요소는 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다.
제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있다.
header 일반적으로 브라우저 상에서 윗부분에 위치해있다.
또한, 다른 페이지로 이동해도 고정되어 있다.
구획의 제목 (<h1>-<h6>요소)을 감싸기 위한 요소지만, 필수 사항은 아니다.
다른 <header> 또는 <footer>가 자손으로 올 수 없다.✍ 입력
<header>
<h1>Main Page Title</h1>
<img src="mdn-logo-sm.png" alt="MDN logo">
</header>footer
footer 요소는 가장 가까운 구획 콘텐츠나 구획 루트의 푸터를 나타낸다.
일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담는다.
footer 일반적으로 브라우저 상에서 가장 아래에 위치해 있다.
또한, 다른 페이지로 이동해도 고정되어 있다.
다른 <footer> 또는 <header>가 자손으로 올 수 없다.✍ 입력
<footer>
<p>© 2018 Gandalf</p>
</footer>nav
요소는 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로 링크를 보여주는 구획을 나타낸다.
자주 쓰이는 예제는 메뉴, 목차이다.
aside
aside 요소는 문서의 주요 내용과 간접적으로만 연관된 부분을 나타낸다.
주로 사이드바 혹은 콜 아웃 박스로 표현한다.main
main 요소는 문서의 <body>의 주요 콘텐츠를 나타낸다.
주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어진다.
✍ 입력
<!-- other content -->
<main>
<h1>Apples</h1>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<article>
<h2>Red Delicious</h2>
<p>These bright red apples are the most common found in many
supermarkets.</p>
<p>... </p>
<p>... </p>
</article>
</main>
<!-- other content -->article
article 요소는 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나
재사용할 수 있는 구획이다.
사용 예제로 게시판과 블로그 글, 매거진이나 뉴스 기사 등이 있다.
하나의 문서가 여러 개의 <article>을 가질 수 있다.
예컨대 사용자가 스크롤하면 계속해서 다음 글을 보여주는 블로그의 경우,
각각의 글이 <article> 요소가 되며, 그 안에는 또 여러 개의 <section>이 존재할 수 있다.section
section 요소는 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용한다.
즉, 전체 글의 흐름에 있어서 문맥적으로 흐름이 끊겨서 바뀔 때 사용한다.
section을 식별할 수단이 필요하다.
주로 제목(<h1>-<h6>) 요소를 <section>의 자식으로 포함하는 방법을 사용한다.✍ 입력
<section>
<h2>Heading</h2>
<img>some image</img>
</section>참조
ur gonna figure it out. just like always have.