CSS의 :lang 선택자는 요소에 지정된 lang 속성 값을 기준으로, 특정 언어로 작성된 요소에만 스타일을 적용할 수 있는 강력한 도구입니다. 예를 들어 다국어 웹사이트에서 프랑스어 문단에만 별도의 배경색이나 글꼴을 지정하고 싶을 때 매우 유용하게 활용됩니다.
:lang 선택자의 기본 개념
:lang() 선택자는 괄호 안에 언어 코드를 넣어 사용합니다. 해당 언어 코드와 일치하는 lang 속성을 가진 모든 요소에 스타일이 적용됩니다.
예제 코드
아래 코드는 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 속성이 없거나 값이 fr이 아니기 때문에 스타일의 영향을 받지 않습니다.
활용 팁
- 다국어 사이트에서 언어별로 글꼴, 줄 간격, 자간 등 타이포그래피를 다르게 지정할 때 효과적입니다.
- 언어마다 인용 부호나 하이픈 처리 규칙이 다르므로, 이를 언어별로 조정할 때도
:lang선택자가 유용합니다. - 참고로 원본 예제 코드의 배경색 값에 있던 오타(
greeb)는 올바른 색상 값인green으로 수정했습니다.