files/ko/web/html/element/center/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

---
title: <center>
slug: Web/HTML/Element/center
translation_of: Web/HTML/Element/center
---
<div>{{deprecated_header()}}</div>

<h2 id="개요">개요</h2>

<p>이 HTML Center (<code>&lt;center&gt;</code>)요소는 또다른 블록요소을 포함하거나, 인라인요소(Inline)를 포함할 수 있는 <a href="/en-US/docs/HTML/Block-level_elements">블록속성(block-level)</a> 의 요소이다. 그리고 해당 &lt;center&gt; 요소안에 포함된 전체요소는  &lt;center&gt;의 내용안에 가운데 정렬이 된다. (통상적으로 {{HTMLElement("body")}}로 쓰임).</p>

<p>이 태그는 HTML4(또는 XHTML 1)이후에는 잘사용되지 않고, CSS의 {{Cssxref("text-align")}} 속성이 즐겨 사용된다.  {{HTMLElement("div")}} 요소나 {{HTMLElement("p")}}요소 같은 블록속성이  있는 요소에 사용될 수 있다.또 다른 방법으로는 CSS속성을 사용하여 {{Cssxref("margin-left")}} 또는 {{Cssxref("margin-right")}} 또는 margin을 자동(Css("margin") 를 <code>0 auto)</code>으로 설정한다.</p>

<h2 id="DOM_인터페이스">DOM 인터페이스</h2>

<p>이 요소는 {{domxref("HTMLElement")}} 인터페이스를 구현합니다.</p>

<div class="note">
<p><strong>Implementation note:</strong> up to Gecko 1.9.2 inclusive, Firefox implements the {{domxref("HTMLSpanElement")}} interface for this element.</p>
</div>

<h2 id="Example_1" name="Example_1">예제 1</h2>

<pre class="brush: html">&lt;center&gt;This text will be centered.
&lt;p&gt;So will this paragraph.&lt;/p&gt;&lt;/center&gt;
</pre>

<h2 id="Example_2" name="Example_2">예제 2 (CSS 대안)</h2>

<pre class="brush: html">&lt;div style="text-align:center"&gt;This text will be centered.
&lt;p&gt;So will this paragraph.&lt;/p&gt;&lt;/div&gt;
</pre>

<h2 id="Example_3" name="Example_3">예제 3 (CSS 대안)</h2>

<pre class="brush: html">&lt;p style="text-align:center"&gt;This line will be centered.&lt;br&gt;
And so will this line.&lt;/p&gt;
</pre>

<h2 id="Notes" name="Notes">메모</h2>

<p>Applying {{Cssxref("text-align")}}<code>:center</code> to a<code> </code>{{HTMLElement("div")}} or {{HTMLElement("p")}} element centers the <em>contents</em> of those elements while leaving their overall dimensions unchanged.</p>

<h2 id="더_보기">더 보기</h2>

<ul>
 <li>{{Cssxref("text-align")}}</li>
 <li>{{Cssxref("display")}}</li>
</ul>

<div>{{HTMLRef}}</div>