CSS의 attr() 함수는 선택한 요소가 가진 특정 속성(attribute)의 값을 가져와서 반환하는 기능을 합니다. 주로 content 속성과 함께 사용되며, HTML 마크업을 수정하지 않고도 CSS만으로 동적인 콘텐츠를 표시할 수 있어 매우 유용합니다.
attr() 함수란?
attr() 함수는 선택자로 지정된 요소의 속성 값을 문자열 형태로 읽어옵니다. 예를 들어 링크(<a>) 태그의 href 속성 값을 가져와 화면에 표시하거나, 이미지의 alt 값을 활용하는 등 다양한 방식으로 응용할 수 있습니다.
사용 예제
아래 코드는 attr() 함수를 활용하여 링크의 href 속성 값을 자동으로 화면에 출력하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
a:before {content: " (" attr(href) ")";}
</style>
</head>
<body>
<h2>Information Resource</h2>
<p>
Resource:<a href="https://www.qries.com">Welcome to Qries </a>
</p>
</body>
</html>코드 설명
위 예제에서 a:before 선택자는 모든 링크 앞에 가상 요소(::before)를 생성합니다. 이때 attr(href)가 해당 링크의 href 속성 값을 읽어와 괄호 안에 URL이 함께 표시됩니다.
결과적으로 브라우저에는 다음과 같이 나타납니다.
Welcome to Qries (https://www.qries.com)
활용 팁
attr() 함수는 인쇄 스타일시트에서 링크 URL을 문서에 노출시키거나, 툴팁 효과를 만들 때도 자주 활용됩니다. 다만 현재 대부분의 브라우저에서 attr()은 content 속성에서만 완전하게 지원되므로, 다른 CSS 속성에서 사용할 경우 브라우저 호환성을 반드시 확인해야 합니다.