[css2] :lang 가상 클래스
:lang() 가상클래스는 요소가 특정 언어를 사용할때 적용됩니다.
주로 언어에 따라, 글꼴, 글꼴 크기 등을 다르게 적용하기 위해 사용 합니다.
:lang()의 괄호 안에는 언어코드가 들어갑니다. :lang(en)처럼...
언어 코드는 html4.0명세에 지정되는데 보통 2 문자의 약자입니다.
예: fr=French, ca=Canadian, de=German, en=English, kr=Korean
문서의 언어는 lang=" " 속성이나 , <meta>요소 정보, 또는 http header같은 프로토콜의 조합으로 결정됩니다
▶ :lang 가상클래스 문법
:lang(언어 코드){속성:속성값;}
▶ 브라우저 지원 여부
ie8.0+, chrome 4.0+, ff 2.0+, safari 3.1+, opera 9.6+
*ie8은 독타입 선언해야 함
▶html/css 작성 예를 보겠습니다
lang.htm
html
<h3>Chapter 1</h3>
<p>Once when I was six years old I saw a magnificent picture in a book,
called True Stories from Nature, about the primeval forest.
It was a picture of a boa constrictor in the act of swallowing an animal.
Here is a copy of the drawing. </p>
<p lang="kr"> 여섯 살 적에 원시림에 대한 자연실화라는 책에서 굉장한 그림을 보았다.
동물을 막 삼키고 있는 보아구렁이 그림이었다. 이것이 그 그림의 복사본이다.</p>
<h3>Chapter 2</h3>
<p>So I lived my life alone, without anyone that I could really talk to,
until I had an accident with my plane
in the Desert of Sahara, six years ago.
Something was broken in my engine.
</p>
<p lang="kr">그래서 나는 육년 전, 사하라 사막에서 비행기 사고가 날 때까지
진심으로 이야기를 나눌 사람 없이 혼자 살았다. 엔진에 무언가 고장이 났던 것이다.<p>
</body>
css
[lang |= "kr"]{font: italic 0.9em/1.5 'Nanum Gothic', serif;color:blue;}
영어로 쓰인 부분은 verdana 글꼴에 글꼴 크기 1em, 줄간격 1.3으로 지정했고
한국어로 쓰인 부분은 나눔고딕에 이탤릭체 0.9크기이며, 줄간격은 1.5, 색깔은 파란색입니다.
▶실행 화면
위 css 예시에서, :lang() 선택자와, 속성 선택자 [lang|=""] 을 함께 사용했는데
두 선택자는 비슷하지만 차이점이 있습니다.
:lang() 가상 클래스와 속성 선택자 [lang|=""] 차이
○ 같은점: 속성값이 특정 언어이거나, 하이픈이 들어간 언어일 때
(예: "en" 이거나 "en-" )
○ 차이점:
브라우저마다 주어진 요소의 언어를 결정할 때 다른 방법을 사용하기도 한다 합니다.
:lang() 가상 클래스는 문서 구조에 기반하여 언어를 결정하며
속성 선택자는 문서의 구조에 기반하지 않고, 주어진 속성의 요소만을 체크하여 결정합니다.
예:
<body lang="en">
<p>내용</p>
</body>
:lang(en){color:red;) 는 body와 p에 빨간색 글씨로 표시함
[lang|="en"](color:red;)는 오직 body에만 빨간색 글씨로 표시함. p에 영향을 미치지 않음.
http://www.w3.org/International/questions/qa-css-lang
링크 가상 클래스(:link, :visited,:hover, :active)
[css3] :enabled :disabled 가상 클래스
'css' 카테고리의 다른 글
| [css3] :nth-child() 가상 클래스 (1) | 2014.11.11 |
|---|---|
| [css3] :root 가상 클래스 (0) | 2014.11.10 |
| [css3] :checked 가상 클래스 (0) | 2014.11.06 |
| [css3] :enabled :disabled 가상 클래스 (0) | 2014.11.05 |
| [css3] :target 가상 클래스 (0) | 2014.11.04 |
댓글