미디어쿼리(Media query) #

다양한 출력장치들의 등장과 함께 반응형 웹 제작을 위한 방법으로 사용하는 미디어쿼리는 뷰포트 해상도에 따라 CSS 코드를 분기함으로써 하나의 HTML 소스지만 여러가지 뷰로 표현하는 것을 가능하게 해준다.

미디어쿼리 적용방법 #

1.  <link>
@media only all and (조건문) {실행문}

2.  <style>
<link rel=”stylesheet” type=”text/css” media=”all and (조건A)” href=”A.css”>
<link rel=”stylesheet” type=”text/css” media=”all and (조건B)” href=”B.css”>

3.  CSS 파일내부
 /* All Device */
 모든 해상도를 위한 공통 코드를 작성함. 모든 해상도에서 이 코드가 실행됨.
 /* Mobile Device */
 768px 미만 해상도의 모바일 기기를 위한 코드를 작성함. 모든 해상도에서 이 코드가 실행됨. 미디어 쿼리를 지원하지 않는 모바일 기기를 위해 미디어 쿼리 구문을 사용하지 않음.
 /* Tablet & Desktop Device */
 @media all and (min-width:768px) {
 사용자 해상도가 768px 이상일 때 이 코드가 실행됨. 테블릿과 데스크톱의 공통 코드를 작성함.
 }
 /* Tablet Device */
 @media all and (min-width:768px) and (max-width:1024px) {
 사용자 해상도가 768px 이상이고 1024px 이하일 때 이 코드가 실행됨. 아이패드 또는 비교적 작은 해상도의 랩탑이나 데스크톱에 대응하는 코드를 작성함.
 }
 /* Desktop Device */
 @media all and (min-width:1025px) {
 사용자 해상도가 1025px 이상일 때 이 코드가 실행됨. 1025px 이상의 랩탑 또는 데스크톱에 대응하는 코드를 작성함.
 }

미디어 타입 종류 #

- All : 모든 미디어 타입
- Print : 인쇄용
- Screen : 컴퓨터화면
- ...외 다양한 타입이 있으며 보다 자세한 내용은 <https://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/>를 참고하면 된다.