aboutsummaryrefslogtreecommitdiff
path: root/files/ko/web/html/element/strong/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/ko/web/html/element/strong/index.html')
-rw-r--r--files/ko/web/html/element/strong/index.html135
1 files changed, 135 insertions, 0 deletions
diff --git a/files/ko/web/html/element/strong/index.html b/files/ko/web/html/element/strong/index.html
new file mode 100644
index 0000000000..50bfe6f78c
--- /dev/null
+++ b/files/ko/web/html/element/strong/index.html
@@ -0,0 +1,135 @@
+---
+title: '<strong>: 높은 중요도 요소'
+slug: Web/HTML/Element/strong
+tags:
+ - Element
+ - HTML
+ - HTML text-level semantics
+ - 'HTML:Flow content'
+ - 'HTML:Palpable Content'
+ - 'HTML:Phrasing content'
+ - Reference
+ - Web
+translation_of: Web/HTML/Element/strong
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;strong&gt;</code> 요소</strong>는 중대하거나 긴급한 콘텐츠를 나타냅니다. 보통 브라우저는 굵은 글씨로 표시합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/strong.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> 또는 <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>The <code>&lt;strong&gt;</code> element is for content that is of "strong importance," including things of great seriousness or urgency (such as warnings). This could be a sentence that is of great importance to the whole page, or you could merely try to point out that some words are of greater importance compared to nearby content.</p>
+
+<p>Typically this element is rendered by default using a bold font weight. However, it should <em>not</em> be used simply to apply bold styling; use the CSS {{cssxref("font-weight")}} property for that purpose. Use the {{HTMLElement("b")}} element to draw attention to certain text without indicating a higher level of importance. Use the {{HTMLElement("em")}} element to mark text that has stress emphasis.</p>
+
+<p>Another accepted use for <code>&lt;strong&gt;</code> is to denote the labels of paragraphs which represent notes or warnings within the text of a page.</p>
+
+<h3 id="&lt;b>_vs._&lt;strong>"><code>&lt;b&gt;</code> vs. <code>&lt;strong&gt;</code></h3>
+
+<p>It is often confusing to new developers why there are so many ways to express the same thing on a rendered website. {{HTMLElement("b")}} and <code>&lt;strong&gt;</code> are perhaps one of the most common sources of confusion, causing developers to ask "Should I use <code>&lt;b&gt;</code> or <code>&lt;strong&gt;</code>? Don't they both do the same thing?"</p>
+
+<p>Not exactly. The <code>&lt;strong&gt;</code> element is for content that is of greater importance, while the <code>&lt;b&gt;</code> element is used to draw attention to text without indicating that it's more important.</p>
+
+<p>It may help to realize that both are valid and semantic elements in HTML5 and that it's a coincidence that they both have the same default styling (boldface) in most browsers (although some older browsers actually underline <code>&lt;strong&gt;</code>). Each element is meant to be used in certain types of scenarios, and if you want to bold text simply for decoration, you should instead actually use the CSS {{cssxref("font-weight")}} property.</p>
+
+<p>The intended meaning or purpose of the enclosed text should be what determines which element you use. Communicating meaning is what semantics are all about.</p>
+
+<h3 id="&lt;em>_vs._&lt;strong>"><code>&lt;em&gt;</code> vs. <code>&lt;strong&gt;</code></h3>
+
+<p>Adding to the confusion is the fact that while HTML 4 defined <code>&lt;strong&gt;</code> as simply indicating a stronger emphasis, HTML 5 defines <code>&lt;strong&gt;</code> as representing "strong importance for its contents." This is an important distinction to make.</p>
+
+<p>While <code>&lt;em&gt;</code> is used to change the meaning of a sentence as spoken emphasis does ("I <em>love</em> carrots" vs. "I love <em>carrots</em>"), <code>&lt;strong&gt;</code> is used to give portions of a sentence added importance (e.g., "<strong>Warning!</strong> This is <strong>very dangerous.</strong>") Both <code>&lt;strong&gt;</code> and <code>&lt;em&gt;</code> can be nested to increase the relative degree of importance or stress emphasis, respectively.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="기본_예제">기본 예제</h3>
+
+<pre class="brush: html">&lt;p&gt;Before proceeding, &lt;strong&gt;make sure you put on your safety goggles&lt;/strong&gt;.&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample("기본_예제", 650, 80)}}</p>
+
+<h3 id="경고_표시">경고 표시</h3>
+
+<pre class="brush: html">&lt;p&gt;&lt;strong&gt;Important:&lt;/strong&gt; Before proceeding, make sure you add plenty of butter.&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample("경고_표시", 650, 80)}}</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-strong-element', '&lt;strong&gt;')}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-strong-element', '&lt;strong&gt;')}}</td>
+ <td>{{Spec2('HTML5 W3C')}}</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML4.01', 'struct/text.html#edef-STRONG', '&lt;strong&gt;')}}</td>
+ <td>{{Spec2('HTML4.01')}}</td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("html.elements.strong")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{HTMLElement("b")}} 요소</li>
+ <li>{{HTMLElement("em")}} 요소</li>
+ <li>{{cssxref("font-weight")}} 속성</li>
+</ul>