CSS의 :lang 가상 클래스는 특정 요소에 적용할 언어를 지정하는 선택자입니다. 여러 언어가 함께 사용되는 문서에서 언어마다 다른 표기 규칙을 처리해야 할 때 특히 유용합니다.
:lang 가상 클래스란?
:lang 선택자는 HTML 요소의 lang 속성값을 기준으로 일치하는 요소를 찾아 스타일을 적용합니다. 예를 들어 영어(en)와 프랑스어(fr)처럼 언어 코드가 서로 다른 콘텐츠에 각각 다른 스타일을 지정할 수 있습니다.
대표적인 활용 사례는 다음과 같습니다.
- 언어별로 다른 인용 부호(quotation mark) 스타일 지정
- 언어에 맞는 글꼴(font-family) 적용
- 하이픈 넣기(hyphenation) 등 언어 고유의 조판 규칙 처리
사용 예제
아래 코드를 실행하면 :lang 가상 클래스의 동작을 직접 확인할 수 있습니다.
<html>
<head>
<style>
/* 두 언어에 대해 각각 두 단계의 인용 부호 정의 */
:lang(en) { quotes: '\201C' '\201D' '\2018' '\2019'; }
:lang(fr) { quotes: '\00AB' '\00BB' '\2039' '\203A'; }
</style>
</head>
<body>
<p>...<q lang="fr">단락 안의 인용문</q>...</p>
</body>
</html>
코드 설명
위 예제에서는 영어(en)에는 큰따옴표와 작은따옴표를, 프랑스어(fr)에는 프랑스어 관례에 따라 겹화살괄호(« ») 형태의 인용 부호를 정의했습니다.
본문의 <q lang="fr"> 요소는 프랑스어로 지정되어 있으므로, 브라우저는 해당 인용문을 렌더링할 때 프랑스어 규칙에 맞는 따옴표를 자동으로 적용합니다.
이처럼 :lang 가상 클래스를 활용하면 하나의 문서 안에서 언어별 표기 규칙을 체계적으로 관리할 수 있어, 다국어 웹사이트 제작이나 현지화(localization) 작업에 큰 도움이 됩니다.