files/ko/web/html/global_attributes/title/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125

---
title: title
slug: Web/HTML/Global_attributes/title
tags:
  - Global attributes
  - HTML
  - Reference
translation_of: Web/HTML/Global_attributes/title
---
<div>{{HTMLSidebar("Global_attributes")}}</div>

<p><span class="seoSummary"><code><strong>title</strong></code> <a href="/en-US/docs/Web/HTML/Global_attributes">전역 특성</a>은 요소와 관련된 추가 정보를 제공하는 텍스트를 나타냅니다.</span></p>

<div>{{EmbedInteractiveExample("pages/tabbed/attribute-title.html","tabbed-shorter")}}</div>

<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</div>

<p>다음과 같은 경우 많이 쓰입니다.</p>

<ul>
 <li>보조 기술을 위해 {{HTMLElement("iframe")}} 요소에 이름 붙이기</li>
 <li>진짜 {{HTMLElement("label")}}을 표시하지 못할 때에 대비해 {{htmlelement("input")}} 요소에 프로그래밍을 통한 레이블 추가하기</li>
 <li>{{htmlelement("table")}} 요소 컨트롤에 레이블 추가하기</li>
</ul>

<p>{{HTMLElement("link")}}, {{HTMLElement("abbr")}}, {{HTMLElement("input")}}, {{HTMLElement("menuitem")}} 요소의 <code>title</code> 특성은 추가적인 뜻을 가지고 있습니다..</p>

<h2 id="여러_줄의_제목">여러 줄의 제목</h2>

<p><code>title</code> 특성은 여러 줄을 가질 수 있으며, 모든 <code>U+000A LINE FEED</code> (<code>LF</code>) 문자가 줄을 바꿉니다. 즉, 다음의 경우 툴팁이 두 줄로 나타나므로 주의를 요해야 합니다.</p>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;p&gt;&lt;code&gt;title&lt;/code&gt; 안에서 줄을 바꿀 땐 조심해야 합니다.
이 &lt;abbr title="This is a
multiline title"&gt;예제&lt;/abbr&gt;처럼요.&lt;/p&gt;</pre>

<h3 id="결과">결과</h3>

<div>{{EmbedLiveSample('여러_줄의_제목')}}</div>

<h2 id="특성_상속">특성 상속</h2>

<p>요소가 <code>title</code> 특성을 가지고 있지 않을 땐 부모 요소로부터 상속합니다. 부모 요소 또한 자신의 부모로부터 상속할 수 있습니다.</p>

<p><code>title</code>에 빈 문자열을 지정한 경우 조상의 <code>title</code>이 더 이상 관련되지 않았으며 해당 요소에 툴팁을 표시하지 말아야 함을 나타냅니다.</p>

<h3 id="HTML_2">HTML</h3>

<pre class="brush: html">&lt;div title="CoolTip"&gt;
  &lt;p&gt;여기 어디에 마우스를 올리면 “CoolTip”이 나타납니다.&lt;/p&gt;
  &lt;p title=""&gt;하지만 여기에서는 나타나지 않죠.&lt;/p&gt;
&lt;/div&gt;</pre>

<h3 id="결과_2">결과</h3>

<div>{{EmbedLiveSample('특성_상속')}}</div>

<h2 id="접근성_고려사항">접근성 고려사항</h2>

<p><code>title</code> 특성은 다음과 같은 경우에 문제가 많습니다.</p>

<ul>
 <li>터치 전용 장치 사용자</li>
 <li>키보드로 탐색하는 사용자</li>
 <li>스크린 리더, 화면 돋보기 등 보조 기술로 탐색하는 사용자</li>
 <li>섬세한 운동조절이 힘든 사용자</li>
 <li>인지력 문제를 가진 사용자</li>
</ul>

<p>일관적이지 못한 브라우저 지원 문제에 더불어, 브라우저가 렌더링 한 페이지를 보조 기술이 분석함으로써 문제가 심해집니다. 툴팁 효과가 필요한 경우, <a href="https://inclusive-components.design/tooltips-toggletips/">위에 해당하는 사용자도 접근하기 좋은 다른 기법</a>을 사용하는 것이 좋습니다.</p>

<ul>
 <li><a href="https://www.w3.org/TR/html/dom.html#the-title-attribute">3.2.5.1. The title attribute | W3C HTML 5.2: 3. Semantics, structure, and APIs of HTML documents</a></li>
 <li><a href="https://developer.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/">Using the HTML title attribute – updated | The Paciello Group</a></li>
 <li><a href="https://inclusive-components.design/tooltips-toggletips/">Tooltips &amp; Toggletips - Inclusive Components</a></li>
 <li><a href="https://www.24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute/">The Trials and Tribulations of the Title Attribute - 24 Accessibility</a></li>
</ul>

<h2 id="명세">명세</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', "dom.html#the-title-attribute", "title")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', "dom.html#the-title-attribute", "title")}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', "dom.html#the-title-attribute", "title")}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, it is now a true global attribute.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/global.html#adef-title', 'title')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td>Supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}.</td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>


<p>{{Compat("html.global_attributes.title")}}</p>

<h2 id="같이_보기">같이 보기</h2>

<ul>
 <li>All <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</li>
 <li>{{domxref("HTMLElement.title")}} that reflects this attribute.</li>
</ul>