CSS에서 대체 요소(replaced element)는 CSS의 사양 범위에서 표현되지 않는 요소를 가르키며 CSS의 formatting model과는 독립된 외부의 객체입니다.
 
간단히 말해서, 대체 요소는 적용되고 있는 문서의 스타일에 영향을 받지 않는 컨텐츠입니다. 대체 요소의 위치는 CSS의 영향을 받을 수 있지만 내용물 자체는 영향을 받지 않습니다. <iframe> 요소와 같은 대체 요소는 내부에 스타일시트를 가지고 있기도 하지만 부모 문서의 스타일을 상속받지는 않습니다.
 
대체 요소가 CSS 영향을 받는 또 다른 경우는 대체 요소 내부에 있는 내용물의 위치를 조정하는 속성이 지정되었을 때입니다. 대체 요소 내부의 객체 위치 조정하기에서 더 자세히 알아보겠습니다.

대체 요소

대표적인 대체 요소는 다음과 같습니다. 

일부 요소들은 특별한 경우에만 대체 요소로 취급됩니다.

 

HTML의 사양에서는 "image"로 지정된 <input> 또한 <img>와 유사한 대체 요소이기 때문에 대체될 수 있다고 정의되어 있습니다. 하지만 그 외의 type이 지정된 <input>을 포함한 다른 form 요소들은 명시적으로 비대체 요소에 포함되어 있습니다. (해당 form 요소들은 "Widgets"이라고 구분합니다).

 

CSS content 속성을 사용하여 삽입된 객체는 익명의 대체 요소(anonymous replaced elements)입니다. 그 객체는 HTML 상에 존재하지 않기 때문에 "익명"입니다.

대체 요소에 CSS 사용하기

CSS는 margin이나 일부 auto 값을 계산하는 특정 경우에 대체 요소를 별도로 처리합니다.

일부 대체 요소는 내부의 좌표값이나 baseline을 가지고 있으며 vertical-align과 같은 일부의 CSS 속성에 영향을 줍니다. 오직 대체 요소만이 내부의 좌표값을 가질 수 있습니다. 

대체 요소 내부의 객체 위치 조정하기

어떤 CSS 속성은 대체 요소 내부의 객체가 박스 영역 안에서 어떻게 위치해야 하는지 지정하는 데 사용됩니다. 이 속성들은 CSS Images Module Level 3CSS Images Module Level 4에 정의되어 있습니다.

object-fit
대체 요소 내부의 객체가 containing 요소 박스에 어떻게 맞추어 들어가야하는지 정의합니다.
object-position
대채 요소 내부의 객체가 요소 박스에 어떻게 정렬되는지 정의합니다.

참조

문서 태그 및 공헌자

이 페이지의 공헌자: wankyu, nyxchung, Netaras
최종 변경자: wankyu,