[CSS3] CSS3의 import, media, 웹폰트

1. @import : 외부의 CSS파일을 사용할 때 이용한다. <link>를 이용한 외부 태그를 더 많이 씀;

ex) <link rel="stylesheet" href="title.css"/>

ex) @import url('title.css');

**@import는 <style>태그의 내부 최상단에 위치해야한다.

2.@media : 하나의 HTML 문서를 다양한 장치에서 서로 다르게 CSS 설정을 할 수 있는 기능 제공

ex) <link rel"stylesheet" href="content_pc.css" media="screen"/>

ex) <link rel"stylesheet" href="content_pc.css" media="print"/>

ex) @media screen {

......

}

**하나의 웹문서가 다양한 장치에서 출력될때 쓴다. PC와 프린트에서 각각 어떻게 출력되는지 차이를 만들 수 있다.

미디어 종류

all : 모든 미디어 타입

aural : 음성합성장치

braille : 점자표시장치

handheld : 손으로 들고 다니면서 볼 수 있는 작은 스크린에 대응하는 용도

print : 인쇄 용도

projection : 프로젝터 표현 용도

screen : 컴퓨터 스크린을 위한 용도

tv : 음성과 영상이 동시 출력되는 TV와 같은 장치

embossed : 페이지에 인쇄된 점자 표시 장치

3.웹폰트 : 인터넷만 연결되어 있다면, 다양한 폰트를 웹사이트 방문자에게 제공할 수 있도록 고안된 폰트, 웹사이트 방문시 웹폰트를 다운받아 구성

ex) <link href='http://fonts.googleapis.com/css?family=Poiret+One' rel = 'stylesheet' type='text/css'>