CSS 규칙

CSS 규칙에 관한 강의를 들었다.

@import, @media, 웹폰트에 대한 내용이었다. 강사님은 이 중에서 @media 가 가장 중요한 내용이며, 반응형 HTML 을 작성하는데 중요한 규칙이라고 언급했다.

반응형 HTML 은 하나의 HTML 을 작성해서 같은 내용을 상황에 따라 거기에 맞는 형태로 보여줄 수 있는 것을 의미한다. 즉, HTML 을 하나 작성해서, PC 용, 모바일 장치용, 태블릿 용, 장애인을 위한 소리 표현, 프린트를 하기 위한 용도 등으로 다르게 표현할 수 있는 개념이다. 그러나, 강의를 끝까지 들어봤지만, PC 용, 모바일 장치용, 태블릿 용 구분에 대한 설명은 듣지 못했다. 요즘 그런 개념으로 나온 HTML 문서가 많이 서비스 되고 있는 것 같은데 어떤 방법으로 가능한 것인지에 대한 설명이 없어서 좀 아쉽다.

@import 는 C/C++ 에서 말하는 #include 와 유사하다. 이 "포함" 의 기능을 구현하는 방법이 하나 더 있는데, HTML 문서의 <script> 태그 밖에서 <link > 를 이용하는 방법이다. 여러 가지 방법을 알아 놓고 있으면, 유연하게 사용할 수 있으니깐 기억해두는 것도 좋을 것 같다.

사용 예를 하나 기록해두면 쉽게 파악할 수 있을 것 같다.

1. <link ret="stylesheet" href="title.css" />
2. @import url('title.css')

@import 라는 선언이 CSS 파일의 포함의 기능으로 더 한정되어 있기 때문에, 표현도 간단하고, 사용 의도도 명확히 할 수 있는 것 같다.

@media 규칙도 @import 규칙과 유사하게 <link> 를 이용해서 동일한 상황에서 구현이 가능하다. 요것도 사용 예를 정리해둬야 겠다.

1. @media screen { ... }
2. <link rel="stylesheet" href="content_pc.css" media="screen" />

screen 에 대한 media 로 CSS 를 정의하도록 되어 있는데, 내부에 @import 를 사용할 수 있는지에 대한 여부는 확인을 해봐야 할 듯 하다. 강사님 얘기로는 후자의 방법이 과거의 방법이고, 전자는 요즘 각광받고 있는 방법이라고 한다. 앞서가는 사이트들의 소스들을 좀 보면 감이 좀 오려나?

media 로 지정할 수 있는 값들이 몇 가지 있었는데, 다음과 같다.

all, aural, braille, handheld, print, projection, screen, TV, embossed

handheld 는 과거에 Portable Device 용을 위한 것이라고 한다. 그렇다면 지금의 핸드폰이나 태블릿을 위한 media 는 무엇이란 말인가? 없다면 어떻게 반응형 HTML 을 만든다는 것인가?

웹폰트는 어떤 server 에 font 를 저장해 두고, download 해서 사용할 수 있도록 하는 방식을 말한다. google 이나 naver 에서 공개용 웹폰트를 많이 지원한다고 한다.

사용하기 위해서는 <link> 를 이용하면 된다. CSS 규칙에 대해서 설명하는 강의 내용이었는데 오히려 <link> 태그의 유용성을 확인시켜주는 내용 같다는 생각을 잠시 했다.

사용 예를 하나 정리해두면, 

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

"역시, 구글이다" 싶다. 

구글 사이트에서 웹폰트 관련해서 확인하는 방법도 알 수 있었는데, 다음 사이트에 접속해보면 된다.

http://www.google.com/fonts