이제부터는 모든걸 외우려고 하지말고 필요할 때 마다 와서 확인하면서 익히도록 하자!!!!
웹 페이지를 만들 때 -> 구조적으로 설계할 것 (사용자가 보기 쉽게)
🌟 Sectioning Elements 개요, 단원
안에는 반드시 제목인 <h> 태그를 넣을 것! 그래야 정보를 명확하게 제공할 수 있다.
section <h1>섹션 제목</h1>
article
nav
aside
유사한 덩어리로(기능과 역할) 큼직하게 구획을 나눈 후(sectioning), 최소한의 기능과 의미를 갖는 단위로 쪼개서 웹페이지를 마크업 하기
1. header
전체 페이지의 도입, 시작. 최상단부분의 제목 = header
div보다 상단부, 도입부를 나타내는 느낌. 기능으로는 차이가 없음.
페이지의 헤더를 보면, 대부분 로고 이미지가 삽입되어 있는데 로고를 클릭하면 메인 페이지로 돌아가는 의미가 담겨있음
<header>
<h1>
<img src="" alt="google"/>
</h1>
</header>헤더의 제목인 h1에 이미지가 들어가면 alt 텍스트가 제목을 대신함
footer
하단부의 뉘앙스를 살려서 묶어주는 태그
2. navigation
문서 페이지 간의 이동을 돕는 메뉴 = navigation
main
본문의 핵심. 주요 콘텐츠를 묶음
div보다 의미를 줌. sectiong 요소는 아니다! h 필수 아님
그러나 하나의 html 문서에는 단 하나의 main만 사용하기.
secion, article, aside 안에 main이 오는 것이 아니라 main이 sectiong들을 감싸는 태그.
3. section
그냥 논리적 연관, 완결성이 있는 집합체를 section으로 묶어줌
div보다 뉘앙스를 살리는 section을 사용해서 semantic하게 mark-up 하기
4. article
뉴스 기사, 블로그처럼 안에 들어있는 컨텐츠가 그 자체로 완결성이 있는 경우 section보다는 article을 사용
5. aside
논리적 완결성은 있지만, 본문 내용과는 독립적인 내용. 직접적 연관이 없는 내용을 mark up할때는 section대신 aside (위젯, 배너광고 등에 사용)
