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
|
---
title: '<em>: 강세 요소'
slug: Web/HTML/Element/em
tags:
- Element
- HTML
- HTML text-level semantics
- Reference
- Web
translation_of: Web/HTML/Element/em
---
<div>{{HTMLRef}}</div>
<p><strong>HTML <code><em></code> 요소</strong>는 텍스트의 강세를 나타냅니다. <code><em></code> 요소를 중첩하면 더 큰 강세를 뜻하게 됩니다.</p>
<div>{{EmbedInteractiveExample("pages/tabbed/em.html", "tabbed-shorter")}}</div>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
<td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td>
</tr>
<tr>
<th scope="row">가능한 콘텐츠</th>
<td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td>
</tr>
<tr>
<th scope="row">태그 생략</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">가능한 부모 요소</th>
<td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
</tr>
<tr>
<th scope="row">가능한 ARIA 역할</th>
<td>모두</td>
</tr>
<tr>
<th scope="row">DOM 인터페이스</th>
<td>{{domxref("HTMLElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="특성">특성</h2>
<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p>
<h2 id="사용_일람">사용 일람</h2>
<p><code><em></code> 요소는 주위 텍스트에 비해 강조된 부분을 나타냅니다. 보통 한 문장에서 단어 하나 혹은 몇 개로 제한되며, 문장의 의미에 영향을 미칠 수 있습니다.</p>
<p><code><em></code>은 주로 기울임꼴을 적용해 표현합니다. 그러나 단순히 기울임꼴이 필요해서 <code><em></code>을 사용하면 안됩니다. CSS {{cssxref("font-style")}} 속성을 사용하세요. 그 외에 흔히 기울임꼴을 많이 쓰는 경우를 정리하자면 저작물(책, 연극, 음악 등등)의 제목은 {{htmlelement("cite")}}, 학명 등 과학적인 이름이나 다른 언어의 단어 등, 주변과 다른 톤을 가진 텍스트에는 {{htmlelement("i")}}를 사용하세요. 주변보다 훨씬 중요한 텍스트는 {{htmlelement("strong")}}으로 강조하면 됩니다.</p>
<h3 id="<i>와_<em>"><code><i></code>와 <code><em></code></h3>
<p>신입 개발자가 자주 혼란스러운 부분 중 하나가, 서로 다른 요소인데 비슷한 결과물을 내놓는 경우입니다. <code><em></code>과 {{htmlelement("i")}}가 그 예로서, 둘 다 글자를 기울이는데 그러면 차이가 뭘까요? 어떤 걸 써야 할까요?</p>
<p>기본 설정에서 시각적 모습은 동일합니다. 그러나 의미는 다릅니다. <code><em></code>은 콘텐츠를 강조하지만, <code><i></code>는 외국어, 등장인물의 생각 등 일반적인 산문에서 벗어난 경우 사용합니다. (책이나 영화 등의 제목은 {{htmlelement("cite")}}를 사용하세요.)</p>
<p>그러므로 요소 선택은 상황에 따라 달라야 하며, 순수하게 꾸밈을 위한 요소는 없습니다. 스타일은 CSS에 맡기세요.</p>
<p><code><em></code>은 "Just <em>do</em> it already!"나 "We <em>had</em> to do something about it."처럼 쓸 수 있습니다. 이 글을 읽는 사람이나 소프트웨어는 기울임꼴 부분에 강세를 두고 말할 것입니다.</p>
<p><code><i></code>는 "The <em>Queen Mary</em> sailed last night."처럼 사용합니다. "Queen Mary"를 강조하는 것도 아니고, 중요한 단어도 아닙니다. 다만 이 단어가 Mary라는 이름의 여왕이 아니고, <em>Queen Mary</em>라는 이름의 선박임을 나타낼 뿐입니다. "The word <em>the</em> is an article"도 좋은 예제가 되겠습니다.</p>
<h2 id="예제">예제</h2>
<p><code><em></code> 요소는 명시적이거나 암시적인 대조를 표현할 때 주로 사용합니다.</p>
<pre class="brush: html"><p>
과거에 <em>block-level</em>이라 불렸던
콘텐츠는 HTML 5부터 <em>flow</em> 콘텐츠라고
말합니다.
</p></pre>
<h3 id="결과">결과</h3>
<p>{{EmbedLiveSample("예제")}}</p>
<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', 'text-level-semantics.html#the-em-element', '<em>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-em-element', '<em>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<em>')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("html.elements.em")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li>{{HTMLElement("i")}}</li>
</ul>
|
