attr 함수

함수 attr는 CSS에서 HTML 태그의 속성 값을 가져올 수 있게 해줍니다.

구문

css선택자 {
  속성: attr(이름, 타입, 기본값);
}

매개변수

매개변수 설명
이름 CSS로 전달되는 요소의 속성 이름입니다.
타입 CSS 속성 값의 타입입니다. 다음과 같은 키워드가 허용됩니다: string (문자열), color (색상), url (웹 주소), integer (정수), number (실수), angle (각도), time (시간), deg (도), 그리고 em, px 등과 같은 CSS 단위들.
기본값 속성이 없거나 브라우저가 속성 값을 얻을 수 없는 경우 사용될 값입니다.

예제

링크 텍스트 뒤에 괄호 안에 href 속성 값을 표시해 봅시다:

html<a href="http://google.com">링크</a>
cssa::after {
  content: ' (' attr(href) ')';
}

Результат:

함께 보기

  • 속성 content,
    요소에 텍스트를 추가할 수 있게 해줍니다.
  • 가상 요소 before,
    태그 텍스트 앞에 내용을 삽입합니다.
  • 가상 요소 after,
    태그 텍스트 뒤에 내용을 삽입합니다.