div

콘텐츠 분할 요소

플로우 콘텐츠를 위한 통용 컨테이너입니다.

CSS로 꾸미기 전에는 콘텐츠나 레이아웃에 어떤 영향도 주지 않습니다.

"순수" 컨테이너로서 아무것도 표현하지 않습니다.

블록 요소이며 그 줄을 다 감쌈

​

​

span

콘텐츠를 위한 통용 인라인 컨테이너로, 본질적으로는 아무것도 나타내지 않습니다.

적절한 의미를 가진 다른 요소가 없을 때에만 사용해야 합니다,

<span>은 <div>와 매우 유사하지만, <div>는 블록 레벨 요소인 반면 <span>은 인라인 요소입니다.

본인이 가진 컨텐츠 길이 만큼만 늘어남.

div, span 비교

​

​

​

​

- 시멘틱 태그

​

시멘틱 웹이란?

· semantic : 의미의, 의미론적인

· 요소의 의미를 고려하여, 구조를 설계하고 코드를 작성한다.

· div, span은 non-semantic이라고 한다.

​

시멘틱 웹의 이점

· 검색 엔진은 시멘틱을 분석하여 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주

· 시각 장애가 있는 사용자가 스크린리더로 페이지를 탐색할 때 푯말로 사용할 수 있다. (웹 접근성)

· 의미 없는 끊임 없는 div를 탐색하는 것 보다, 의미있는 코드 블록을 찾는 것이 훨씬 쉬움 (생산성 측면)

· 개발자에게 태그 안에 채워질 데이터 유형을 제안함

· 시멘틱 네이밍은 적절한 사용자 정의 요소/ 구성 요소의 네이밍을 반영함

​

​

header

소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다.

제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있습니다.

header 안에 다른 header, footer를 자손으로 둘 수 없음

​

​

footer

일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담습니다.

안에 다른 header, footer를 자손으로 둘 수 없음

​

​

​

​

nav

탐색 구획 요소

문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타냅니다.

자주 쓰이는 예제는 메뉴, 목차, 색인입니다.

전제 페이지를 아우르는 요소보다는, (-> footer에 가까움)

현재 페이지 기준으로 상위 요소나, 개요에 해당.

​

​

​

​

aside

별도 구획 요소

문서의 주요 내용과 간접적으로만 연관된 부분을 나타냅니다.

주로 사이드바 혹은 콜아웃 박스로 표현합니다.

​

nav: 현재 페이지나 다른페이지에서 이동할 수 있는 링크를 넣음

aside: 부가적인 정보지만 없어도 상관은 없음

​

​

​

​

article

독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냅니다.

사용 예제로 게시판과 블로그 글, 매거진이나 뉴스 기사 등이 있습니다.

하나의 문서가 여러 개의 <article>을 가질 수 있습니다.

예컨대 사용자가 스크롤하면 계속해서 다음 글을 보여주는 블로그의 경우,

각각의 글이 <article> 요소가 되며, 그 안에는 또 여러 개의 <section>이 존재할 수 있습니다.

각각의 <article>을 식별할 수단이 필요합니다.

주로 제목(<h1>-<h6>) 요소를 <article>의 자식으로 포함하는 방법을 사용합니다.

​

​

section

일반 구획 요소

독립적인 구획을 나타낸다.

각각의 <section>을 식별할 수단이 필요합니다.

주로 제목(<h1>-<h6>) 요소를 <section>의 자식으로 포함하는 방법을 사용합니다.

요소의 콘텐츠를 외부와 구분하여 단독으로 묶는 것이 나아보인다면 <article> 요소가 더 좋은 선택일 수 있습니다.

여기서 introduction과 criteria를 따로 떼어 본다면

어떤 것에 대한 설명이고 기준인지 알수 없다. 이럴 때 section이라고 생각하면 된다.

​

​

​참고사이트 : MDN, 제로베이스