HTML, CSS3 추가 규칙

@-Rule

@import

<link rel="stylesheet" href="StyleSheetA.css" />

@import url(StyleSheetA.css);

위 둘은 같음.

@font-face

1 2 3 4 5

@font-face{     font-family: 'font name';     src: url('/content/file.eot');     src: local('');} } Colored by Color Scripter

cs

웹 폰트를 사용하지 못할 때 사용하는 방법.

font-family 는 임의로 적으면 되고,

이 이름에 맞추어 src 에서 들고옴.

url 는 사용자 컴퓨터에 없는 폰트, local 은 있는 폰트를 말함.

@media

1

<link rel="stylesheet" href="StyleSheet.css" media="print"/>

cs

위의 media 에 지정된 디바이스에서만 css 를 적용함.

여러 css 를 가지고 media 만 다르게 해서 사용함

1 2 3 4

<style>         @import url(desktop.css) screen;     @import url(print.css) print; </style>

cs

@import 와도 같이 가능

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

<style>     @media screen and (max-width: 767px) {         html {             background: red;             color: white;             font-weight: bold;         }     }     @media screen and (min-width: 768px) and (max-width: 959px) {         html {             background: green;             color: white;             font-weight: bold;         }     }     @media screen and (min-width: 950px) {         html {             background: blue;             color: white;             font-weight: bold;         }     }     /*가로*/     @media screen and (orientation: portrait) {         html {             background: red;             color: white;             font-weight: bold;         }     }     /*세로*/     @media screen and (orientation: landscape) {         html {             background: green;             color: white;             font-weight: bold;         }     } </style>  Colored by Color Scripter

cs

위를 이용해 반응형 웹도 만들 수 있음.

HTML 조건부 주석

1 2 3 4 5

<!--[if lte IE 8]>         <section>             <div></div>         </section> <![endif]-->

cs

Internet Explore 8 이상일 때 적용한다는 말.

1 2 3 4 5

<!--[if !((IE 9) | (IE 10)) ]>         <section>             <div></div>         </section> <![endif]-->

cs

Internet Explore 9, 10 만 들고 온다는 말.