[개념정리] non-replaced elements와 replaced elements

 

 

http://ahmed.amayem.com/html-replaced-elements-non-replaced-elements-examples/

What are HTML Replaced Elements VS Non-Replaced Elements with Examples

위의 글을 번역한 글(번역 오류 주의)

 

Replaced Element란?

w3c에서 replaced element

 

An element whose content is outside the scope of the CSS formatting model, such as an image, embedded document, or applet. For example, the content of the HTML IMG element is often replaced by the image that its "src" attribute designates. Replaced elements often have intrinsic dimensions: an intrinsic width, an intrinsic height, and an intrinsic ratio. For example, a bitmap image has an intrinsic width and an intrinsic height specified in absolute units (from which the intrinsic ratio can obviously be determined). On the other hand, other documents may not have any intrinsic dimensions (for example, a blank HTML document).
User agents may consider a replaced element to not have any intrinsic dimensions if it is believed that those dimensions could leak sensitive information to a third party. For example, if an HTML document changed intrinsic size depending on the user's bank balance, then the UA might want to act as if that resource had no intrinsic dimensions.
The content of replaced elements is not considered in the CSS rendering model.

한 엘리먼트의 컨텐츠가 CSS  포맷팅 모델 밖의 범위인 것.

 

이미지나 내장된 문서 또는 애플릿 같은 것들. 

예를들어 HTML img엘리먼트는 때때로 src속성으로 지정된 이미지로 대체된다. 

대체된 요소는 때때로 고유한 특성을 가지고 있다 : 고유한 너비나 높이 비율

예를들어 비트맵 이미지는 절대적 유닛에서 명시된 (여기서 고유한 비율이 명확하게 결정됨) 고유한 너비와 높이를 가지고 있다. 

반면 다른 문서는 어떤 고유한 치수를 가지고 있지 않다(예를들어 비어있는 HTML문서).

유저 에이전트는 대체된 엘리먼트를 고유한 치수를 가지고 있지 않다고 간주할 수 있다.

만일 이러한 치수가 민감한 정보를 제3자에 흘러갈 수 있는 치구라면.

예를들어 HTML문서가 고유한 사이즈를 유저의 은행잔고에 의존하고 있는경우 

유저에이전트는 그 리소스가 고유한 치수를 가지고 있지 않은 것으로 동작하려 할 것이다. 

 

대체된 엘리먼트의 컨첸츠는 CSS렌더링 모델에서 고려되지 않는다.

 

즉 문서에서 css에의해 스타일 되지 못하는 컨텐츠면 대체된 요소다. 

 

 

어떤 엘리먼트가 대체된 엘리먼트들일까?

1. audio
2. canvas
3. embed
4. iframe
5. img
6. math
7. object
8. svg
9. video

 

틀린 반론 :

"이미지나 아이프레임을 css을 활용해 사이즈를 컨트롤 할 수 있는데도 여전히 

대체된 엘리먼트들이라고 어떻게 생각할 수 있나요?"

 

답은 간단하다. 

그 요소 자체는 css를 사용해 스타일될 수 있지만 그 컨텐츠는 불가능하다. 

 

컨텐츠란? 

 

css 2.1 스펙에 컨텐츠의 정의가 나와있다

The content associated with an element in the source document. Some elements have no content, in which case they are called empty. The content of an element may include text, and it may include a number of sub-elements, in which case the element is called the parent of those sub-elements.

문서의 엘리먼트와 관련된 컨텐츠. 어떤 엘리먼트들은 컨텐츠가 없다. 그 경우 비었다고 말한다.
엘리먼트의 컨텐츠는 텍스트를 포함할 수 있으며, 많은 자식엘리먼트를 포함할 수도 있다. 이 경우는 자식 엘리먼트의 부모라고 말한다.

 

기본적으로 오프닝 태그와 클로즈 태그 사이에 오는 어떤 것들이 모두 컨텐츠다. 

오프닝 태그와 클로즈 태그 사이에는 

1. Text 

2. 다른 엘리먼트 

가 올 수 있다. 

그러므로 오프닝 태그와 클로즈 태그 사이의 텍스트나 다른 엘리먼트 들에 만일 CSS가 영향을 끼치지 않는다면 

그 엘리먼트는 대체된 엘리먼트다. 

 

컨텐츠는 전체 엘리먼트의 한 부분이다. 컨텐츠는 전체 엘리먼트가 아니다. 

그러므로 다양한 국면의 엘리먼트에 적용할 수 있는 CSS스타일들이 있다. 

 

너비와 높이가 컨텐츠에 영향을 끼치지 않는다? 

 

The dimensions of the content area of a box — the content width and content height — depend on several factors: whether the element generating the box has the ‘width’ or ‘height’ property set, whether the box contains text or other boxes, whether the box is a table, etc. Box widths and heights are discussed in the chapter on visual formatting model details.

박스의 컨텐츠 영역의 치수(컨텐츠의 너비와 높이)는 몇가지 요인에 의한다:
엘리먼트 생성하는 박스가 너비와 높이 속성 세트가 있는지, 
박스가 텍스트나 다른 박스들을 포함하는지, 
박스가 테이블인지 등등. 
박스 너비와 높이는 비쥬얼 포멧팅 모델 챕터에서 다루어질 것이다.

 

높이와 너비가 "박스의 컨텐츠 영역 content area of a box"를 가리키고 있다는 것을 눈치채야 한다. 즉 실제 컨텐츠가 아니다. 

그러므로 너비와 높이 속성은 엘리먼트 자체에 적용되며 컨텐츠에 직접 적용되지 않는다. 

브라우저의 너비와 높이를 컨트롤 하는 것처럼 말이다. 

 

게다가 너비와 높이는 상속된 속성이 아니며 그 속성의 값은 컨텐츠에 적용되지 않아야 한다.