웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > html

HTML/CSS lang 프로퍼티 및 어트리뷰트 방법 및 예제

Last Modified : 2019-08-06 / Created : 2019-02-27
10,655
View Count

다양한 언어를 제공하기 위한 방법으로 html에서 lang 어트리뷰트를 태그에 사용할 수 있습니다. 동시에 css의 lang 프로퍼티를 사용할 수 있죠. css의 프로퍼티와 html어트리뷰트를 같이 다룬 이유는 둘 다 함께 사용할 수 있기 때문입니다. 왜 그런지도 아래에서 함께 자세히 알아봅니다.


 

# HTML lang attribute


먼저 lang 어트리뷰트를 알아봅니다. 태그에 lang을 사용하면 웹에서 보여질 컨텐츠가 어떤 언어인지 알려주게됩니다. 이때 선택할 언어 코드를 값으로 사용합니다. 간단한 문법은 아래와 같습니다.

<html lang="ko">
 
매우 자주 볼 수 있는 코드로 여기서 ko는 korean인 한국어를 의미합니다. 위와같이 주로 태그의 제일 상위의 html 태그에 사용하였지만 어떤 태그에 사용하던 모두 가능합니다. 다만 페이지가 로딩될 때 가장 상위이면서 부모 객체인 html에 많이 사용됩니다. 몇 가지 예를들어보면 설정된 언어는 아래와 같습니다.

한국어 : ko
영어 : en
일본어 : ja
스패니쉬 : es


! 언제 html 태그에 lang을 사용하는가?


lang을 사용하는 가장 큰 이유는 무엇일까요? 가장 먼저 웹접근성(Web Accessibility)을 준수하기 위함입니다. lang을 사용할 경우 브라우저 및 접근성 도구 등에 어떤 언어로 사용되었는지 알려줄 수 있습니다. 예를들어 영어로 된 컨텐츠인 경우 lang 속성을 사용하면 리더기에서 현재 언어가 영어로 되어 있음을 미리 알고 얘기해줄 수 있게됩니다.

웹접근성은 필수적이고 사용자 입장의 목적이라면 웹사이트 운영자 입장에서는 검색엔진최적화(seo)와 css의 언어 설정의 목적 두 가지를 생각해볼 수 있습니다. 먼저 검색엔진최적화는 다양한 언어가 사용될 경우에 특히 중요합니다. 많은 웹사이트에서 다국어 서비스를 제공하는 경우 웹의 html 태그에 lang 어트리뷰트를 사용하고 있습니다. 아무리 한국어를 사용하고 있는 웹사이트라도 lang 속성이 적용되지 않았다면 중간중간 영어 등의 다른 언어도 사용될 수 있으므로 검색엔진이 크롤링할 경우 어떤 언어인지 확실하게 파악하기는 어려울 수 있습니다. 그래서 lang이 반드시 필요합니다.

마지막으로 css에 특정 스타일을 적용하기 위한 목적을 빼놓을 수 없습니다. 이 부분은 예제와 함께 아래에서 더 알아봅니다.


! css에 lang 프로퍼티 사용하기


css에는 lang이라는 프로퍼티(property)가 존재합니다. 이 프로퍼티는 css 선택자 중 하나로 html 어트리뷰트 lang이 적용된 태그와 하위 요소에만 스타일을 적용하게 해줍니다.
이때 기본적인 문법은 아래처럼 적용할 수 있습니다.

:lang(ko) { color: red; }


위 코드를 살펴보면 괄호 안에는 찾을 언어를 입력합니다. 그러면 해당하는 lang이 적용된 엘리먼트를 찾아 {} 안에 적용된 스타일을 적용합니다. 여기서는 color를 red로 적용하게 될 것입니다.

사용할 때는 앞에서 알아본 것처럼 lang을 html에만 선언하고 적용할 수 있습니다. 아래 코드를 봐주세요.
<html lang="ko">

위 코드는 html에 lang 값이 ko인 한국어로 설정되었습니다. 만약 다음과 같이 css가 설정된 경우에는 폰트가 한글폰트 하나만 적용될 것입니다.
html { font-family: 아무폰트; }
:lang(ko) { font-family: 한글폰트; }

즉 어떤 폰트를 사용할 것인지를 언어에 따라 선택할 때 css lang을 사용하면 편리합니다.



# CSS lang으로 여러 언어에 다른 폰트 적용하기


위 예제는 한 가지 언어라 어떤 장점이 있는지 명확하지 않지만 세 가지 언어를 사용한다면 어떨까요? 만약 영어, 한국어, 일본어를 모두 사용하는 웹사이트가 있습니다. 이때 각각 다른 폰트를 사용하는 방법으로 아래와 같이 css를 사용할 수 있습니다.
html { font-family: 아무폰트; }

:lang(ko) { font-family: 한글폰트; }
:lang(en) { font-family: 영문폰트; }
:lang(ja) { font-family: 일본폰트; }

이제 html의 lang이 어떤 값이냐에 따라서 css에 따라 각각 다른 폰트를 적용하는 것이 가능합니다. 매우 간단하게 적용할 수 있죠.


! 한 언어에 두 가지 이상의 폰트를 사용하는 경우

좀 더 어려운 방법을 알아봅니다... 만약 같은 영어라도 두 가지 폰트가 혼용되어 함께 사용된다면 폰트 설정을 어떻게 해야할까요? 쉽게 두꺼운 폰트와 얇은 폰트 두 가지를 모두 사용하는 경우가 될 것입니다. 이 경우 생각처럼 쉽지 않은 이유가 있는게 해당 폰트는 그 언어에서만 적용되어야하기 때문입니다. 예를들어 한국어로 설정된 경우에는 그 폰트가 적용되면 안되도록 해야합니다.

해결방법은 이처럼 두꺼운 폰트가 필요한 곳의 css 선택자 앞에 html:lang()을 추가하는 것입니다. 이처럼 선택해야만 원하는 언어에서만 폰트를 다양하게 설정할 수 있습니다.
<html lang="en">
  <body>
    일반폰트입니다.
    <h3 class="title">두꺼운 영어 폰트</h3>
  </body>
</html>

위 예제에서 두꺼운 영어 폰트 부분만 다른 폰트를 적용해보겠습니다.
:lang(en) { font-family: 영어폰트; }
:lang(en) .title { font-family: 두꺼운영어폰트; }

이제 실행하면 영어인 경우에만 '두꺼운영어폰트'가 사용되어 나타나게 됩니다.


! css 반드시 특정 언어로 나타나야하는 경우


아래 방법은 알아두시면 매우 좋습니다. 만약 한글임에도 특정 컨텐츠 영역이 영어로 표시되야한다면? 이 경우 어떻게 하면 될까요? 방법은 해당 엘리먼트에 언어 선언을 추가로 해주는 방법입니다.
<html lang="ko">
  <body>
    Hello!!
    <span lang="en">My Title</span>
  </body>
</html>

이처럼 해당 엘리먼트에 lang을 직접 선언하여 css 선택자에 우선순위를 더 높게 부여할 수 있습니다. 다국어를 사용할 때 많이 사용됩니다.


여기까지 html과 css의 lang을 사용하는 방법에 대하여 다양하게 알아보았습니다.

Previous

HTML form태그를 사용하여 입력폼 만들기 및 예제

Previous

[html] base 태그 사용 방법 알아보기