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/figure/index.html | 175 ++++++++++++++++++++++++++++ 1 file changed, 175 insertions(+) create mode 100644 files/ko/web/html/element/figure/index.html (limited to 'files/ko/web/html/element/figure') diff --git a/files/ko/web/html/element/figure/index.html b/files/ko/web/html/element/figure/index.html new file mode 100644 index 0000000000..3630515211 --- /dev/null +++ b/files/ko/web/html/element/figure/index.html @@ -0,0 +1,175 @@ +--- +title:
+slug: Web/HTML/Element/figure +tags: + - Element + - HTML + - HTML grouping content + - Reference +translation_of: Web/HTML/Element/figure +--- +
{{HTMLRef}}
+ +

HTML <figure> 요소는 독립적인 콘텐츠를 표현합니다. {{htmlelement("figcaption")}} 요소를 사용해 설명을 붙일 수 있습니다. 피규어, 설명, 콘텐츠는 하나의 단위로 참조됩니다.

+ +
{{EmbedInteractiveExample("pages/tabbed/figure.html","tabbed-shorter")}}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
콘텐츠 카테고리플로우 콘텐츠, 구획 루트, 뚜렷한 콘텐츠.
가능한 콘텐츠 +

{{htmlelement("figcaption")}}과 뒤따르는 플로우 콘텐츠.
+ 혹은 플로우 콘텐츠를 뒤따르는 <figcaption>.
+ 혹은 플로우 콘텐츠.

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

특성

+ +

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

+ +

사용 일람

+ + + +

예제

+ +

이미지

+ +
<!-- Just an image -->
+<figure>
+  <img
+  src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
+  alt="A robotic monster over the letters MDN.">
+</figure>
+
+<!-- Image with a caption -->
+<figure>
+  <img
+  src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
+  alt="A robotic monster over the letters MDN.">
+  <figcaption>MDN Logo</figcaption>
+</figure>
+
+ +

{{EmbedLiveSample("이미지", "100%", 250)}}

+ +

코드 조각

+ +
<figure>
+  <figcaption><code>navigator</code>를 이용하여 브라우저 정보 얻기</figcaption>
+  <pre>
+function NavigatorExample() {
+  var txt;
+  txt = "Browser CodeName: " + navigator.appCodeName;
+  txt+= "Browser Name: " + navigator.appName;
+  txt+= "Browser Version: " + navigator.appVersion ;
+  txt+= "Cookies Enabled: " + navigator.cookieEnabled;
+  txt+= "Platform: " + navigator.platform;
+  txt+= "User-agent header: " + navigator.userAgent;
+}
+  </pre>
+</figure>
+
+ +

{{EmbedLiveSample("코드_조각", "100%", 250)}}

+ +

인용문

+ +
+
<figure>
+  <figcaption><cite>Edsger Dijkstra:</cite></figcaption>
+  <blockquote>If debugging is the process of removing software bugs,
+  then programming must be the process of putting them in.</blockquote>
+</figure>
+
+ +

{{EmbedLiveSample("인용문")}}

+
+ +

시

+ +
+
<figure>
+  <p style="white-space:pre">
+Bid me discourse, I will enchant thine ear,
+  Or like a fairy trip upon the green,
+Or, like a nymph, with long dishevell'd hair,
+  Dance on the sands, and yet no footing seen:
+Love is a spirit all compact of fire,
+  Not gross to sink, but light, and will aspire.</p>
+  <figcaption><cite>Venus and Adonis</cite>,
+    by William Shakespeare</figcaption>
+</figure>
+
+ +

{{EmbedLiveSample("시", "100%", 250)}}

+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'semantics.html#the-figure-element', '<figure>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.2', 'grouping-content.html#the-figure-element', '<figure>')}}{{Spec2('HTML5.2')}}No changes from HTML 5.0.
{{SpecName('HTML5 W3C', 'grouping-content.html#the-figure-element', '<figure>')}}{{Spec2('HTML5 W3C')}}
+ +

브라우저 호환성

+ +

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

+ +

같이 보기

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