객원 요소

씨에스에스에서 객원 요소 (replaced element) 는 씨에스에스의 범위를 벗어나는 표현 요소입니다. 그들은 씨에스에스 서식 모델과는 독립된 외부 객체입니다.

간단히 말해서, 그들은 현재 문서의 스타일에 영향을 받지 않는 콘텐츠를 갖은 요소입니다. 객원 요소의 위치는 씨에스에스를 사용하여 영향을 받을 수 있지만 객원 자체의 콘텐츠는 영향을 받지 않습니다. <iframe> 요소와 같은 일부 객원 요소는 자체 스타일 시트가 있을 수 있지만 부모 문서의 스타일을 상속하지 않습니다.

씨에스에스가 객원 요소에 미칠 수 있는 유일한 다른 영향력은 씨에스에스 상자 내부에 객원 요소 콘텐츠의 위치를 제어할 수 있는 속성 무리가 있다는 겁니다. 추가 정보는 콘텐츠 상자 내부 객체 위치 제어에서 보세요.

객원 요소

전형적인 객원 요소는:

일부 요소는 특정한 경우에만 객원 요소로 취급됩니다.

또한, 에이치티엠엘 규격은 <input>" 요소를 객원 요소로 대체할 수 있다고 말합니다. 왜냐면 "image" 유형에 해당하는 <input> 요소 무리가 <img>와 비슷한 객원 요소이기 때문입니다. 그러나 다른 유형의 <input> 요소를 비롯한 다른 양식 컨트롤은 비객원 요소 목록에 등재되어 있습니다. (에이치티엠엘 규격에는 "위젯"이라는 용어로 기본값 플랫폼별 렌더링을 설명합니다)

CSS content 속성을 사용해 삽입된 무명 객원 요소. 그들이 "무명"인 이유는 그들은 에이치티엠엘 마크업에는 존재하지 않기때문입니다.

객원 요소가 포함된 씨에스에스 활용

씨에스에스는 여백과 몇몇 auto 값을 계산하는 등 경우에는 구체적으로 객원 요소를 취급합니다.

모두는 아니지만, 일부 객원 요소는 vertical-align과 같은 일부 씨에스에스 속성을 사용하는 고유의 면적과 정의된 기준선을 가지고 있다는 점을 유의하십시요. 오직 객원 요소만이 고유의 면적을 가질 수 있습니다.

콘텐츠 상자 내부 객체 위치 제어

특정 씨에스에스 속성을 사용하여 객원 요소 내부에 포함된 객체가 요소의 상자 영역 내에 어떻게 위치할지를 지정하는 용도로 사용될 수 있습니다. 해당 속성은 CSS Images Module Level 3CSS Images Module Level 4 규격에 의해 정의됩니다:

object-fit
객원 요소의 콘텐츠 객체가 상위 콘테이너 요소 상자에 끼워 맞출 방법을 지정합니다.
object-position
객원 요소의 콘텐츠 객체가 요소 상자 내부에서 정렬되는 방식을 지정합니다.

참조 항목