CSS에서는 quotes 속성을 사용하여 인용문에 표시되는 따옴표의 모양을 자유롭게 설정할 수 있습니다. 이 속성은 주로 <q> 태그와 함께 사용되며, 열기 따옴표와 닫기 따옴표를 순서대로 지정합니다.
quotes 속성이란?
quotes 속성은 브라우저가 인용 요소(<q>)를 렌더링할 때 앞뒤에 붙일 따옴표 문자를 직접 정의합니다. 기본값은 브라우저 언어 설정에 따라 달라지지만, 이 속성을 활용하면 작은따옴표(' '), 큰따옴표(" "), 꺾쇠 괄호(« ») 등 원하는 어떤 기호든 지정할 수 있습니다.
사용 예제
아래 코드는 quotes 속성을 적용하여 따옴표를 설정하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
quotes: "'" "'";
}
</style>
</head>
<body>
<p>
<q id = "demo">
This is demo text surrounded by quotes.
</q>
</p>
</body>
</html>코드 설명
- #demo { quotes: "'" "'"; } — id가 demo인 요소의 따옴표를 작은따옴표(')로 지정합니다.
- <q id="demo"> — 인용 요소에 해당 스타일을 적용하여, 텍스트가 작은따옴표로 감싸져 표시됩니다.
위 예제를 실행하면 'This is demo text surrounded by quotes.'처럼 문장이 작은따옴표로 감싸진 결과를 확인할 수 있습니다. 필요에 따라 큰따옴표나 다른 기호로 쉽게 변경할 수 있어, 다국어 사이트나 특수한 디자인 요구 사항이 있는 프로젝트에서 유용하게 활용됩니다.