diff options
Diffstat (limited to 'files/ko/web/html/element/em/index.html')
| -rw-r--r-- | files/ko/web/html/element/em/index.html | 124 |
1 files changed, 124 insertions, 0 deletions
diff --git a/files/ko/web/html/element/em/index.html b/files/ko/web/html/element/em/index.html new file mode 100644 index 0000000000..7043cf1ce8 --- /dev/null +++ b/files/ko/web/html/element/em/index.html @@ -0,0 +1,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> |