CSS의 :lang() 가상 클래스는 요소에 지정된 lang 속성 값을 기준으로 해당 요소를 선택하는 선택자입니다. 이를 활용하면 콘텐츠가 어떤 언어로 작성되어 있는지에 따라 서로 다른 스타일을 적용할 수 있어, 다국어 웹사이트를 개발할 때 특히 유용하게 사용됩니다.
문법(Syntax)
:lang() 가상 클래스의 기본 문법은 다음과 같습니다.
:lang(언어코드) {
/* 스타일 선언 */괄호 안에는 ko(한국어), en(영어), it(이탈리아어), es(스페인어)처럼 BCP 47 표준에 따른 언어 코드를 지정합니다. 예를 들어 p:lang(ko)라고 작성하면 lang="ko" 속성을 가진 모든 <p> 요소만 선택됩니다.
그럼 첫 번째 예제를 통해 :lang() 가상 클래스의 동작 방식을 살펴보겠습니다.
예제 1 – 언어별 텍스트 라벨 추가하기
아래 예제에서는 각 단락(<p>)의 lang 속성 값에 따라 ::after 가상 요소를 이용해 언어 이름 라벨을 자동으로 붙여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
p:lang(it)::after {
padding: 20px;
content: '~ Italian';
font-style: italic;
}
p:lang(es)::after {
padding: 8px;
content: '~ Spanish';
font-style: italic;
}
p:lang(en)::after {
padding: 20px;
content: '~ English';
font-style: italic;
}
</style>
</head>
<body>
<p lang='it'>Bella ciao</p>
<p lang='en'>Nice hello</p>
<p lang='es'>Bueno adios</p>
</body>
</html>실행 결과
위 결과에서 볼 수 있듯이, 각 문장 뒤에는 해당 요소의 lang 속성 값에 맞는 언어 라벨(~ Italian, ~ English, ~ Spanish)이 이탤릭체로 자동 출력됩니다. HTML 구조를 변경하지 않고도 CSS만으로 언어 정보를 시각적으로 표시할 수 있는 것이죠.
이번에는 조금 더 실용적인 예제를 살펴보겠습니다.
예제 2 – 국기 그라디언트 배경 적용하기
다음 예제에서는 <div> 요소의 lang 속성 값에 따라 각국 국기를 연상시키는 그라디언트 배경과 도시 이름 라벨을 함께 적용합니다.
<!DOCTYPE html>
<html>
<head>
<style>
div{
margin: 10px;
padding: 10px;
text-align: center;
border: 1px solid black;
}
div:lang(it)::after {
padding: 20px;
content: '~ Italy';
font-style: italic;
}
div:lang(es)::after {
padding: 8px;
content: '~ Spain';
font-style: italic;
}
div:lang(nl)::after {
padding: 20px;
content: '~ Belgium';
font-style: italic;
}
div:lang(es){
background-image: linear-gradient(red 25%, yellow 25%, yellow 75%, red 75%);
}
div:lang(it){
background-image:linear-gradient(90deg, #00ae00 33.3%, white 33.3%, white 66.6%, red 66.6%);
}
div:lang(nl){
background-image:linear-gradient(90deg, black 33.3%, yellow 33.3%, yellow 66.6%, red 66.6%);
}
</style>
</head>
<body>
<div lang='it'>Rome</div>
<div lang='nl'>Brussels</div>
<div lang='es'>Madrid</div>
</body>
</html>실행 결과
실행 결과를 보면 로마(Rome)는 이탈리아 국기의 초록·흰색·빨강 세로 줄무늬 배경을, 브뤼셀(Brussels)은 벨기에 국기의 검정·노랑·빨강 줄무늬 배경을, 마드리드(Madrid)는 스페인 국기를 연상시키는 빨강·노랑 가로 그라디언트 배경을 각각 갖게 됩니다. 이처럼 :lang() 가상 클래스를 사용하면 하나의 스타일시트에서 언어 속성만으로 요소를 구분해 다양한 스타일을 손쉽게 분기 처리할 수 있습니다.
마무리
:lang() 가상 클래스는 [lang="..."] 속성 선택자와 비슷해 보이지만, 하이픈(-)으로 연결된 부분 일치도 지원한다는 점에서 차이가 있습니다. 예를 들어 :lang(en)은 lang="en-US", lang="en-GB" 같은 요소까지 모두 매칭할 수 있어 다국어 사이트에서 더 유연하게 활용됩니다. 언어별 폰트, 따옴표 스타일, 하이픈 처리 등 타이포그래피를 세밀하게 조정해야 할 때 :lang() 가상 클래스를 적극적으로 활용해 보시기 바랍니다.