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

HTML <abbr> 요소는 준말 또는 머리글자를 나타냅니다. 선택 속성인 {{htmlattrxref("title")}}을 사용하면 준말의 전체 뜻이나 설명을 제공할 수 있습니다. title 속성은 전체 설명만을 가져야 하며 다른건 포함할 수 없습니다.

+ +
{{EmbedInteractiveExample("pages/tabbed/abbr.html", "tabbed-shorter")}}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
콘텐츠 카테고리플로우 콘텐츠, 구문 콘텐츠, 뚜렷한 콘텐츠.
가능한 콘텐츠구문 콘텐츠
태그 생략{{no_tag_omission}}
가능한 부모 요소구문 콘텐츠를 허용하는 모든 요소.
암시적 ARIA 역할대응하는 역할 없음
가능한 ARIA 역할모두
DOM 인터페이스{{domxref("HTMLElement")}}
+ +

특성

+ +

이 요소는 전역 특성만 포함합니다. 단, 다른 요소와 달리 <abbr> 요소에서의 {{htmlattrxref("title")}} 특성은 특정한 의미를 가지며, title은 준말에 대한 설명 혹은 확장 형태를 사람이 읽을 수 있는 형태를 값으로 가져야 합니다. 브라우저는 title의 값을 보통 마우스 커서를 올렸을 때 나타나는 툴팁으로 보여줍니다.

+ +

각각의 <abbr> 요소는 서로 독립적입니다. 하나의 요소에 title을 제공한다고 나머지에 지정하지 않아도 되는 것은 아닙니다.

+ +

사용 일람

+ +

많이 쓰이는 곳

+ +

당연히 모든 준말을 <abbr>로 표시해야 하는 것은 아닙니다. 그러나 표시할 경우 도움이 될, 다음과 같은 경우가 있습니다.

+ + + +

문법 고려사항

+ +

수량이 문법에 영향을 미치는 언어(one apple vs. two apples)의 경우, <abbr> 요소의 텍스트와 title 특성의 내용이 같은 형태를 따르도록 하세요. 아랍어처럼 두 개 이상의 복수형 구분을 두는 언어에서 특히 중요하나, 영어도 해당합니다.

+ +

기본 스타일

+ +

<abbr>의 목적은 오로지 HTML 작성자의 편리함을 위함이며, 모든 브라우저는 기본적으로 인라인({{cssxref('display')}}: inline)으로 렌더링 합니다. 그러나 기본 스타일은 브라우저마다 다를 수 있습니다.

+ + + +

예제

+ +

준말임을 나타내기

+ +

설명 없이, 단순히 특정 단어가 준말임을 나타내기만 하고자 하면 <abbr>을 다른 특성 없이 사용하세요.

+ +

HTML

+ +
<p>Using <abbr>HTML</abbr> is fun and easy!</p>
+ +

결과

+ +

{{EmbedLiveSample("준말임을_나타내기")}}

+ +

준말 스타일링

+ +

CSS를 사용해 준말에 적용할 사용자 지정 스타일을 적용할 수 있습니다.

+ +

HTML

+ +
<p>Using <abbr>CSS</abbr>, you can style your abbreviations!</p>
+ +

CSS

+ +
abbr {
+  font-variant: all-small-caps;
+}
+ +

결과

+ +

{{EmbedLiveSample("준말_스타일링")}}

+ +

펼친 형태 보여주기

+ +

{{htmlattrxref("title")}} 특성을 사용하면 준말과 머리글자를 펼친 원래 형태를 보여줄 수 있습니다.

+ +

HTML

+ +
<p>Ashok's joke made me <abbr title="Laugh Out Loud">LOL</abbr> big
+time.</p>
+ +

결과

+ +

{{EmbedLiveSample("펼친_형태_보여주기")}}

+ +

준말 정의하기

+ +

<abbr>과 {{HTMLElement("dfn")}}을 사용하면 준말을 정식으로 정의할 수 있습니다.

+ +

HTML

+ +
<p><dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr>
+</dfn> is a markup language used to create the semantics and structure
+of a web page.</p>
+
+<p>A <dfn id="spec">Specification</dfn>
+(<abbr title="Specification">spec</abbr>) is a document that outlines
+in detail how a technology or API is intended to function and how it is
+accessed.</p>
+ +

결과

+ +

{{EmbedLiveSample("준말_정의하기", 600, 120)}}

+ +

접근성 고려사항

+ +

준말과 머리글자가 처음 사용될 때, 그 뜻을 풀어 설명하면 독자가 문서를 이해하기 쉬워집니다. 특히 콘텐츠가 기술이나 산업에 관련된 전문적인 내용인 경우 더욱 그렇습니다.

+ +

예제

+ +
<p>JavaScript Object Notation(<abbr>JSON</abbr>)은 경량의 데이터 교환 형식입니다.</p>
+
+ +

무엇보다 용어나 개념에 익숙하지 않은 사람, 언어를 새로 접한 사람, 그리고 인지력 문제를 겪고 있는 사용자에게 큰 도움이 됩니다.

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'semantics.html#the-abbr-element', '<abbr>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-abbr-element', '<abbr>')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '<abbr>')}}{{Spec2('HTML4.01')}}
+ +

브라우저 호환성

+ + + +

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

-- cgit v1.2.3-54-g00ecf