CSS / Reference / quotes

quotes는 open-quote와 close-quote로 생성되는 인용 부호의 쌍을 정합니다. 중첩 인용에는 깊이별 부호 쌍을 지정할 수 있으며, 본문에 직접 입력한 따옴표 문자를 바꾸는 속성은 아닙니다.

문법과 주요 값

초기값은 브라우저 기본 스타일시트가 HTML 요소에 적용한 값과 같다는 뜻이 아닙니다. 실제 값은 개발자 도구의 Computed에서 확인하세요.

q { quotes: "«" "»" "‹" "›"; }
q::before { content: open-quote; }
q::after { content: close-quote; }

값과 적용 조건은 MDN quotes에서 확인할 수 있습니다.

실행 예제와 결과 비교

아래 전체 코드를 UTF-8 형식의 quotes-example.html 파일로 저장한 뒤 브라우저로 여세요. 예제용 CSS는 이 파일 안에만 넣고 사이트 전체 스타일시트에 그대로 붙여 넣지 않습니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>quotes 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target { quotes: "«" "»" "‹" "›"; }
.reference { quotes: none; }
q::before { content: open-quote; }
q::after { content: close-quote; }
</style>
</head>
<body>
<main id="demo">
<h1>quotes 적용 비교</h1>
<section class="samples"><div class="target"><p class="label">깊이별 인용 부호</p><q>바깥 인용 <q>안쪽 인용</q></q></div><div class="reference"><p class="label">none</p><q>인용문</q></div></section>
</main>
</body>
</html>

바깥 인용과 안쪽 인용은 서로 다른 부호 쌍을 사용합니다. none의 예문은 인용문이라는 의미를 유지하지만 생성된 부호는 보이지 않습니다.

인용 깊이와 쌍의 순서

두 문자열이 한 쌍이며 여는 부호 다음에 닫는 부호를 적습니다. 준비한 쌍보다 깊게 중첩되면 마지막 쌍이 계속 사용될 수 있습니다. 인용 부호는 생성 콘텐츠의 인용 깊이와 연결되므로 q 밖에서 open-quote를 사용할 때도 닫는 동작과 균형을 확인하세요.

문자 자체와 생성 부호

HTML에 이미 적은 “문자”는 quotes: none으로 없어지지 않습니다. no-open-quote와 no-close-quote는 부호를 표시하지 않으면서 인용 깊이에 영향을 주는 content 값으로, 부호 쌍 자체를 정하는 quotes와 구분합니다. 자동 부호를 쓰려면 문서의 lang도 정확히 지정합니다.

한 가지 설정씩 바꾸어 확인하기

앞의 전체 코드를 저장한 예제 파일을 사용합니다. 지정한 선택자의 CSS만 변경하고, 서로 다른 비교 조건을 한꺼번에 바꾸지 않습니다.

1. 기존 .target의 바깥 q 안에 q를 한 번 더 중첩해 총 세 단계로 만듭니다. 세 번째 단계에서 마지막 ‹ › 쌍을 다시 사용하는지 확인합니다.
2. quotes를 none으로 바꾸고 직접 입력한 따옴표는 남는지 비교합니다. no-open-quote/no-close-quote는 content 값이며 표시 없이 깊이를 조정하므로 여닫는 동작을 함께 바꾸고 복구합니다.

첫 예제 파일의 style 끝에 다음 규칙을 잠시 추가하면 바깥 q 부호는 보이지 않지만 안쪽 q는 두 번째 쌍 ‹ ›를 유지합니다. 깊이를 유지하는 여닫기 두 동작을 함께 지정하고, 확인 후 두 규칙을 제거합니다.

.target > q::before { content: no-open-quote; }
.target > q::after { content: no-close-quote; }

문자 크기·줄 높이·서체를 함께 조정하려면 글꼴, 글자 크기, 굵기, 줄 간격 설정하기를 참고하세요. 본문의 조건과 함께 비교할 관련 속성은 content입니다.

적용되지 않거나 예상과 다를 때

• 부호가 두 번 보이면 원문 문자와 q의 생성 부호가 중복되는지 확인합니다.
• quotes 값만 바꾸었는데 표시가 없으면 ::before와 ::after의 content를 확인합니다.