Media Query의 지정방법
미디어 쿼리를 이용해서 CSS에 적용하는 방법은 3가지가 있습니다.
1. HTML의 HEAD의 LINK 태그에 media속성에 지정하기
2. CSS 파일내에서 @media 지정하기
3. CSS 파일내에서 import하기
미디어 쿼리 적용방법
이제 위에서 알아본 3가지 meia query의 적용방법의 형식
1. HTML의 HEAD의 LINK 태그에 media속성에 지정하기
<link href="css/common.css" rel="stylesheet" type="text/css" media="screen and (min-width:0px) and (max-width:480px)">2. CSS 파일내에서 @media 지정하기
@media all and (min-width:480px) { ... }3. CSS 파일내에서 import하기
/* common.css */
@import "../media.css";
/* media file */
@media screen and (min-width:768px) { ... }미디어 쿼리 기준 속성
-
max-width : 뷰 영역에서의 최대 넓이, 즉 지정한 사이즈보다 작을 경우 적용
-
min-width : 뷰 영영에서의 최소 넓이, 즉 지정한 사이즈보다 넓은 경우 적용
-
max-device-width : 디바이스 사이즈의 최대 넓이. 이 사이즈보다 작은 경우 적용
-
min-device-width : 디바이스 사이즈의 최소 넓이. 이 사이즈보다 넓을 경우 적용
-
orientation : 세로 길이 혹은 가로길이의 둘 중 하나로 기준을 적용
두 가지 속성값을 정해줄 수가 있습니다.
- portrait : 세로 길이 중심의 경우
- landscape : 가로 길이 중심의 경우
(쉽게 예로 들자면, portrait는 스마트 폰을 그대로 세로로 길게 볼 경우에 해당, landscape는 가로로 놓고 볼 경우에 해당한다.)@media screen and (orientation:portrait) { ... } @media screen and (orientation:landscape) { ... }
-
device-pixel-ratio : 디바이스의 해상도를 기준으로 적용
retina 혹은 고해상도에 반응시키기 위한 속성. 디바이스 픽셀과 css픽셀의 비율이라고도 한다.
미디어 쿼리 기본적 설정 및 지정 방법
480px 이상의 미디어 타입의 경우
@media (min-width:480px) { ... }
/* 또는 */
@media screen and (max-width:480px) { ... }@media 라고 먼저 기술을 해주고 타입 혹은 넓이르 and를 사용해서 연결을 시켜주면 된다. 그리고 넓이를 지정해줄 때 괄호 안에 min-width 혹은 max-width를 사용해 지정해주면 된다.
480px에서 768px까지 넓이의 미디어 타입
@media screen and (min-width:480px) and (max-width:768px) [ ... }all과 and가 생략 가능한 경우
@media (min-width:480px) { ... }
/* 또는 */
@media all (min-width:480px) { ... }and를 사용해서 모든 조건을 필요로 하는 미디어 타입
@media screen and (min-height:640px) and (min-width:480px)컴마(,)를 사용해서 어느 한쪽만 만족하는 미디어 타입
@media screen and (min-width: 320px) and (min-width: 480px), screen and (min-width: 480px), print미디어 쿼리 지정 순서
두 가지 기준으로 순서를 지정할 수 있다.(PC와 Mobile을 기준으로)
PC 기준의 경우
PC로 볼 경우의 스타일을 먼저 지정해준 후, 모바일 스타일을 덮어쓰기 형태로 지정해 주는 방식이다.
@media screen and (max-width:1200px) { ... }
@media screen and (max-width:768px) { ... }
@media screen and (max-width:480px) { ... }모바일 기준의 경우
모바일의 스타일을 먼저 지정해 준 후, PC 스타일을 지정해 주는 방식이다.
@media screen and (max-width:1200px) { ... }
@media screen and (max-width:768px) { ... }
@media screen and (max-width:480px) { ... }Viewport의 지정 (필수 / 중요)
위에서 살펴본 미디어 쿼리를 에러 없이 정확하게 적용시키기 위해서는 Viewport의 지정 또한 필수적으로 이뤄져야 한다. 주로 모바일을 위한 기닝인데, 처음 로딩 시 이미지 사이즈 혹은 확대, 축소들이 가능하다. (손가락으로 이미지를 확대할 때 가능하게 해주냐, 그렇지 않느냐를 의미)
지정 방법은 head 태그 안에 아래와 같이 코드를 입력해주면 된다.
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1, user-scalable=yes,initial-scale=1.0" />