CSS attr() 함수란?
CSS의 attr() 함수는 선택한 요소의 HTML 속성(attribute) 값을 가져와 스타일에 활용할 수 있게 해주는 기능입니다. 주로 content 속성과 함께 사용되며, 가상 요소(::before, ::after)를 통해 화면에 표시됩니다.
기본 문법
attr(속성이름)
괄호 안에 참조하려는 HTML 속성의 이름을 넣으면, 해당 요소의 속성 값이 문자열 형태로 반환됩니다.
예제 코드
아래 예제는 링크(a 태그)의 href 속성 값을 읽어와, 링크 텍스트 뒤에 실제 URL을 괄호와 함께 표시하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
a:before {content: " (" attr(href) ")";}
</style>
</head>
<body>
<h2>정보 자료</h2>
<p>리소스: <a href = "https://www.qries.com">Qries 방문하기</a></p>
</body>
</html>
실행 결과
위 코드를 실행하면 링크 텍스트 옆에 해당 URL이 아래와 같이 함께 출력됩니다.
Qries 방문하기 (https://www.qries.com)
attr() 함수 활용 팁
- 인쇄 최적화: 문서를 인쇄할 때 링크의 실제 URL을 함께 보여주는 데 유용합니다.
- 간단한 툴팁 구현:
data-*커스텀 속성과 조합하면 별도의 JavaScript 없이 툴팁을 만들 수 있습니다. - 브라우저 지원 범위: 현재
attr()은content속성에서만 모든 주요 브라우저에서 완전히 지원되며,width,color등 다른 속성에서는 일부 브라우저에서 실험적으로만 동작합니다.