From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- .../web/html/element/heading_elements/index.html | 242 +++++++++++++++++++++ 1 file changed, 242 insertions(+) create mode 100644 files/ko/web/html/element/heading_elements/index.html (limited to 'files/ko/web/html/element/heading_elements') diff --git a/files/ko/web/html/element/heading_elements/index.html b/files/ko/web/html/element/heading_elements/index.html new file mode 100644 index 0000000000..87e972e996 --- /dev/null +++ b/files/ko/web/html/element/heading_elements/index.html @@ -0,0 +1,242 @@ +--- +title: '

–

: HTML 구획 제목 요소' +slug: Web/HTML/Element/Heading_Elements +tags: + - Element + - HTML + - HTML sections + - Reference + - Web +translation_of: Web/HTML/Element/Heading_Elements +--- +
{{HTMLRef}}
+ +

HTML <h1>–<h6> 요소는 6단계의 구획 제목을 나타냅니다. 구획 단계는 <h1>이 가장 높고 <h6>은 가장 낮습니다.

+ +
{{EmbedInteractiveExample("pages/tabbed/h1-h6.html", "tabbed-standard")}}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
콘텐츠 카테고리플로우 콘텐츠, 제목 콘텐츠, 뚜렷한 콘텐츠.
가능한 콘텐츠구문 콘텐츠.
태그 생략{{no_tag_omission}}
가능한 부모 요소플로우 콘텐츠를 허용하는 모든 요소. {{HTMLElement("hgroup")}} 요소의 자식으로 사용하지 마세요. 더 이상 쓰이지 않는 요소입니다.
가능한 ARIA 역할{{ARIARole("tab")}}, {{ARIARole("presentation")}}
DOM 인터페이스{{domxref("HTMLHeadingElement")}}
+ +

특성

+ +

<h1>-<h6> 요소는 전역 특성만 포함합니다.

+ +

사용 일람

+ + + +

예제

+ +

모든 제목 단계

+ +

다음 코드는 모든 단계의 제목을 보입니다.

+ +
<h1>Heading level 1</h1>
+<h2>Heading level 2</h2>
+<h3>Heading level 3</h3>
+<h4>Heading level 4</h4>
+<h5>Heading level 5</h5>
+<h6>Heading level 6</h6>
+
+ +

{{ EmbedLiveSample('모든_제목_단계', '280', '300', '') }}

+ +

예제 페이지

+ +

다음 코드는 약간의 제목과 내용을 보여줍니다.

+ +
<h1>Heading elements</h1>
+<h2>Summary</h2>
+<p>Some text here...</p>
+
+<h2>Examples</h2>
+<h3>Example 1</h3>
+<p>Some text here...</p>
+
+<h3>Example 2</h3>
+<p>Some text here...</p>
+
+<h2>See also</h2>
+<p>Some text here...</p>
+
+ +

{{ EmbedLiveSample('예제_페이지', '280', '480', '') }}

+ +

접근성 고려사항

+ +

탐색

+ +

스크린 리더 사용자가 흔히 사용하는 탐색 기법은 제목에서 제목으로 뛰어넘으며 페이지 콘텐츠를 빠르게 파악하는 것입니다. 따라서 제목 단계를 뛰어넘으면 중간에 빠진 제목이 어디 있는 건지 모르므로 사용자의 혼란을 야기할 수 있습니다.

+ +

하지 말것

+ +
<h1>Heading level 1</h1>
+<h3>Heading level 3</h3>
+<h4>Heading level 4</h4>
+
+ +

할것

+ +
<h1>Heading level 1</h1>
+<h2>Heading level 2</h2>
+<h3>Heading level 3</h3>
+
+ +

중첩

+ +

하위 구획으로 제목을 중첩해 콘텐츠의 구조를 나타낼 수 있습니다. 대부분의 스크린 리더는 페이지의 제목을 정렬한 목록도 생성해 제공하므로, 사용자가 빠르게 콘텐츠 구조를 파악할 수 있도록 도와줍니다.

+ +
    +
  1. h1 Beetles + +
      +
    1. h2 Etymology
      2. +
    2. h2 Distribution and Diversity
      3. +
    3. h2 Evolution +
        +
      1. h3 Late Paleozoic
        2. +
      2. h3 Jurassic
        3. +
      3. h3 Cretaceous
        4. +
      4. h3 Cenozoic
        5. +
      +
      4. +
    4. h2 External Morphology +
        +
      1. h3 Head +
          +
        1. h4 Mouthparts
          2. +
        +
        2. +
      2. h3 Thorax +
          +
        1. h4 Prothorax
          2. +
        2. h4 Pterothorax
          3. +
        +
        3. +
      3. h3 Legs
        4. +
      4. h3 Wings
        5. +
      5. h3 Abdomen
        6. +
      +
      5. +
    +
    2. +
+ +

중첩 제목에서, 하위 구획을 닫을 땐 제목 단계를 위로 "건너뛸" 수 있습니다.

+ + + +

구획 콘텐츠 레이블

+ +

스크린 리더 사용자가 자주 사용하는 다른 기술은 콘텐츠 구획의 목록을 생성한 후, 이를 통해 페이지 레이아웃을 파악하는 것입니다.

+ +

콘텐츠 구획에는 aria-labelledby와 {{htmlattrxref("id")}} 특성을 함께 사용해 이름, 즉 레이블을 붙일 수 있습니다. 레이블은 현재 구획의 목적을 간결하게 설명해야 합니다. 레이블 기법은 한 페이지에 다수의 구획이 있을 때 유용하게 사용할 수 있습니다.

+ +

예제

+ +
<header>
+  <nav aria-labelledby="primary-navigation">
+    <h2 id="primary-navigation">주 탐색창</h2>
+    <!-- navigation items -->
+  </nav>
+</header>
+
+<!-- page content -->
+
+<footer>
+  <nav aria-labelledby="footer-navigation">
+    <h2 id="footer-navigation">하단 탐색창</h2>
+    <!-- navigation items -->
+  </nav>
+</footer>
+
+ +

위의 예제에서 스크린 리더는 두 개의 {{HTMLElement("nav")}} 구획이 있으며, 하나는 "주 탐색창", 다른 하나는 "하단 탐색창"이라고 불린다는 사실을 표현합니다. 레이블을 지정하지 않았다면, 사용자가 각 <nav> 요소의 콘텐츠를 일일히 분석해 목적을 알아내야 했을 것입니다.

+ + + +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
명세상태주석
{{SpecName('HTML WHATWG', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'sections.html#the-h1-h2-h3-h4-h5-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML4.01', 'struct/global.html#h-7.5.5', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}{{Spec2('HTML4.01')}}
+ +

브라우저 호환성

+ +

{{Compat("html.elements.h1")}}

+ +

같이 보기

+ + -- cgit v1.2.3-54-g00ecf