CSS3 미디어 쿼리

참고 사이트: NULI - CSS3 media query에 대하여

참고 사이트: hardboiled_css3_media_queries


CSS3의 미디어 쿼리를 이용하여 responsive 웹 디자인 페이지를 제작할 수 있습니다. responsive 웹 디자인은 각 브라우저의 해상도에 따라 웹 페이지의 디자인이 벼경되는 동적인 페이지를 말합니다. 간단한 예를 들면 모바일 웹 페이지를 가로로 볼 때와 세로로 볼 때의 디자인을 변경할 수 있는 것입니다. 다음은 stuffandnonsense(www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries)에서 소개하는 샘플 코드입니다. '/* Styles */' 부분에 다른 소스를 넣어서 테스트를 해보겠습니다.



일반적인 모바일 웹 페이지의 가로 및 세로 비율 설정

<style> 태그 안에서 설정하는 경우

							/* Smartphones (portrait and landscape) ---------------- */
							@media only screen 
							and (min-device-width : 320px)
							and (max-device-width : 480px) {
								/* Styles */
							}
						

CSS 파일을 만들어서 설정할 경우

							<link rel="stylesheet" href="smartphone.css" media="only screen and (min-device-width:320px) and (max-device-width: 480px)" />
						


일반적인 모바일 웹 페이지의 세로 비율 설정

<style> 태그 안에서 설정하는 경우

							/* Smartphones (portrait) ---------------- */
							@media only screen 
							and (max-width : 320px) {
								/* Styles */
							}
						

CSS 파일을 만들어서 설정할 경우

							<link rel="stylesheet" href="smartphone_portrait.css" media="only screen and (max-width:320px)" />
						


일반적인 모바일 웹 페이지의 가로 비율 설정

<style> 태그 안에서 설정하는 경우

							/* Smartphones (landscape) ---------------- */
							@media only screen 
							and (min-width : 321px) {
								/* Styles */
							}
						

CSS 파일을 만들어서 설정할 경우

							<link rel="stylesheet" href="smartphone_landscape.css" media="only screen and (min-width : 321px)" />