day03[시맨틱 태그, 클론코딩]

의미가 있는 >> 시맨틱 >> 시맨틱 태그(header, main, footer)
남발하면 좋지 않음.
구글에서 만듦.

 

시맨틱 태그
시맨틱 : "의미가 있는"
HTML5에 도입된 시맨틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공한다.

▶ 태그의 종류
<div> : non-semantic태그, 안에 들어갈 의미를 크게 유추하기 힘들다.
<header>, <footer> : semantic태그, 특정 형태의 글이 포함될 것이라는 유추가 가능하다.

-header : 상단, 헤더를 의미
-nav : 메뉴, 네비게이션을 의미
-main : 내용의 중심을 의미
-aside : 사이드에 위치하는 공간을 의미(어디에 위치해도 이상하지 않음)
-section : 여러 중심 내용을 감싸는 공간을 의미(어디에 위치해도 이상하지 않음)
-article : 글자가 많이 들어간 부분을 의미(어디에 위치해도 이상하지 않음)
-footer : 하단, 푸터를 의미

▷ <header> 태그
1. 머리말 지정
2. 사이트 전체의 헤더는 주로 페이지 맨 위쪽이나 왼쪽에 삽입하며,
헤더의 내용으로는 주로 <form>태그를 사용해 검색 착을 넣거나
<nav>태그를 연동하여 사이트 메뉴를 넣는다.

▷ <nav> 태그
1. 문서를 연결하는 네비게이션 링크
2. 네비게이션 역할을 하는 <nav>태그는 동일한 사이트 안의 문서나
다른 사이트의 문서로 연결하는 링크 모음을 나타낸다.
3. <nav>태그는 네비게이션 메뉴 뿐 아니라 <header>, <footer>태그
안에 있는 링크 부분에도 많이 사용된다.

▷ <section> 태그
1. 주제별 컨텐츠 영역 나타내기
2. <section>태그는 문맥 흐름 중에서 컨텐츠를 주제로 묶을 때 사용하며
그 안에는 섹션 제목을 나타내는 <h1> ~ <h6> 제목 태그가 함께 사용된다.

▷ <aside> 태그
1. 본문 이외의 내용 표시
2. 블로그에서 왼쪽이나 오른쪽 하단에 사이드 바가 표시된 형태이다.
3. 필수 요소가 아니므로 광고나 링크 모음 등 문서의 메인 내용에 영향을 
미치지 않는 내용을 넣을 때 사용한다.

▷ <footer> 태그
1. 제작 정보와 저작권 정보 표시
2. 웹 문서 끝자락에 들어가는 태그
3. <footer> 태그 안에는 <section>, <article> 등 다른 레이아웃 태그들을
모두 사용할 수 있으며, 이런 태그를 이용해서 <footer> 안에 다양한 정보를 넣는다.

★ 검색 엔진과 시맨틱 태그와의 관련성
검색 엔진 최적화에서 시맨틱 태그는 매우 중요한 요소이다.
그렇기 때문에 검색 결과에 많은 노출을 시키고 싶다면 시맨틱 태그를 필수로
사용하는 것이 좋다.

 

---

클론 코딩 : 쇼핑몰 페이지 

shopping.css

shopping.html

모든 스타일은 css파일로, 외부스타일시트 사용