반응형 웹,Media Query(미디어쿼리)

박민규·2020년 9월 30일

반응형웹

html,css

목록 보기

5/5

Responsive Web(반응형 웹)

웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말한다.

웹사이트를 PC용과 모바일용으로 각각 별개로 제작하지 않고, 하나의 공용 웹사이트를 만들어 다양한 디바이스에 대응할 수 있다.

Adaptive web (적응형 웹)

서버나 클라이언트에서 웹에 접근한 디바이스를 체크하여 그 디바이스에 최적화된 미리 정해 놓은 각 디바이스의 디스플레이에 맞는 웹을 보여주는 디자인을 의미한다.

반응형은 하나의 디자인으로 여러가지 디자인 변경 가능

적응형은 그냥 여러가지 버전 만들어놓고 디바이스에 맞춰서 씀! (아이폰se용,갤탭용,모니터용 등등)

Media Query(미디어쿼리)

반응형 웹에서 제일 널리 쓰이는 기술이다.

미디어 쿼리를 사용해서 css에 적용하는 방법은 아래와 같이 3가지가 있다.

1. HTML의 HEAD의 link태그의 media속성에 지정하기
2. css파일내에서 @media 지정하기
3. css파일내에서 import 하기

미디어 타입 ( media type )

all : 전부

screen : 스크린 화면

print : 프린터

tv : 텔레비전

적용방법 3가지 예시

1. HTML의 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. media query를 설정한 파일을 css파일 내에서 import 해서 적용시켜주는 방법.
/* common.css */

@import "../media.css";

/* media file */
@media screen and (min-width:768px) { ... }

미디어 쿼리 기본적 설정 및 지정 방법

480px이상의 미디어 타입의 경우
@media (min-width:480px) { ... }

/* 또는 */

@media screen and (max-width:480px) { ... }
max-width : 뷰 영역에서의 최대넓이. 즉 지정한 사이즈보다 작을 경우 적용
min-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) { ... }

Mobile 기준

모바일의 스타일을 먼저 지정해 준 후, PC 스타일을 지정해 주는 방식.

@media screen and (max-width:480px) { ... }
@media screen and (max-width:768px) { ... }
@media screen and (max-width:1200px) { ... }