선택자의 속성 값을 반환해준다.
2023년 4월에 발표한 CSS Values and Units Module Level 5는 attr() 함수에서 다음과 같은 새로운 구문을 추가 제안했다.
attr( <q-name> <attr-type>? , <declaration-value>?)
기존 구문은 <q-name>만을 사용했다면 추가된 새 구문에서는 <attr-type>을 뒤에 선택적으로 함께 사용된다. <attr-type>은 지정된 속성의 값이 사용되는 유형을 정한다. 이 유형은 몇 가지 정해진 것으로 제한되며 생략하게 되면 문자열로 처리된다. 가능 유형에 대한 설명은 아래의 '사용되는 타입'에서 '포함 타입'을 참고하기 바란다.
<declaration-value>는 선택 사항이다. 누락된 속성이거나 지정된 유형으로 구문 분석이 실패한 경우 대신 사용할 값을 지정한다. 기본값은 <attr-type>이 문자열(또는 생략)인 경우 빈 문자열이고 그렇지 않은 경우에는 유효하지 않는 것으로 보장된 값이다.
attr() 함수를 사용하기 위한 매개 변수의 유형을 나타낸다.
<q-name> <attr-type>? , <declaration-value>?
<q-name>은 참조될 속성명을 지정한다.
<attr-type>은 생략이 가능하며 지정된 속성의 값이 사용되기를 원하는 가능한 타입을 지정한다. 가능한 타입은 제한적으로 정해졌으며 자세한 내용은 하위에 포함된 타입을 참조한다. 생략하면 기본값은 문자열이다.
<declaration-value>는 폴백(fallback)으로 생략이 가능하며 속성이 없거나 지정된 유형으로 구문 분석을 하지 못하는 경우 대체 값으로 사용된다.
<attr-type>과 <declaration-value> 타입이 지정된 구문은 아직 유저 에이전트의 확인이 필요하다.<q-name>
속성의 값을 ::before 또는 ::after 가상 요소의 콘텐츠로 사용하는 일반적인 구문이다.
(예)
::after {
content: attr(data-title);
}속성 값이 어떤 종류의 CSS 값으로 해석될 것인지(attr() 함수의 결과 값 사용)와 해당 값에 어떤 특수 구문 분석이 수행될 것인지를 나타낸다.
string | url | ident | color | number | percentage |length | angle | time | frequency | flex | <dimension-unit>
리터럴 "%" 문자(값이 "%"인 <delim-token>)와 일치하거나 값이 <length>, <angle>, <time>, <frequency> 또는 <flex> 값(예: px 또는 ms)에 대한 CSS 단위 중 하나인 식별자와 일치한다.
타입이 <angle>인 값으로 해석된다.
타입이 <color>인 값으로 해석된다.
타입이 <flex>인 값으로 해석된다.
타입이 <frequency>인 값으로 해석된다.
타입이 <ident>인 값으로 해석된다.
타입이 <length>인 값으로 해석된다.
타입이 <number>인 값으로 해석된다.
타입이 <percentage>인 값으로 해석된다.
타입이 <string>인 값으로 해석된다.
타입이 <time>인 값으로 해석된다.
타입이 <url>인 값으로 해석된다.
<declaration-value> 타입은 시퀀스에 허용되지 않는 토큰이 포함되지 않는 한 하나 이상의 토큰 시퀀스와 일치한다. 유효한 선언이 값으로 가질 수 있는 전체를 나타낸다.
<declaration-value>?참조되는 속성의 이름을 나타낸다. 가상 요소에 적용되는 경우는 속성은 가상 요소의 원래 요소에서 참조된다.
content: attr(href);
아래의 결과 화면에서 링크 레이블 위에 마우스를 올리면 툴팁으로 연결될 URL 정보를 보여준다. 이때 보여주는 URL은 레이블에 링크 처리된 A 태그의 href 속성을 attr() 함수로 반환받아 가상 요소 선택자의 content 속성의 값으로 사용된다.
CSS 코드 중에 아래와 같이 :active 가상 클래스는 터치 스크린을 탭하는 시점에 선택자로 사용되지만 바람직하지 않은 방식이다. 마우스 입력 장치 사용 환경에 최적화되어 있다는 점을 참고하길 바란다.
a:hover::after, a:active::after {
display: block;
}
| Modules | ||
|---|---|---|
| Module Name | Status | Summary |
| CSS Values and Units Module Level 5 | Last review date: 2022-5-28 | |