대체 요소

CSS대체 요소(replaced element)란 자신의 표현이 CSS의 범위를 벗어나는 요소를 말합니다. 대체 요소는 CSS 서식 모델과는 분리된 외부 객체입니다.

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

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

대체 요소

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

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

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

CSS content 속성을 사용해 추가한 객체는 HTML 마크업에 존재하지 않기 때문에 "익명 대체 요소"입니다.

대체 요소와 CSS

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

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

콘텐츠 박스 내부의 객체 위치 제어

특정 CSS 속성을 사용하면 대체 요소 내의 객체가 요소의 박스 영역 어디에 배치되어야 하는지 지정할 수 있으며, CSS Images Module Level 3CSS Images Module Level 4 명세가 정의하고 있습니다.

object-fit
대체 요소의 콘텐츠 객체를 대체 요소의 박스에 어떻게 맞출지 지정합니다.
object-position
대체 요소의 콘텐츠 객체를 정렬하는 방법을 지정합니다.

같이 보기