장치 별로 다른 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
- 간단한 네비게이션 : 텍스트 링크 위주로
- 폰트사이즈, 마진, 패딩 축소
- 컬럼 레이아웃이 무시될 수 있으므로, 엘리먼트 순서화
- 가능한 한 많은 장치에서 테스트
<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 : 텔레비전 같은 장비
미디어 종류를 근거로 해서 적합한 스타일 시트를 찾는 것은 브라우저의 역할
- 배경은 흰색, 폰트는 12pt, serif
- 필요없는 것은 display:none;
- 적절한 너비
handheld
- 간단한 네비게이션 : 텍스트 링크 위주로
- 폰트사이즈, 마진, 패딩 축소
- 컬럼 레이아웃이 무시될 수 있으므로, 엘리먼트 순서화
- 가능한 한 많은 장치에서 테스트



덧글