My Melody Kawaii

HTML

section 태그와 문서태그 종류는 무엇이 있을까?

younajeong 2023. 2. 22. 12:23

“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”

- Frederick Philips Brooks
Mythical Man-Month 저자
728x90

section태그란

<section>태그는 주제별 그룹의 섹션 태그를 설정하고 문서의 독립적인 컨테츠 섹션을 설정합니다. 부문,구역,영역을 나타내는 기능을 가지고 있으며 문단이라던지 1장,2장,1절, 2절 등과 같이 이루어지는 글 등을 하나의 그룹 혹은 묶음으로 다루어즌 역할을 하고 있습니다.

이러한 섹션을 구체적으로 나타내는 요소로는 <section>, <nav>, <atilcle>, <aside>가 있습니다.

 

 

 

 

section 관련 태그

  • <main> 문서의 주요 콘테츠 영역을 설정합니다.
  • <section> 주제별 그룹의 콘테츠 섹션을 설정합니다. 
  • <article> 문서의 독립적인 컨테츠 섹션을 설정합니다. 블로그나 뉴스 기사내용 공지사항들을 나타낼 때 적절 합니다.
  • <aside> 주요 컨테츠의 보조적 컨테츠 섹션을 설정합니다. 예를 들어 사이드바 , 최근 글 목록, 인기 목록 등을 나타낼 때 적절합니다.
  • <header> 문서의 소개 및 메뉴 링크를 제공하는 섹션을 설정합니다.
  • <nav> 메뉴 링크를 제공하는 섹션을 설정합니다.
  • <footer> 문서 관련 정보 및 관련 링크 콘테르 섹션을 설정합니다.
  • <address> 문서 관련 연락처 콘테르 섹션을 설정합니다.
  • <h1~h6> 각 섹션의 제목을 설정합니다.

 

 

▶︎article vs section

그렇다면 메인안에 article과 section 각각 어떨때 넣어야 할까요?

 

먼저 article은 블로그 포스트에서 블로그 하나 기사 에서 기사하나를 묶어줄 때 사용 합니다. 자체만으로 독립된 페이지에 보여졌을 때 , 문제가 없을 때 사용합니다. main안에 내용들과 전혀 상관 없이 독립적인 정보를 나타낼 때 사용할 수 있습니다.

 

article

section은 article 안이나 main안에서 연관 있는 내용들을 묶어 줄 때, 사용할 수 있습니다. 그래서 한 페이지 안에 여러가지 내용을 보여주고 싶다면 한 section안에 여러가지 article을 넣어서 여러 내용들을 보여줄 수 있습니다.

section

 

 

문서 태그란

html 안에서 기본적인 문서 구조를 만들어 주는 태그입니다.

 

See the Pen Untitled by younajeong (@younajeong) on CodePen.

문서 관련 태그

  • <html> 태그는 문서의 최상단 요소를 나타냅니다.
  • <head> 태그는 문서 정보에 해당하는 내용을 설정합니다.
  • <body> 태그는 문서 본문에 해당하는 내용을 설정합니다.
  • <base> 태그는 문서의 기본 URL을 설정합니다.
  • <link> 태그는 문서의 외부 리소스를 설정합니다.
  • <meta> 태그는 문서의 메타 정보를 설정합니다.
  • <style> 태그는 문서의 스타일 정보를 설정합니다.
  • <title> 태그는 문서의 제목을 설정합니다.