시맨틱(Semantic, 의미) 태그
- 기존 영역 분할에 주로 사용되던 div, span 등의 태그는 태그 이름만 봤을 때 나눈다는 것 이외의 의미를 파악할 수 없음.
-> 태그만 봤을 때 태그의 목적을 알 수 없어 id 또는 class를 반드시 추가해야 했다.
이런 문제점을 해결하고자 태그 이름만으로 어느정도 어떤 역할을 하는지 알 수 있고, 웹 접근성(SEO)을 향상하는데 도움이 되는 시맨틱 태그가 추가됨.
[제공하는 태그]
header 태그 : 문서의 제목, 머리말 영역
<header></header>
footer 태그 : 문서의 하단 부분, 꼬리말, 정보 작성 영역
<footer></footer>
nav 태그 : 나침반 역할(다른페이지, 사이트 이동)의 링크 작성 영역
<nav></nav>
main 태그 : 현재 문서의 주된 콘텐츠 작성 영역
<main></main>section 태그 : 구역 구문을 위한 영역
<section></section>article 태그 : 본문과 독립된 콘텐츠를 작성하는 영역
<article></article>
aside 태그 : 사이드바(보통 양쪽), 광고 영역
<aside></aside>
-이를 활용하여 웹사이트 제작을 해보았음
position:sticky
스크롤이 임계점에 도달했을 때 화면에 스티커처럼 붙임(화면 특정 위치 고정)
-평소에는 static상태임(기본position이다가 임계점 도달 시 sticky 상태가 됨)
-top, bottom, left, right 속성이 필수로 작성 돼야 함
->임계점 도달 시 어느 위치에 부착할 지 정해야 하기 때문
(fixed는 어떤 화면이든 계속 붙어있는 상태라 sticky와 다름)
