[CSS] content

content

content 속성을 활용하여 DOM트리가 아닌 스타일시트에서 요소나 가상요소 안의 내용을 렌더링할 수 있다.
콤마로 분리된 URI 리스트를 값으로 할 수 있으며 슬래시(/)로 분리된 문자열은 리더기를 위한 대체 텍스트를 표현한다.
여러개의 URI가 선언될 경우, 폴백으로 적용된다.

항목	내용
초기값	normal
적용대상	:before, :after, :marker, 페이지 마진 박스 / image와 url 값은 모든 요소에 적용 가능
상속	X

1. 값

1) normal

가상요소 :before과 :after는 none처럼 적용된다.

2) none

일반 요소에는 해당 요소의 자식들이 렌더링 되지 않게 함으로써 마치 요소가 비어있는 것처럼 보이게 한다.
가상요소에는 display:none이 선언된 것처럼 생성이 방지되도록 한다.

3) <content-list>

[ <string> | contents | <uri> | <quote> | document-url | <target> | leader() ]+

replaced E들은 :before와 :after와 같은 가상요소를 가지지 않는다.

(1) <string>

특정 문자열로 내용을 지정할 수 있다. 개행이 있을 경우 white-space 속성을 이용하여 처리할 수 있다.

(2) <uri>

외부 자료를 내용으로 지정할 수 있다. UA가 자료를 보여줄 수 없을 경우 지시사항을 알려주어야 한다.

폴백은 아직안되나봄….

(3) <counter>

counter()나 counters() 함수로 정의될 수 있다. counter(name)나 counter(name, style) 두가지 양식을 가지고 있다.

2. 접근성

1) 생성

content 속성을 사용하여 내용을 생성하는 경우, 검색, 선택, 보조기술 사용이 가능해야 한다. 보조 음성 기술 적용이 반드시 가능해야 한다.

2) 대체 텍스트

슬래시(/)로 분리된 문자열을 대체텍스트로 지정할 수 있다. 꾸밈요소의 경우 빈 문자열을 지정하여 읽기 쉽도록 한다.

아직안되나봄…………..

일부는 제안서를 보고 작성한 내용입니다. (확정 안된 내용 포함)

​