지구정복

[HTML] HTML 기초5 본문

데이터 엔지니어링 정복/HTML-CSS-JavaScript-Spring-Node.js

[HTML] HTML 기초5

eeaarrtthh 2020. 10. 30. 09:35
728x90
반응형

목차

  • 시멘틱요소

 

 

 

ㅁ시멘틱 요소

웹페이지를 구성할 때 <div>태그만 사용하면 코드만 봤을 때 어떤 영역의 <div>태그인지 알기가 어렵다.

 

따라서 영역구분용 태그라고 생각하면 된다.

몇 가지만 정리해보자.

  • <header> : <header>는 <body>안에 있기 때문에 <head>태그와는 다른 태그이다. 주로 머리말, 제목을 표현한다.
  • <nav> : 콘텐츠를 담고 있는 문서를 사이트 간에 서로 연결하는 링크의 역할이다.
  • <section> : 바디 영역을 <header>, <section>, <footer> 3가지 공간에 콘텐츠를 저장한다. 그 중 섹션을 본문콘텐츠를 담고 있다. <section> 안에 또 다른 <section> 사용이 가능하다.
  • <articel> : 섹션이 콘텐츠를 분류한다면 <article>태그 안에는 실질적인 내용을 넣는다. 뉴스로 예를 들면 정치/연예/사회의 대분류는 section이고 정치 기사 내용과 연예 기사 내용들은 <article>에 넣는다.
  • <aside> : 사이드바라고 부른다. 본문 이외에 내용을 담고 있는 시맨틱 태그이다. 주로 본문옆에 광고를 달거나 링크들을 이 공간에 넣어 표현한다.
  • <footer> : 화면의 구조 중 가장 아래에 위치하고, 회사소개/ 저작권/약관/제작정보 등이 들어간다. 연락처는 <address>태그를 사용하여 표시한다.

 

728x90
반응형

'데이터 엔지니어링 정복 > HTML-CSS-JavaScript-Spring-Node.js' 카테고리의 다른 글

[JavaScript] 기초2  (0) 2020.11.02
[JavaScript] 기초1  (0) 2020.10.30
[CSS] 기초3  (0) 2020.10.29
[CSS] 기초2  (0) 2020.10.29
[CSS] 기초1  (0) 2020.10.29
Comments