07. HTML 레이아웃(Layout) & 시맨틱(Semantic)

- <div> </div> : 콘텐츠를 묶어 시각적 효과(CSS)를 적용할 때 중요하게 사용됨

- HTML구조를 만들때 <head> </head>, <body> </body> 태그 외에 시맨틱(Semantic) 태그 사용 권장

- 시맨틱(Semantic) : '의미가 통하는'이라는 뜻, 태그만 보고도 페이지 구조를 쉽게 파악할 수 있도록 함

- 웹사이트 주요 구조 : 헤더(header), 본문(contents), 사이드바(sidebar), 푸터(footer) 등

- 시맨틱 태그는 일반 태그와 달리 HTML구조에 의미를 부여할 뿐 실제 출력에 영향을 주진 않는다

① <header></header> : 머리말 영역 지정, 주로 페이지의 맨 위쪽이나 왼쪽에 삽입

② <nav> </nav> : 네이게이션 역할, 동일한 사이트 안의 문서나 다른 사이트의 문서로 연결하는 링크모음

③ <section> </section> : 주제별 콘텐츠 영역, 콘텐츠를 주제별로 묶을 때 사용

④ <article> </article> : 내용이 있는 콘텐츠

⑤ <aside> </aside> : 헤더, 메인, 푸터 등 본문 이외의 내용 지정할 때

08. HTML 메타(meta) 요소 (0)	2022.04.02
06. HTML 블록(Block)요소와 인라인(Inline)요소 (0)	2022.03.26
05. HTML 폼(Form) 관련 태그들 (0)	2022.03.25
04. HTML 표 작성 태그 (0)	2022.03.25
03. HTML 이미지, 미디어, 링크, 프레임 삽입 관련 태그들 (0)	2022.03.23

빈이의 개발개발