HTML 언어별 CSS 적용하기

HTML/CSS2013. 8. 10. 19:02

다국어 문서로 된 HTML 파일의 CSS를 만들 때 언어별로 글꼴이나 글자 크기 또는 글자 모양을 다르게 하고 싶을 때가 있습니다.

물론 span 태그를 사용해서 일일이 클래스를 지정해 줄 수도 있겠지만, 이럴 때는 lang 속성을 응용해 주면 쉽게 해결할 수 있습니다.

lang 속성의 경우 html 태그 뿐만 아니라 h1, h2와 같은 heading 태그, div, p, span 등의 다른 태그에도 사용이 가능합니다.

일단 이 포스트에서는 예제로 p 태그를 가지고 연습해 보도록 하겠습니다.

일단 각자 좋아하는 텍스트 편집기를 띄워 기본적인 HTML 형태를 준비 (앞서 소개했던 Emmet을 쓰시면 간편합니다.)해 주시고,

body 태그에 아래와 같이 각각의 p 태그에 한글 문장과 영어 문장을 씁니다.

그 뒤에 영어 문장의 p 태그는 lang 속성을 추가해 주고, 속성 값으로 영어의 언어 코드인 en을 넣습니다.

<p>이 문장은 한국어 문장입니다.</p>
<p lang="en">This paragraph is written in English</p>

그리고 CSS는 다음과 같이 lang 셀렉터를 이용합니다. 일단은 연습이니 별도의 css 파일 없이 style 태그 내에 바로 입력하겠습니다.

lang 셀렉터는 반드시 괄호 안에 언어 코드를 넣어줘야 합니다. 별도로 글꼴을 구분해 줄 언어는 영어이니 괄호 안에 en을 넣어 주고,

한국어 텍스트에는 말군맑은 고딕 (Malgun Gothic)과 굴림, 영문 텍스트에는 Segoe UI와 Verdana 글꼴을 지정합니다.

* 주의 : 글꼴 이름에 공백이 들어가는 경우에는 반드시 '이나 "으로 글꼴 이름을 묶어줘야 합니다.

또한 다른 스타일이 적용되는 것을 쉽게 눈으로 확인할 수 있도록 영문 텍스트 스타일에는 font-weight:bold 를 넣어
글자 크기를 굵게 해 줍니다.

	<style>
		p {font-family: "Malgun Gothic", Gulim;}
		p:lang(en) {font-family: "Segoe UI", Verdana;font-weight:bold;}
	</style>

최종 코드는 아래와 같습니다 (필자는 HTML 5로 작업).

모두 입력이 끝났다면 html 파일로 저장한 뒤에 브라우저에서 띄워 봅니다.

이 문장은 한국어 문장입니다.

This paragraph is written in English

저장한 파일을 띄워보면 위와 같이 영문 문장은 맑은 고딕 또는 굴림이 아닌 Segoe UI나 Verdana 글꼴로
뜨는 것을 보실 수 있습니다. 또한 비교를 위해 글자를 굵게 만들었던 것도 영문에만 제대로 적용되어 나오는 것을 볼 수 있습니다.

그럼 언어별로 쉽게 스타일을 적용하고 관리하는 데 조금이나마 도움이 되었기를 바라며 끝을 맺도록 하겠습니다.

마지막으로, 각 언어별 코드는 아래 참고 자료를 활용하시면 됩니다.

* 참고 자료

lang 속성에는 2~3자리 언어별 코드 및 세부 방언 또는 지역 코드가 들어갈 수 있습니다.

IANA에서 확정한 2~3자리 언어별 코드는 [여기]를 눌러서 확인하실 수 있습니다. 다음 표는 주요 언어별 코드입니다.

Project Crestia