CSS의 :lang 선택자를 사용하면 lang 속성 값에 따라 모든 <p> 요소를 손쉽게 스타일링할 수 있습니다. 이 선택자는 특정 언어로 표시된 콘텐츠에만 별도의 스타일을 적용하고 싶을 때 매우 유용합니다.
:lang 선택자란?
:lang() 선택자는 HTML 요소의 lang 속성 값을 기준으로 해당 언어와 일치하는 요소를 선택하는 의사 클래스입니다. 예를 들어 프랑스어(fr)로 지정된 문단만 다른 배경색이나 글꼴로 표시할 수 있습니다.
예제 코드
아래 코드를 실행하면 lang="fr"로 설정된 <p> 요소에만 초록색 배경이 적용되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
p:lang(fr) {
background: green;
}
</style>
</head>
<body>
<p>This is my country</p>
<p lang = "fr">C'est mon pays</p>
<p>French is the language of France</p>
</body>
</html>실행 결과
위 코드를 브라우저에서 열면 세 개의 문단 중 두 번째 문단인 C'est mon pays에만 초록색 배경이 적용됩니다. 나머지 두 문단은 lang 속성이 없거나 프랑스어가 아니기 때문에 기본 스타일 그대로 표시됩니다.
활용 팁
다국어 웹사이트를 제작할 때 :lang 선택자를 활용하면 언어별로 서로 다른 타이포그래피, 줄바꿈 규칙, 하이픈 처리 등을 간편하게 지정할 수 있습니다. 또한 [lang="fr"] 속성 선택자와 비슷해 보이지만, :lang은 언어 코드의 접두사까지 인식하기 때문에 더 유연하게 동작한다는 장점이 있습니다.