미디어 쿼리와 뷰포트

1. 미디어 쿼리(Media Queies)

반응형 웹에서는 필수인 미디어쿼리는, 화면크기,화면 해상도, 기기 방향 등의 조건으로 CSS를 각각 다르게 적용하는 것이다.

1) 기본 문법

@media [only|not 미디어 유형] [and|,] (조건문){
실행문
}

2) 적용 방식

- 링크 방식

CSS파일 내에 미디어 쿼리를 작성해서 링크 태그로 CSS파일 연결한다.

<link rel="stylesheet" href="mediaqueries.css">

- 문서 내에 작성하는 방식

이 방식은 문서에 CSS코드를 작성하기 때문에 문서의 용량이 커진다. 되도록이면 피하는 게 좋다.

@media all and (min-width:480px) { ... }

- 임포트 방식

CSS파일 내에서 CSS파일을 불러오는 방식이다. 이 방식은 조건이 늘어나게 되면 여러 개의 CSS파일을 불러와야 하므로 사용하지 않는 것이 좋다.

/* common.css */

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

Viewport란 모바일 브라우저에서 web conetent 를 출력하는 영역이다.

1) 뷰포트 메타 태그

HTML의 태그 중 meta태그에 name값에 viewport를 주고 content의 값을 설정하면 웹브라우저는 여기에 설정된 값에 따라서 화면의 크기를 각 디바이스에 최적화된 크기로 표현해줘서 보기 좋은 화면을 표시해준다.

<head>
    /*뷰포트 메타 태그*/
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>