CSS - 인용구: 텍스트에 개성을 더해주는 방법

안녕하세요, 미래의 웹 디자이너 여러분! 오늘은 재미있고 자주 간과되는 CSS 프로퍼티에 대해 알아보겠습니다: 인용구(quotes). 친절한 이웃의 컴퓨터 교사로서, 이 소중한 보석을 여러분과 공유하게 되어 기쁩니다. 믿으세요, 이 튜토리얼이 끝나면 여러분은 프로처럼 인용구를 사용할 수 있을 것입니다!

CSS - Quotes

CSS 인용구는 무엇인가요?

들어가기 전에, CSS에서 인용구가 무엇인지 이해해 보겠습니다. 인용구는 말이나 출처를 강조하는 것뿐만 아니라, CSS에서는 자동으로 인용符를 추가하는 강력한 도구입니다. 마치 텍스트 주위를 따라다니며 작은 괄호를 추가하는 작은 로봇처럼입니다!

가능한 값

quotes 프로퍼티를 사용할 수 있는 다양한 값을 시작해 보겠습니다. 다음은 요약을 위한 유용한 표입니다:

값	설명
none	인용구를 사용하지 않음
`<string>`	사용할 인용구 지정
initial	기본 값으로 설정
inherit	부모 요소에서 상속
auto	브라우저가 언어에 따라 결정

이제 하나씩 설명해 보겠습니다.

적용 대상

자세히 탐구하기 전에, quotes 프로퍼티는 모든 요소에 적용된다는 것을 알아두세요. 하지만, 가장 흔히 <q>와 <blockquote> 요소와 함께 사용됩니다. 이를 마치 만능 조미료처럼 생각하면 됩니다 - 모든 요소에 추가할 수 있지만, 특정 요리와 함께 가장 잘 맛이 납니다!

문법

인용구를 사용하는 기본 문법은 간단합니다:

셀렉터 {
quotes: 값;
}

간단하지 않나요? 이제 각 값을 자세히 살펴보겠습니다.

CSS 인용구 - none 값

quotes: none을 설정하면, 실제로 CSS에게 "인용구는 안 돼요!"라고 말하는 것입니다. 이는 기본 인용符를 오버라이드하고 싶을 때 유용합니다. 예를 보겠습니다:

q {
quotes: none;
}

<p>그녀는 <q>Hello, world!</q>라고 말했습니다.</p>

이 경우, <q> 태그 내의 텍스트는 인용符가 없이 표시됩니다. 마치 소리를 낮추지 않고도 귀 기울이는 것처럼입니다!

CSS 인용구 - `<string>` 값

이제 재미있는 부분입니다! 여러분이 원하는 인용구 문자를 정확히 지정할 수 있습니다. 문법은 다음과 같습니다:

셀렉터 {
quotes: "열기 인용구1" "닫기 인용구1" "열기 인용구2" "닫기 인용구2";
}

예를 시도해 보겠습니다:

q {
quotes: "<<" ">>" "(" ")";
}

<p>그녀는 외쳤다 <q>What a <q>wonderful</q> day!</q></p>

이렇게 렌더링됩니다: She exclaimed <<What a (wonderful) day!>>

이게 멋이지 않나요? 텍스트에 마이크를 주는 것처럼입니다!

CSS 인용구 - initial 값

initial 값은 프로퍼티를 기본 값으로 설정합니다. 마치 인용구의 리셋 버튼을 누르는 것입니다. 대부분의 브라우저에서 이는 다음과 동일합니다:

q {
quotes: '"' '"' "'" "'";
}

이는 표준 영어 인용구를 제공합니다: 외부 레벨에 더블 인용구, 내부 레벨에 싱글 인용구입니다.

CSS 인용구 - auto 값

auto 값은 인용구의 스마트 어시스턴트입니다. 문서의 언어에 따라 적절한 인용구를 선택합니다. 예를 들어:

:root {
quotes: auto;
}

만약 HTML이 lang="fr"이라면, 프랑스어 텍스트에 "guillemets"를 사용할 수 있습니다. 마치 다국어 인용구 전문가가 팀에 있는 것처럼입니다!

CSS 인용구 - :lang 가상 클래스 사용

여기서 더욱 멋진 방법을 소개합니다. :lang 가상 클래스는 다양한 언어에 대해 다른 인용구를 지정할 수 있게 해줍니다. 확인해 보세요:

:root { quotes: auto; }
:lang(en) q { quotes: '"' '"' "'" "'"; }
:lang(fr) q { quotes: "«" "»" "‹" "›"; }
:lang(de) q { quotes: "„" """ "‚" "'"; }

이렇게 하면 영어, 프랑스어, 독일어에 대해 다른 인용구 스타일을 설정할 수 있습니다. 마치 웹사이트가 여러 언어를 말하는 것처럼!

모든 것을 통합해 보자

이제 더 복잡한 예제를 만들어 모든 것을 통합해 보겠습니다:

<p lang="en">그녀는 말했어요, <q>저는 <q>CSS</q>를 사랑해!</q></p>
<p lang="fr">그녀는 말했어요, <q>저는 <q>CSS</q>를 사랑해!</q></p>
<p lang="de">그녀는 말했어요, <q>저는 <q>CSS</q>를 사랑해!</q></p>

:root { quotes: auto; }
:lang(en) q { quotes: '"' '"' "'" "'"; }
:lang(fr) q { quotes: "«" "»" "‹" "›"; }
:lang(de) q { quotes: "„" """ "‚" "'"; }

q::before { content: open-quote; }
q::after { content: close-quote; }

이렇게 하면 각 문장이 언어에 맞는 인용구로 렌더링됩니다. 마치 다국어 타이포그래퍼가 웹사이트에서 일하는 것처럼!