CSS의 quotes 속성은 인용 요소(<q>, <blockquote> 등)에 표시되는 인용 부호의 종류를 직접 지정할 수 있는 속성입니다. 기본 브라우저 스타일 대신 원하는 따옴표나 괄호 등을 자유롭게 설정할 수 있어, 문서의 언어나 디자인에 맞게 인용문을 세밀하게 조정할 때 유용합니다.
quotes 속성의 기본 문법
quotes 속성은 여는 따옴표와 닫는 따옴표를 쌍으로 지정하며, 필요하면 중첩된 인용을 위한 두 번째, 세 번째 쌍도 추가할 수 있습니다.
selector {
quotes: "여는기호" "닫는기호";
}사용 예제
아래 예제에서는 id가 demo인 <q> 요소에 작은따옴표(' ')를 인용 부호로 지정했습니다. 코드를 실행해 보면 텍스트가 작은따옴표로 감싸져 표시되는 것을 확인할 수 있습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
quotes: "'" "'";
}
</style>
</head>
<body>
<p>
<q id = "demo">
이 텍스트는 quotes 속성으로 지정한
인용 부호로 감싸집니다.
</q>
</p>
</body>
</html>주요 사용 가능 값
- none: 인용 부호를 생성하지 않습니다.
- "기호1" "기호2": 첫 번째 쌍은 최상위 인용, 두 번째 쌍부터는 중첩된 인용에 적용됩니다.
- auto: 문서 언어(lang 속성)에 맞는 기본 인용 부호를 브라우저가 자동으로 선택합니다.
참고 사항
quotes 속성은 단독으로 동작하지 않고, ::before와 ::after 가상 요소의 content 속성과 함께 open-quote, close-quote 값을 사용할 때 실제로 인용 부호가 출력됩니다. 다만 <q> 요소처럼 브라우저가 기본적으로 인용 부호를 처리하는 경우에는 quotes 속성만으로도 결과가 반영됩니다.