Gitsunmin

TIL

TIL
(=Today I Learned)

Pseudo Class Lang

:lang 선택자란?

CSS의 :lang 선택자는 HTML 문서에서 lang 속성으로 지정된 언어 코드에 따라 요소를 스타일링하는 데 사용됩니다. 이는 다국어 웹사이트에서 특정 언어로 작성된 콘텐츠에 대해 적절한 스타일을 적용할 때 유용합니다.

:lang 선택자 사용법

:lang 선택자는 다음과 같은 구문을 가집니다.

:lang(언어코드) {
  /* 스타일 속성 */
}

여기서 언어코드는 ISO 639-1 언어 코드로 표현되며, 언어를 식별하는 역할을 합니다.

예시: 다국어 웹사이트에서의 사용

다음은 간단한 다국어 웹사이트의 예시를 통해 :lang 선택자의 활용을 보여드리겠습니다.

HTML 코드:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Gitsunmin</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1 lang="en">Welcome to our website!</h1>

    <h1 lang="ko">안녕하세요!</h1>
    <p lang="ko">안녕히계세요!</p>
  </body>
</html>

CSS 코드 (styles.css):

:lang(en) {
  color: blue;
  font-weight: bold;
}

:lang(ko) {
  color: green;
  font-style: italic;
}

이 예시에서는 영어로 작성된 요소에는 파란색 글자와 굵은 글꼴이 적용되며, 한국어로 작성된 요소에는 초록색 글자와 이탤릭체가 적용됩니다. :lang 선택자를 사용하여 각 언어에 맞는 스타일을 지정함으로써 사용자가 언어에 따라 다른 스타일을 보게 됩니다.

이렇게 다국어 웹사이트에서 :lang 선택자를 활용하면 사용자 경험을 개선하고, 다양한 언어로 작성된 콘텐츠를 더욱 뚜렷하게 표현할 수 있습니다.