From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/html/element/dl/index.html | 223 ++++++++++++++++++++++++++++++++ 1 file changed, 223 insertions(+) create mode 100644 files/ko/web/html/element/dl/index.html (limited to 'files/ko/web/html/element/dl') diff --git a/files/ko/web/html/element/dl/index.html b/files/ko/web/html/element/dl/index.html new file mode 100644 index 0000000000..13739239ed --- /dev/null +++ b/files/ko/web/html/element/dl/index.html @@ -0,0 +1,223 @@ +--- +title:
+slug: Web/HTML/Element/dl +tags: + - Element + - HTML + - HTML grouping content + - 'HTML:Flow content' + - 'HTML:Palpable Content' + - Reference + - Web +translation_of: Web/HTML/Element/dl +--- +
{{HTMLRef}}
+ +

HTML <dl> 요소는 설명 목록을 나타냅니다. <dl>은 {{htmlelement("dt")}}로 표기한 용어와 {{htmlelement("dd")}} 요소로 표기한 설명 그룹의 목록을 감싸서 설명 목록을 생성합니다. 주로 용어사전 구현이나 메타데이터(키-값 쌍 목록)를 표시할 때 사용합니다.

+ +
{{EmbedInteractiveExample("pages/tabbed/dl.html", "tabbed-standard")}}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
콘텐츠 카테고리플로우 콘텐츠. <dl>의 자식 중 이름-값 그룹이 있으면 뚜렷한 콘텐츠.
가능한 콘텐츠 +

하나 이상의 {{htmlelement("dt")}} 요소와 하나 이상의 {{htmlelement("dd")}} 요소로 구성한 그룹 0개 이상. 선택적으로 {{htmlelement("script")}}와 {{htmlelement("template")}}을 혼합 가능.
+ 또는, 하나 이상의 {{htmlelement("div")}}. 선택적으로 {{htmlelement("script")}}, {{htmlelement("template")}} 혼합 가능.

+
태그 생략{{no_tag_omission}}
가능한 부모 요소플로우 콘텐츠를 허용하는 모든 요소.
가능한 ARIA 역할{{ARIARole("group")}}, {{ARIARole("presentation")}}
DOM 인터페이스{{domxref("HTMLDListElement")}}
+ +

특성

+ +

이 요소는 전역 특성을 포함합니다.

+ +

예제

+ +

하나의 용어와 하나의 정의

+ +
<dl>
+  <dt>Firefox</dt>
+  <dd>
+    Mozilla 재단과 수 백명의
+    자원봉사자가 개발한 무료
+    오픈소스 크로스 플랫폼
+    그래픽 웹 브라우저.
+  </dd>
+
+  <!-- 다른 용어 및 정의 -->
+</dl>
+
+ +

{{EmbedLiveSample("하나의_용어와_하나의_정의")}}

+ +

여러 개의 용어와 하나의 정의

+ +
<dl>
+  <dt>Firefox</dt>
+  <dt>Mozilla Firefox</dt>
+  <dt>Fx</dt>
+  <dd>
+    Mozilla 재단과 수 백명의
+    자원봉사자가 개발한 무료
+    오픈소스 크로스 플랫폼
+    그래픽 웹 브라우저.
+  </dd>
+
+  <!-- 다른 용어 및 정의 -->
+</dl>
+
+ +

{{EmbedLiveSample("여러_개의_용어와_하나의_정의")}}

+ +

하나의 용어와 여러 개의 정의

+ +
<dl>
+  <dt>Firefox</dt>
+  <dd>
+    Mozilla 재단과 수 백명의
+    자원봉사자가 개발한 무료
+    오픈소스 크로스 플랫폼
+    그래픽 웹 브라우저.
+  </dd>
+  <dd>
+    붉은 판다, 레서 판다, 랫서 판다,
+    혹은 "Firefox"는 초식성 포유류이다.
+    몸 길이는 애완용 고양이보다 약간
+    큰 정도인 60cm다.
+  </dd>
+
+  <!-- 다른 용어 및 정의 -->
+</dl>
+
+ +

{{EmbedLiveSample("하나의_용어와_여러_개의_정의")}}

+ +

여러 개의 용어와 여러 개의 정의

+ +

위의 예제를 결합하여 여러 용어를 여러 정의와 연결하는 것도 가능합니다.

+ +

메타데이터

+ +

<dl>은 메타데이터를 키-값 쌍으로 표시할 때도 유용합니다.

+ +
<dl>
+  <dt>Name</dt>
+  <dd>Godzilla</dd>
+  <dt>Born</dt>
+  <dd>1952</dd>
+  <dt>Birthplace</dt>
+  <dd>Japan</dd>
+  <dt>Color</dt>
+  <dd>Green</dd>
+</dl>
+
+ +

팁: 아래처럼 키-값 구분자를 CSS로 지정하면 편리합니다.

+ +
dt:after {
+  content: ": ";
+}
+ +

{{EmbedLiveSample("메타데이터")}}

+ +

이름-값 그룹을 {{htmlelement("div")}}로 감싸기

+ +

{{glossary("WHATWG")}} HTML에서는 <dl> 안 각각의 이름-값 그룹을 {{htmlelement("div")}}로 감쌀 수 있습니다. 마이크로데이터를 사용할 때, 그룹에 전역 특성을 적용할 때, 아니면 스타일을 적용할 때 유용할 수 있습니다.

+ +
<dl>
+  <div>
+    <dt>Name</dt>
+    <dd>Godzilla</dd>
+  </div>
+  <div>
+    <dt>Born</dt>
+    <dd>1952</dd>
+  </div>
+  <div>
+    <dt>Birthplace</dt>
+    <dd>Japan</dd>
+  </div>
+  <div>
+    <dt>Color</dt>
+    <dd>Green</dd>
+  </div>
+</dl>
+
+ +

참고

+ +

페이지에서 들여쓰기를 하기 위한 목적으로 <dl> (또는 {{htmlelement("ul")}}) 요소를 사용하지 마세요. 작동할 수는 있으나 좋지 않은 방법이고, 설명 목록의 원래 목적을 흐립니다.

+ +

용어의 들여쓰기를 수정하려면 CSS {{cssxref("margin")}} 속성을 사용하세요.

+ +

접근성 고려사항

+ +

각각의 스크린 리더는 <dl>을 다르게 표현합니다. iOS의 VoiceOver 등 일부 스크린 리더는 <dl>의 콘텐츠를 리스트로 표현하지 않습니다. 따라서, 각 아이템의 콘텐츠는 리스트 그룹 내 다른 항목과의 관계를 표현할 수 있는 방식으로 작성해야 합니다.

+ + + +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
명세상태주석
{{SpecName('HTML WHATWG', 'grouping-content.html#the-dl-element', '<dl>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'grouping-content.html#the-dl-element', '<dl>')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dl>')}}{{Spec2('HTML4.01')}}Initial definition
+ +

브라우저 호환성

+ +

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

+ +

같이 보기

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