내멋대로 해라

icehan.egloos.com

포토로그



<link>의 media type 지정 tip&tech

장치 별로 다른 css를 적용하고 싶을 때 사용한다.

<link type="text/css" rel="stylesheet" href="lounge-screen.css" media="screen" />
<link type="text/css" rel="stylesheet" href="lounge-print.css" media="print" />
<link type="text/css" rel="stylesheet" href="lounge-mobile.css" media="handheld" />

종류는 다음과 같음. W3C Media Types
all : 모든 종류의 장비
aural : 목소리나 사운드에 대한 장비
braille : 점자 피드백 장비
embossed : 페이지 점자 프린터
handheld : 소형 또는 휴대용 장비
print : 프린터
projection : 슬라이드 같은 프리젠테이션
screen : 컴퓨터 화면
tty : 텔레타이프나 터미널 같은 고정간격 글자를 사용하는 미디어장비
tv : 텔레비전 같은 장비

미디어 종류를 근거로 해서 적합한 스타일 시트를 찾는 것은 브라우저의 역할

print
 - 배경은 흰색, 폰트는 12pt, serif
 - 필요없는 것은 display:none;
 - 적절한 너비

handheld
 - 간단한 네비게이션 : 텍스트 링크 위주로
 - 폰트사이즈, 마진, 패딩 축소
 - 컬럼 레이아웃이 무시될 수 있으므로, 엘리먼트 순서화
 - 가능한 한 많은 장치에서 테스트

덧글

댓글 입력 영역