CSS - 미디어 쿼리, 반응형 웹

강의 소개

현재 수강하고 있는 멀티캠퍼스 k-digital 지능형 웹서비스 풀 스택 과정을 수강하며 적은 내용입니다.

교재로는 HTML5 웹 프로그래밍 입문을 사용하고 있습니다.

---

반응형 웹

미디어 및 화면의 크기에 따라 다른 시트를 적용할 수 있다.

즉, 모든 기계를 위한 웹페이지 각각을 만들 수는 없다. 따라서 1개의 웹페이지가 다양한 크기의 기계에 반응하여 스마트폰, PC, 태블릿 등 해당 기계에 맞는 화면을 제공하는 것을 반응형 웹이라 한다.

미디어 쿼리 CSS를 사용하면 반응형 웹을 만들 수 있다.

 

 

반응형 웹 만들기

아래 viewport meta 태그를 html 파일 상단에 붙인다.

<meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1" />

 

 

반응형 웹 확인 방법

만약 PC 또는 노트북과 핸드폰이 동일한 와이파이에 접속되어 있다면 아래 순서로 반응형 웹이 적용되었는지 확인할 수 있다.

 

1. PC와 휴대폰을 동일한 무선 네트워크(와이파이)에 연결한다.

 

2. PC의 IP주소를 확인한다.

윈도우는 ipconfig, 맥은 ifconfig 를 터미널 창에 입력하여 확인할 수 있다.

 

3. 아래 코드를 html태그와 style태그 사이에 붙여넣는다.

[viewport meta태그]

<meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1"/>

 

4. PC의 방화벽을 해제한다.

PC에 핸드폰이 IP주소로 접속하기 위해서 해제한다. 즉, PC는 서버역할을 하고, 휴대폰은 클라이언트 역할을 하기 위함이다.

 

5. 휴대폰에서 브라우저를 연다.

http://IP주소:8080/html파일이 있는 경로/.html

위와 같은 링크에 접속할 html파일이 있는 경로를 넣어주어 접속한다.

 

확인하면 PC에 맞춘 사이즈로 보였던 페이지가, 휴대폰에 맞는 사이즈로 재조정되어 보이는 것을 확인할 수 있다.

 

 

미디어 쿼리

미디어 쿼리란 미디어의 타입에 따라 CSS를 적용할 수 있는 것이다. 여기서 미디어는 프린터, PC, 태블릿, 휴대폰 등의 장치를 말한다.

 

@media로 시작하는 문법을 통해서 사이즈별로 다른 화면을 만들 수 있다. 이를 통해서 스마트폰과 PC에서 다른 화면을 보여줄 수 있다.

미디어 쿼리문법은 style태그 내에 작성한다. 위의 viewport 메타태그는 title과 style태그 사이에 삽입했던 것에 유의한다.

 

문법 규칙

아래와 같은 규칙을 가진다.

- @media로 시작한다.

- 조건이 여러개면 and or not로 나열한다.

- min-width와 max-width로 조건의 크기를 지정해줄 수 있다.

@media (min-width: 500px) and (max-width: 799px)

단, 크기별 조건을 휴대폰, 태블릿, PC 등 여러개로 각각 지정시 작은 크기에서 큰 크기 순서로 나열한다. 아래는 크기 순으로 조건을 나열한 예시이다.

@media (max-width: 499px)
@media (min-width: 500px) and (max-width: 799px) 
@media (min-width: 800px)

 

- 모니터는 @media screen를, 인쇄를 하는 프린터는 @media print를 사용한다.

 

- 화면 방향 전환은 orientation속성을 사용한다.

세로는 orientation: portrait를, 가로는 orientation: landscape를 사용한다.

아래는 screen조건과 화면 방향 별 다른 배경색을 지정해준 예시이다.

@media screen and (orientation: portrait) {
	body {background-color: blue;}
}

@media screen and (orientation: landscape) {
	body {background-color: blue;}
}

 

 

예시코드

아래와 같은 예시 코드를 통해서 확인해보자.

@media screen and (max-width: 499px) { /*조건이 맞는 기기에서는 배경색 녹색 */
	body {background-color:green;} 
}

여기에서는 '화면이 499px이하인 기기'의 '모니터 화면'에는 배경색을 녹색으로 지정해준 것이다.

만약 screen이 아니라 print를 넣었다면, '화면이 499px이하인 기기'에서 '출력'시에만 녹색이 될 것이다.