[ RESPONSIVE ] 01 시멘틱태그

 

 

[ RESPONSIVE ] 01 시멘틱태그

 

See the Pen [ RESPONSIVE ] 01 시멘틱태그 by larmong (@larmong) on CodePen.

 

GitHub에서 보기 Click!

 

---

 

header   블록 요소(Block Element)   ( 자세히보기 )

<header> 태그는 사이트의 소개 및 메뉴 그룹을 나타내는 섹션을 설정합니다.

<header> 태그에는 제목, 로고, 검색, 아이콘, 저자 정보 등을 포함 할 수 있습니다.

<header> 태그는 섹션 요소이기 때문에 제목 태그를 포함하여야 하지만 필수사항은 아닙니다.

 

 

nav   블록 요소(Block Element)   ( 자세히보기 )

<nav> 태그는 내부 페이지 및 외부 페이지에 대한 탐색 링크를 제공하는 페이지 섹션을 설정합니다.

<nav> 태그는 사이트의 주요 메뉴 및 목차 등을 표현합니다.

사이트의 모든 링크가 <nav> 태그에 포함 할 수 없지만, 핵심 탐색 링크에는 <nav> 태그를 사용합니다.

<nav> 태그가 웹 문서에 여러개 사용 된 경우에는 접근성을 높이기 위해 aria-labelledby 속성을 사용할 수 있습니다.

일반적으로 <footer> 영역에 사이트 링크는 <nav> 태그를 사용하지 않습니다.

 

 

 

aside   블록 요소(Block Element)   ( 자세히보기 )

<aside> 태그는 주요 콘텐츠의 보조적 컨텐츠 섹션을 설정합니다.

<aside> 태그는 웹 페이지의 메인 콘텐츠와 관련된 사이드의 정보, 광고 등 부분적인 정보를 나타낼 때 사용합니다.

 

 

section   블록 요소(Block Element)   ( 자세히보기 )

<section> 태그는 주제별 그룹의 콘텐츠 섹션을 정의합니다.

<section> 태그는 탭 페이지, 홈페이지의 소개, 연락처, 뉴스항목 등과 같이 주제별로 분류 할 수 있습니다.

<section> 태그에는 제목을 나타내는 <h1> ~ <h6> 태그가 포함되어야 합니다.

<section> 태그는 문장이나 문서의 스타일링 요소가 아닙니다. 스크립트의 편의나 영역을 위함이라면 <div> 태그가 좋습니다.

<section> 태그가 일반적인 영역의 주제가 아니라면 구체적인 요소(<article>, <aside>, <nav>)를 대신 사용하는 것이 더 적절합니다.

 

 

footer   블록 요소(Block Element)   ( 자세히보기 )

<footer> 태그는 사이트 관련 정보 및 관련 링크 콘텐츠 섹션을 설정합니다.

<footer> 태그는 사이트와 관련된 정보, 저작권, 연락처, 사이트 맵, 관련된 문서 링크를 제공합니다.

<footer> 태그에는 연락처 정보를 설정하는 <address> 태그가 포함 될 수 있습니다.

<footer> 태그는 화면 판독기에 의해 "콘텐츠 정보"라고 표현되지 않기 때문에 footer 요소에는

role="contentinfo" 속성을 추가해주는게 좋습니다.

 

 

 

article   블록 요소(Block Element)   ( 자세히보기 )

<article> 태그는 사이트의 독립적인 컨텐츠 섹션을 설정합니다.

<article> 태그는 포럼, 신문기사, 잡지, 블러그 항목, 게시판 글 등 콘텐츠의 독립적인 항목을 나타냅니다.

<article> 태그는 독립적인 컨텐츠의 내용이 명시적으로 나열되고, 각각의 컨테츠에는 제목(<h1>~<h6>)이 표시되어야 합니다.

<section>은 하나의 주제를 나타낸다면, <article>은 주제를 묶는 독립적인 콘텐츠를 나타냅니다.

<section> 요소 안에 <article> 요소를 쓸 수 있으며, <article> 요소 안에도 <section> 요소를 쓸 수 있습니다.

 

 

 

---

 

 

* 반응형 사이트 강의 보는곳(WEBSTORYBOY) click!

* 태그 관련 참고 사이트(WEBSTORYBOY) click!