본문 바로가기
Reference/HTML

section 태그는 주제별 그룹의 콘텐츠 섹션을 설정합니다.

by @webstoryboy 2022. 11. 15.

section 태그는 주제별 그룹의 콘텐츠 섹션을 설정합니다.

Reference/HTML

section 태그는 주제별 그룹의 콘텐츠 섹션을 설정합니다.

by @webs 2022. 11. 14.

<section>

<section> 태그는 주제별 그룹의 콘텐츠 섹션을 설정합니다. 주제별로 제목 요소를 사용하는 것이 좋으며, 문서의 스타일링 요소나, 그룹화 요소가 아닙니다. 스타일 지정 목적이나 그룹화가 필요하다면 <div> 태그를 사용합니다. 주요 콘텐츠와 단독으로 콘텐츠를 표현하고 싶다면, <article>, <aside>, <nav> 요소를 사용하는 것이 적절합니다.


특징 설명
요소 블록 요소(Block Element)
닫는 태그 적용
버전 HTML5
시각적 표현 없음
사용성 ★★★★☆

정의(Definition)

  • <section> 태그는 주제별 그룹의 콘텐츠 섹션을 설정합니다.
  • <section> 태그는 식별할 수단이 필요하기 때문에 제목을(<h1> ~ <h6>)을 설정하는 것을 추천합니다.
  • <section> 태그는 문장이나 문서의 스타일링 요소가 아니기 때문에, 디자인 및 영역 설정을 위함이라면, <div> 요소가 더 적절합니다.
  • <section> 태그는 일반적인 영역의 주제가 아니라, 구체적인 주제의 요소라면 <article>, <aside>, <nav> 요소를 사용하는 것이 더 적절합니다.
  • 콘텐츠를 외부와 구분하여 단독으로 표현하고 싶다면, <article> 요소가 더 좋을 수 있습니다.

섹션과 관련된 태그(Section Related Tag)

  • <main> 태그는 문서의 주요 콘텐츠 영역을 설정합니다.
  • <section> 태그는 주제별 그룹의 콘텐츠 섹션을 설정합니다.
  • <article> 태그는 문서의 독립적인 컨텐츠 섹션을 설정합니다.
  • <aside> 태그는 주요 콘텐츠의 보조적 컨텐츠 섹션을 설정합니다.
  • <header> 태그는 문서의 소개 및 메뉴 그룹 컨텐츠 섹션을 설정합니다.
  • <nav> 태그는 문서에 대한 메뉴 링크를 제공하는 섹션을 설정합니다.
  • <footer> 태그는 문서 관련 정보 및 관련 링크 콘텐츠 섹션을 설정합니다.
  • <address> 태그는 문서 관련 연락처 콘텐츠 섹션을 설정합니다.
  • <h1>~<h6> 태그는 각 섹션의 제목을 설정합니다.

문서와 관련된 태그(Document Related Tag)

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

속성(Property)

속성 값(예) 설명 버전
글로벌 속성 accesskey accesskey = "a" 키보드 단축키 힌트를 제공합니다. -
autocapitalize autocapitalize = "off" 텍스트를 자동으로 대문자로 변환할지 여부를 설정합니다. -
autofocus autofocus 문서가 로딩되면 해당 요소에 포커서를 설정합니다. -
contenteditable contenteditable = "true" 사용자가 콘텐츠를 편집할 수 있는지 설정합니다. -
class class = "className" 클래스 이름을 설정합니다. -
data-* data-name = "name" 사용자가 지정하여 속성을 설정할 수 있습니다. -
dir dir = "rtl" 요소 글씨의 방향을 설정합니다. -
draggable draggable = "true" 드래그 사용할 수 있는지 설정합니다. -
enterkeyhint enterkeyhint = "next" 엔터 키에 대한 힌트를 설정합니다. -
hidden hidden 요소를 숨김 처리할 수 있습니다. hidden 요소는 렌더링하지 않습니다. -
id id = "name" 고유 식별자 아이디를 설정합니다. CSS나 Script에서 사용합니다. -
inputmode inputmode = "email" 브라우저가 제공해야 하는 가상 키보드 설정을 알려줍니다 -
itemid itemid = "name" 아이템 요소의 고유 식별자 아이디를 설정합니다. -
itemprop itemprop = "name" 아이템 요소의 고유 식별자 속성을 설정합니다. -
itemref itemref = "name" 아이템 요소의 고유 식별자를 연결합니다. -
itemscope itemscope 아이템 요소의 범위를 설정합니다. -
lang lang = "ko" 요소의 언어를 설정합니다. -
spellcheck spellcheck = "true" 요소의 맞춤법 검사 여부를 설정합니다. -
style style = "margin: 0" 요소의 적용할 CSS 속성을 설정합니다. -
tabindex tabindex = "0" 요소의 탭 인덱스를 설정합니다. -
title title = "titleName" 요소의 타이틀을 설정합니다. -
translate translate = "no" 요소의 번역 여부를 설정합니다. -

예제1(Sample)

기본 레이아웃 예제입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reference</title>
</head>
<body>
    <header>헤더 영역</header>
    <main>
        <section>컨텐츠 영역</section>
        <aside>사이드 컨텐츠</aside>
    </main>
    <footer>푸터 영역</footer>
</body>
</html>

예제2(Sample)

섹션 레이아웃 예제입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>섹션 레이아웃</title>
</head>
<body>
    <header>
        <h1>헤더 영역</h1>
    </header>
    <main>
        <section>
            <h2>주제별 영역</h2>
            <p>내용</p>
            <article>
                <h3>독립된 주제 영역</h3>
                <p>내용</p>
            </article>
        </section>
        <aside>
            <h3>사이드 영역</h3>
            <p>내용</p>
        </aside>
    </main>
    <footer>푸터 영역</footer>
</body>
</html>

호환성(Compatibility)

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
<section>

참고(Reference)


댓글