유군 블로그 - 즐거운 세상

미디어 타입 종류

• all : 모든 미디어 타입
• aural : 음성 합성 장치
• braille : 점자 표시 장치
• handheld : 손으로 들고 다니면서 볼 수 있는 작은 스크린에 대응하는 용도
• print : 인쇄 용도
• projection : 프로젝터 표현 용도
• screen : 컴퓨터 스크린을 위한용도
• tty : 디스플레이 능력이 한정된, 텔렉스(teletype), 터미날, 또는 수동 이동 장치 등, 고정 피치(fixed-pitch:폭이 일정) 글자를 사용하는 메디아를 위한 의도 “tty” 메디아 타입에서 제작자는 픽셀(pixel) 단위를 사용하여서는 안됨
• tv : 음성과 영상이 동시 출력되는 TV와 같은 장치
• embossed : 페이지에 인쇄된 점자 표지 장치

미디어 타입 적용 예 1 – CSS 파일에서 선언

/*
	max-width : 600px
	600px 보다 작을 경우 적용되는 스타일 선언
*/
@media screen and (max-width:600px){
	body{background:red;}
}

/*
	min-width : 900px;
	900px 보다 큰 경우 적용되는 스타일 선언
*/
@media screen and (min-width:900px){
	body{background:blue;}
}

/*
	max-device-width:480px
	접속 장치의 최대 넓이가 480px인 경우 적용되는 스타일 선언
	아이폰 3GS
*/
@media screen and (max-device-width:480px){
	body{background:orange;}
}

/*
	-webkit-min-device-pixel-ratio: 2
	아이폰 4, 아이폰 4S에 적용되는 스타일 선언
*/
@media screen and (-webkit-min-device-pixel-ratio: 2){
	body{background:yellow;}
}

/*
	(min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape)
	아이패드 (landscape)에 적용되는 스타일 선언
*/
@media screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape){
	body{background:green;}
}

/*
	(min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait)
	아이패드 (portrait)에 적용되는 스타일 선언
*/
@media screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait){
	body{background:violet;}
}

미디어 타입 적용 예 2 – link 태그를 이용한 선언

미디어 타입 적용 예 3 – style 태그를 이용한 선언