files/ko/web/css/replaced_element/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

---
title: 대체 요소
slug: Web/CSS/Replaced_element
tags:
  - CSS
  - Guide
  - Layout
  - Reference
translation_of: Web/CSS/Replaced_element
---
<div>{{CSSRef}}</div>

<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a>의 <strong>대체 요소</strong>(replaced element)란 자신의 표현 결과가 CSS의 범위를 벗어나는 요소로서, CSS 서식 모델과는 분리된 외부 객체인 요소입니다.</span></p>

<p>간단히 말해서, 대체 요소는 자신의 콘텐츠가 현재 문서 스타일의 영향을 받지 않는 요소라고 할 수 있습니다. CSS는 대체 요소의 위치에 영향을 줄 수 있지만 콘텐츠에는 미치지 못합니다. {{htmlelement("iframe")}} 등 일부 대체 요소는 자신만의 스타일 시트를 가질 수도 있지만, 부모 문서의 스타일을 상속하지는 않습니다.</p>

<p>CSS가 대체 요소에 영향을 줄 수 있는 다른 유일한 방법은, 일련의 속성을 통해 요소 박스에서 콘텐츠의 위치를 제어하는 것입니다. {{anch("콘텐츠 박스 내부의 객체 위치 제어")}} 항목을 참고하세요.</p>

<h2 id="대체_요소">대체 요소</h2>

<p>전형적인 대체 요소는 다음과 같습니다.</p>

<ul>
 <li>{{HTMLElement("iframe")}}</li>
 <li>{{HTMLElement("video")}}</li>
 <li>{{HTMLElement("embed")}}</li>
 <li>{{HTMLElement("img")}}</li>
</ul>

<p>일부 요소는 특정한 경우에만 대체 요소로 취급합니다.</p>

<ul>
 <li>{{HTMLElement("option")}}</li>
 <li>{{HTMLElement("audio")}}</li>
 <li>{{HTMLElement("canvas")}}</li>
 <li>{{HTMLElement("object")}}</li>
</ul>

<p>HTML 명세에 따르면 {{htmlelement("input")}} 또한 대체될 수 있습니다. <code>&lt;input&gt;</code> 유형이 <code>"image"</code>인 경우 {{htmlelement("img")}}와 유사한 대체 요소이기 때문입니다. 그러나 다른 유형의 <code>&lt;input&gt;</code>을 포함한 나머지 양식 컨트롤 요소는 비대체 요소라고 명시하고 있습니다. (명세는 양식 요소의 플랫폼별 기본 렌더링을 "위젯"(Widget)이라는 용어로 설명하고 있습니다.)</p>

<p>CSS {{cssxref("content")}} 속성을 사용해 추가한 객체도 대체 요소로, HTML 마크업에는 존재하지 않기 때문에 "익명" 대체 요소라고 합니다.</p>

<h2 id="대체_요소와_CSS">대체 요소와 CSS</h2>

<p>CSS는 바깥 여백이나 일부 <code>auto</code> 값 계산 등 특정 상황에서 대체 요소를 특별히 취급합니다.</p>

<p>일부 대체 요소는 고유 크기 또는 정의된 기준선을 가질 수 있으며, {{cssxref("vertical-align")}} 등의 CSS 속성이 사용할 수 있습니다. 오직 대체 요소만이 고유 크기를 가질 수 있습니다.</p>

<h3 id="콘텐츠_박스_내부의_객체_위치_제어">콘텐츠 박스 내부의 객체 위치 제어</h3>

<p>특정 CSS 속성을 사용하면 대체 요소 내의 객체가 요소의 박스 영역 어디에 배치되어야 하는지 지정할 수 있으며, {{SpecName("CSS3 Images")}}와 {{SpecName("CSS4 Images")}} 명세가 정의하고 있습니다.</p>

<dl>
 <dt>{{cssxref("object-fit")}}</dt>
 <dd>대체 요소의 콘텐츠 객체를 대체 요소의 박스에 어떻게 맞출지 지정합니다.</dd>
 <dt>{{cssxref("object-position")}}</dt>
 <dd>대체 요소의 콘텐츠 객체를 정렬하는 방법을 지정합니다.</dd>
</dl>

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

<ul>
 <li><a href="https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements">HTML 명세</a></li>
 <li>{{CSS_key_concepts()}}</li>
</ul>