:lang(콘텐츠 언어) 가상 클래스

:lang(콘텐츠 언어) 가상 클래스 선택자는
인수로 주어진 (인간) 콘텐츠 언어를 기반으로 lang 속성과 그 값을 가진 요소를 선택합니다.

부연설명
lang 속성은 요소 콘텐츠와 텍스트가 포함된 모든 요소 속성에 대한 기본 언어(language)를 지정하는 HTML 속성입니다.
이 속성을 사용하면 스크린 리더나 브라우저, 검색 엔진 등에 사용해야 하는 (인간) 콘텐츠 언어 정보를 제공합니다.

:lang(콘텐츠 언어) 가상 클래스 선택자를 사용하면 콘텐츠 언어에 따라 요소를 선택할 수 있습니다.

형식 구문

CSS 
:lang(lang 속성과 그 값을 기반으로 하는 콘텐츠 언어) {
    /* ... */
}

구문

CSS 
/* 언어 태그만 사용하는 경우 */
:lang(ko) {}
:lang(en) {}

/* 언어 태그와 지역 하위 태그 사용하는 경우 */
:lang(ko-KR) {}
:lang(en-US) {}

/* 언어 태그와 활자 하위 태그 사용하는 경우 */
:lang(ja-Kana) {}

데모

다음의 데모를 통해 :lang(콘텐츠 언어) 가상 클래스 선택자의 사용 방법에 대해 확인해 보세요.

HTML 
<p lang="ko">안녕하세요!</p>
<p lang="en-US">Hello!</p>
<p lang="ja-Kana">こんにちは</p>
CSS 
:lang(ko) {
    background-color: red;
}
:lang(en-US) {
    background-color: green;
}
:lang(ja-Kana) {
    background-color: blue;
}
실제 적용된 모습

주요 특징

:lang(콘텐츠 언어) 가상 클래스 선택자에 대한 주요 특징입니다.

lang 속성 기반의 선택자

:lang(콘텐츠 언어) 가상 클래스 선택자는 인수로 주어진 (인간) 콘텐츠 언어를 기반으로 lang 속성과 그 값을 가진 요소를 선택합니다.
즉, lang 속성과 값을 가지는 요소를 선택하며, 이때, lang 속성으로 지정한 값이 유효한 언어 코드일 필요는 없습니다.

예를 들어, :lang(en)은 영어를 지정하는 선택자이고, :lang(en-US)는 미국 영어를 지정하는 선택자입니다. :lang() 선택자는 lang 속성의 값에 기반하여 동작하며, 특정 언어 코드가 포함된 요소를 선택할 때 암시적 와일드카드 매칭(implicit wildcard matching) 이 적용됩니다. 즉, :lang(en)은 en-US, en-GB, en-CA 등 "en"으로 시작하는 모든 언어 태그와 일치하지만, :lang(en-US)는 정확히 "en-US"로 지정된 요소만 선택합니다. 괄호 안에 입력하는 콘텐츠 언어는 대소문자를 구별하지 않습니다.

:lang(콘텐츠 언어) 가상 클래스 선택자는 lang 속성에 의존하는 선택자로, 브라우저가 자동으로 판단하는 기본 언어의 콘텐츠를 가지는 요소를 선택하지 않습니다.

다국어 웹사이트 스타일링

웹사이트의 여러 언어 버전에 대해 서로 다른 스타일을 적용하는 데 유용합니다.

접근성 향상

특정 언어의 텍스트에 적절한 글꼴이나 레이아웃을 적용하여 사용자의 가독성을 높일 수 있습니다.

활용 예제

:lang(콘텐츠 언어) 가상 클래스 선택자는 다국어 사이트에서 언어별 특징에 맞는 스타일링을 하는데 매우 유용합니다.

언어별 font-family 설정

영어와 한국어 등 서양 언어와 동양 언어(예: 일본어, 중국어)는 선호하는 글꼴이 다를 수 있습니다. 이때, :lang(콘텐츠 언어) 가상 클래스 선택자로 언어별 font-family를 설정하는 예제입니다.

CSS 
/* 영어와 서양 언어용 */
:lang(en) {
    font-family: 'Arial', sans-serif;
}

/* 한국어, 중국어, 일본어용 */
:lang(ko),
:lang(zh),
:lang(ja) {
    font-family: 'Noto Sans CJK', sans-serif;
}

기울임체의 적용 유무

한국어, 중국어, 일본어 등은 보통 기울임 글꼴을 사용하지 않습니다. 이들 언어에서는 기본적으로 기울임체(italic) 스타일을 제거하는 것이 좋습니다.

예를 들어, 대부분의 브라우저 기본 스타일시트에서는 <i>, <em>, <dfn> 요소에 font-style 속성이 italic으로 설정되어 있습니다. 이 값을 normal로 지정하여, 해당 언어의 스타일에 맞는 글꼴을 적용할 수 있습니다.

CSS 
/* 한국어, 중국어, 일본어에서 기울임체 제거 */
:where(:lang(ko), :lang(zh), :lang(ja)) :where(i, em, dfn) {
    font-style: normal;
}

코드 부연설명
:where() 함수형 가상 클래스 선택자는 괄호() 안의 선택자 목록 중 하나라도 존재하는지 확인해서 있으면 요소를 선택합니다. 이 선택자는 선택자의 구체성 값에 아무런 영향을 주지 않기 때문에, 기본 스타일(일명 CSS 리셋)을 설정할 때 매우 유용합니다.

한글, 일본어, 중국어에서의 단어 줄 바꿈 설정

한글, 일본어, 중국어에서 가독성을 고려하여 단어가 끊어지는 것을 방지하려면, word-break 속성을 keep-all로 설정하는 것이 좋습니다. 다만, URL 주소나 긴 문자열이 있을 때는 오버플로가 발생할 수 있기 때문에, 이 점을 주의해야 합니다.

CSS 
/* 한국어에서 word-break: keep-all 사용 */
:lang(ko) {
    word-break: keep-all;
}

구문 사용 시 주의할 점

:lang() 가상 클래스 선택자를 사용할 때 구문 사용 시 주의할 점이 있습니다.

:lang(en)와 :lang(en-US)

:lang(en)은 영어를 지정하는 선택자이고, :lang(en-US)는 미국 영어를 지정하는 선택자입니다. :lang(콘텐츠 언어) 선택자는 lang 속성의 값에 기반하여 동작하며, 특정 언어 코드가 포함된 요소를 선택할 때 암시적 와일드카드 매칭(implicit wildcard matching) 이 적용됩니다.

즉, :lang(en)은 en-US, en-GB, en-CA 등 "en"으로 시작하는 모든 언어 태그와 일치하지만, :lang(en-US)는 정확히 "en-US"로 지정된 요소만 선택합니다.

이것은 :lang(ko)와 :lang(ko-KR)에서도 동일하게 적용됩니다.

HTML 
<p lang="ko">한국어 ko입니다.</p>
<p lang="ko-KR">한국어 ko-KR입니다.</p>
CSS 
:lang(ko) {
    border: 2px solid deeppink;
}
:lang(ko-kR) {
    background-color: yellowgreen;
}
실제 적용된 모습

대소문자는 구별하지 않는다.

:lang(ko)와 :lang(KO)은 동일하게 작동합니다.
:lang(콘텐츠 언어) 선택자의 괄호 안에 입력하는 콘텐츠 언어는 대소문자를 구별하지 않습니다.

다음에 사용되는 모든 선택자는 동일하게 작동합니다.

CSS 
:lang(ko-KR) {}
:lang(kO-kr) {}
:lang(Ko-kr) {}
:lang(KO-KR) {}

쉼표로 구분하여 여러 개의 값을 사용할 수 있다?

:lang(콘텐츠 언어) 선택자의 괄호 안에 입력하는 콘텐츠 언어는쉼표(,)로 구분하여 여러 개의 값을 나열할 수 있습니다. 그러나, 브라우저 호환성 문제로 인해 이 방식은 가능한 피하는 것이 좋습니다. 대신 각 언어에 대해 개별적으로 :lang(콘텐츠 언어)를 사용해야 합니다.

비추천 
/* 여러 언어 선택 (비추천) */
:lang(ko, en) {
    font-weight: bold;
}
추천 
/* 각 언어별 개별 지정 */
:lang(ko) {
    font-weight: bold;
}
:lang(en) {
    font-weight: bold;
}

마지막 업데이트 정보: 2025-03-25

:lang() 가상 클래스 선택자의 브라우저 호환성
선택자
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
:lang() 1 12 1 3.1
언어 코드의 쉼표로 구분된 목록 :lang(A, B) 지원하지 않음 지원하지 않음 114 9

명세서

:lang() 가상 클래스 선택자의 명세서 사양
명세서 사양
:lang() Selectors Level 4
#lang-pseudo

참고문헌

같이 보기