본문 바로가기
css

[css2] :lang 가상 클래스

by 지구별에 2014. 11. 7.
반응형

 

 

[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

<body lang="en">
<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(en){font: 1em/1.3 verdana, "Times New Roman", sans;}
[lang |= "kr"]{font: italic 0.9em/1.5 'Nanum Gothic', serif;color:blue;}

 

영어로 쓰인 부분은 verdana 글꼴에 글꼴 크기 1em, 줄간격 1.3으로 지정했고

한국어로 쓰인 부분은 나눔고딕에 이탤릭체 0.9크기이며, 줄간격은 1.5, 색깔은 파란색입니다.

 

▶실행 화면

 

위 css 예시에서, :lang() 선택자와, 속성 선택자 [lang|=""] 을 함께 사용했는데

 

[css2/3] 속성 선택자

 

두 선택자는 비슷하지만 차이점이 있습니다.

 

:lang() 가상 클래스와 속성 선택자  [lang|=""] 차이

 

○ 같은점: 속성값이  특정 언어이거나, 하이픈이 들어간 언어일 때

(예: "en" 이거나 "en-" )


○ 차이점:

 

브라우저마다 주어진 요소의 언어를 결정할 때 다른 방법을 사용하기도 한다 합니다.


:lang() 가상 클래스는 문서 구조에 기반하여  언어를 결정하며


속성 선택자는 문서의 구조에 기반하지 않고, 주어진 속성의 요소만을 체크하여 결정합니다.

 

예:


<body lang="en">
  <p>내용</p>
</body>

 

:lang(en){color:red;)  는 body와 p에 빨간색 글씨로 표시함


[lang|="en"](color:red;)는 오직 body에만 빨간색 글씨로 표시함. p에 영향을 미치지 않음. 

 

  참조: http://stackoverflow.com/questions/8916360/whats-the-difference-between-htmllang-en-and-htmllangen-in-css

 

http://www.w3.org/International/questions/qa-css-lang 

 

링크 가상 클래스(:link, :visited,:hover, :active)

 

자손 선택자, 자식 선택자 차이

 

css 선택자, 선택자 종류와 사용법

 

[css3] :enabled :disabled 가상 클래스

 

[css3] :target 가상 클래스

 

반응형

'css' 카테고리의 다른 글

[css3] :nth-child() 가상 클래스  (1) 2014.11.11
[css3] :root 가상 클래스  (0) 2014.11.10
[css2] :lang 가상 클래스  (0) 2014.11.07
[css3] :checked 가상 클래스  (0) 2014.11.06
[css3] :enabled :disabled 가상 클래스  (0) 2014.11.05
[css3] :target 가상 클래스  (0) 2014.11.04

댓글0