외부 스타일시트의 미디어 종류

So-Basic 테마의 CSS는 공개용의 경우 screen과 print용 2종류의 미디어 형식으로 배포되고 있지만, 내가 사용하고 있는 것은 오직 screen용 하나뿐이다. 솔직히 프린트용 외에는 별도의 CSS의 필요성을 느끼지 못했던 나였지만, TJpak님께서 Hooney.net 블로그를 PDA에서 테스트한 글을 보고 인식이 많이 바뀌게 됐다. 특히 Eric Meyer의 Cascading Style Sheets, 2nd Edition라는 책을 보면서 외부 스타일시트의 미디어 종류와 역할 등을 자세히 알게됐다.

외부 스타일시트를 웹문서에 연결할 때 사용하는 코드 :

외부 스타일시트의 미디어 종류 :

all
모든 미디어 속성에 사용. 별도로 지정하지 않으면 기본값으로 사용.
aural
발음 장치, 스크린 리더기, 그 외의 다른 오디오 문서 해석 장치에 사용
braille
점자용 화면에 사용
embossed
점자용 프린트에 사용
handheld
핸드폰이나 PDA와 같은 휴대용 디지털 기기에 사용
print
프린트하거나 프린트 미리보기에 사용
projection
프로젝터에 사용
screen
웹브라우저에 사용
tty
고정폭 문자열을 가지는 장치용 (텔레타이프, 터미널, 저사양의 휴대용 기기 등). tty 미디어 타입의 경우 픽셀 단위를 사용하면 안됩니다.
tv
TV에 사용

외부 스타일시트의 미디어 종류를 다수로 설정 :

또한 Alternate 스타일시트를 사용하면 별도의 자바스크립트를 사용하지 않고도 스타일시트를 교체해서 사용할 수 있다. FF, Mozila, Opera처럼 최근에 나온 웹브라우저는 Alternate 스타일시트를 지원하고 있다. 사용자들이 이런부분에 익숙해진다면, 별도의 자바스크립트를 사용하는 일이 적어질 것이다. 먼저 IE6에서 벗어나야만 이런 기능을 느낄 수 있을 것이다.

Alternate 스타일시트 사용 :

//큰글씨로 보여주는 CSS
> //작은글씨로 보여주는 CSS

Alternate 스타일시트 사용예 : (일몰님 블로그)
일몰님 블로그

개인적으로 글씨 크기를 제어하는 CSS를 별도로 제작하는 것보다는 브라우저에서 ctrl + 마우스휠을 위아래로 이동시키거나, 모질라 계열 브라우저에서 ctrl + +, – 키를 누르는 것을 알려주는 편이 더 좋을 것 같다. 굳이 별도의 CSS를 제작한다면 낮/밤의 시간별이나 계절별, 또는 날씨별로 제작하는 것이 효율적일 것 같다.



6개의 의견이 있습니다. | 당신의 의견을 바랍니다.

  1. 1. Gravatar Hooney | 2005.06.27 , 오후 05:04 · permallink

    dd, dl, dt를 첨으로 사용해본 글입니다. wp의 퀵태그를 수정해서 alt + 1.2.3으로 지정해서 사용하니 무척 편합니다. 예전에 쓴 글들도 경우에 따라 ul을 dl로 수정해야 겠습니다. ㅎㅎ

  2. 2. Gravatar 지윤 | 2005.06.27 , 오후 09:38 · permallink

    제 생각은 조금 다릅니다만, 양손이나 양발, 혹은 손가락 전체를 사용하기 힘든 장애인을 위해서 기본 브라우저에서 제공하는 글꼴 크기 변경 보다는 CSS를 제공하는게 더 나을거 같아요.

  3. 3. Gravatar Jay | 2005.06.27 , 오후 10:54 · permallink

    손이 불편한 사람들에게 브라우저 자체의 기능과 스타일로 제공되는 기능의 차이점은 단축키 사용가능유무정도 아닐까요?

    손이 불편하다면 당연히 음성명령시스템을 사용할텐데 그렇게 본다면 꼭 필요한 기능은 아닐거라는 단순한 생각이 듭니다.

    오히려 시각장애인을 위한 배려가 첫번째에 와야한다고 봅니다. 콘트라스트를 높인다던지 색약자를 위한 컬러라든지말이죠.

    그러고보니 제 블로그는 글자단위는 px에다가 시각장애인에게는 멀미를 동반시킬수 있는 위험천만한 곳이네요 ;;;
    귀찮으니까 패스 -ㅂ-

  4. 4. Gravatar Hooney | 2005.06.28 , 오전 12:00 · permallink

    제가 관련 이미지를 이제서야 올립니다.

    지윤 : Alternate 스타일시트는 기본브라우저에서 지원하는 기능이 아닌, 인식할 수 있는 기능입니다.

    물론, CSS를 별도로 지정해야만 익식할 수 있겠죠? 특히 다른 브라우저는 ctrl + + 키를 글씨 크기만 확대하지만, 오페라는 화면 전체를 확대해준답니다.

    Jay :시각장애인이 사용하는 스크린리더기는 별도의 CSS를 지정하지 않더라도, HTML 마크업과 특히 title 태그를 훌륭하게 읽어준다고 하더군요.

    중첩 테이블과 비표준 태그들로 만들어진 웹문서는 J님 말처럼, 멀미를 준다고 하더군요. 웹표준을 더욱 신경써야 할 이유라고 생각합니다. :)

  5. 5. Gravatar 일모리 | 2005.06.28 , 오후 03:03 · permallink

    개인적으로 글씨 크기를 제어하는 CSS를 별도로 제작하는 것보다는 . . .ctrl + +, – 키를 누르는 것을 알려주는 편이 더 좋을 것 같다.

    흑… 죄송합니다. 심플모드 제공은 편법임을 알려드립니다…. 흑흑…..

  6. 6. Gravatar Hooney | 2005.06.28 , 오후 11:31 · permallink

    심플모드를 제공하는 것은 결코 편법이 아닌, 오히려 장려사항일 것 같아요. 프린트나 핸드폰, PDA용 스타일쉬트는 가급적 만드는 것이 좋을 것 같습니다.

    다만, Ctrl (+) +, – 버튼의 사용은 좀 더 편리한 웹서핑을 위한 팁일 뿐이랍니다. ^^;

당신의 의견을 바랍니다..

사용할 수 있는 HTML 태그 : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Aboout Author

조훈 Hooney라는 ID로 온라인에서 활동하는 조훈입니다.
자세히 보기 »

CSS Reference

Hooney와 함께 만드는 CSS Reference!


Be Friend~! Be Friend~!