media query(미디어 쿼리)란?
반응형 웹을 구현하는 CSS Technique이며, 사용자의 디바이스에 따라 각각 다른 스타일시트를 적용하게 하는 것.
이번 글에서는 사용자의 환경에 따라 각각 다른 스타일시트를 적용시킬수 있는 media-query에 대해 배워보도록 하겠습니다.
media-query의 적용 방법
1. 마크업에서 css파일 분기하기
스타일 시트 파일을 분기하여 마크업에서 화면 렌더링 시 조건에 맞는 CSS파일을 불러오는 방법입니다.
사용자의 스크린 width가 480미만일 때 CSS파일을 가져와 적용시킨다.
media="screen and (max-width:480px) <link rel="stylesheet" media="screen and (max-width:480px)" href="example.css">
2. <style>태그 내에서 media 사용하기
<style>태그내에서 media-query를 사용하는 방법으로 style 태그 내에서 조건에 맞을 경우 css를 로딩할수 있습니다.
<style type="text/css" media="screen and (max-width:480px)">
.h2 {color:#ccc;}
</style> 3. CSS내에서 @media-query 사용하기
CSS내에서 @media 를 사용해 조건이 맞으면 CSS파일을 적용시킵니다.
@media only screen and (max-width: 480px) {
body {
background-color: red;
}
}media-query 작성법
@media only|not 미디어유형 and| (조건문width:500px){적용할CSS}- only 키워드는 미디어쿼리를 지원하는 브라우저에서만 미디어쿼리를 해석하게한다.
- not 키워드는 not 다음에 따라오는 조건을 부정하는 키워드 (ex: not tv 는 tv를 제외한 모든 미디어)
- and 키워드는 앞뒤 조건이 모두 사실일때, 콘마는 앞뒤 조건이 하나라도 사실인 경우를 의미.
- 조건문은 조건문이 사실일때를 의미, and나 콘마를 이용하여 두가지 이상 작성이 가능하다.
- 모든 조건문에는 min-, max- 옵션을 줄 수 있다. (ex : min-width , max-width)
미디어 유형 (생략시 default 값은 all)
all 모든장치
screen 컴퓨터 화면 또는 스마트 기기 화면
tv 영상과 음성이 함께 출력되는 장치
projection 프로젝터 장치
speech 음성 출력 장치
width 웹페이지 가로 너비
height 웹페이지 세로 높이
device-width 기기의 가로 너비
device-height 기기의 세로 높이
orientation 기기의 화면방향 (portrait:세로,landscape:가로)
aspect-ratio 화면 비율
scan TV의 스캔 방식
grid 기기의 그리드/비트맵