CSS Media Query와 반응형

1. CSS Media Query

미디어 쿼리는 CSS에서 스타일을 선택적으로 적용하고 싶을 때 사용한다. 다른 프로그래밍 언어의 if문과 비슷하다. 미디어 쿼리는 반응형 페이지를 만들 때 많이 사용된다. 미디어 쿼리는 CSS 코드 상에서 기존의 코드와 섞여 있다면 제일 마지막 줄에 써주어야 한다. (기존의 코드가 덮어쓸 수 있음)

 

 

1-1. 기본 사용법

기본적으로 아래와 같이 사용할 수 있다. () 안에 조건을 넣고, {} 안에 해당 조건에 적용시킬 CSS 실행 코드를 넣으면 된다.

@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}

 

1) min-width

최소 min-width부터 css를 적용한다를 뜻한다. 예를 들어 min-width: 500px이면 최소 500px부터이므로, 500px 이상에서는 전부 적용된다.

 

2) max-width

최대 max-width까지 css를 적용한다를 뜻한다. 예를 들어 max-width: 500px이면 최대 500px까지이므로, 500px 이하에서는 전부 적용된다.

 

3) 세로 화면, 가로 화면

모바일의 가로모드 등 화면의 방향에 따라 적용할 수 있다

 /* 세로 화면 */
  @media (orientation: portrait) {
    body {
      background-color: black;
    }
  }

  /* 가로 화면 */
  @media (orientation: landscape) {
    body {
      background-color: red;
    }
  }

1-2. link에 적용

아래처럼 css 파일 자체를 조건에 따라 적용시킬 수도 있다.

<link rel="stylesheet" href="./mobile.css" media="screen and (max-width: 768px)" />
<link rel="stylesheet" href="./desktop.css" media="screen and (min-width: 768px)" />

 

1-3. 미디어 유형(media-type)

아래와 같은 미디어 유형들이 있다.

• all: 모든 매체를 의미한다.
• print: 인쇄 페이지, 페이지를 인쇄(print)할 경우의 미디어 유형이다.
• screen: 컴퓨터나 태블릿, 스마트폰 등 스크린(screen)이 있는 매체를 의미한다.
• speech: 웹 페이지를 읽어주는 스크린 리더를 의미한다.

1-4. 논리 연산자

and, 쉼표(or), not, only 등을 사용할 수 있다. (not, only의 경우 미디어 유형을 반드시 지정해야 한다.)
지금까지의 내용들로 예제를 간단하게 보자면,

  /* 미디어 유형이 스크린이거나, 화면의 넓이가 최대 500px까지 해당 스타일을 적용한다. */
  @media screen, (max-width: 500px) {
    body {
      background-color: yellow;
    }
  }

  /* 오직 인쇄 유형에만 적용한다. */
  @media only print {
    body {
      width: 500px;
      height: 500px;
      border: 10px solid black;
    }
  }

 

1-5. hover 활용

데스크탑 기준 마우스 포인터를 hover가 적용된 요소에 올리면, hover에 적용된 스타일을 적용시킬 수 있지만, 모바일 같은 경우 브라우저와는 다르게 정확한 포인터가 존재하지 않기 때문에 정상적으로 동작하지 않는다. 해서 아래처럼 하게 되면 데스크탑의 경우에만 hover를 적용할 수 있다.

  /* device의 pointer로 hover가 가능한 경우에만 적용한다 => Desktop */
  @media (hover: hover) {
    /* 마우스 포인터가 올라가있는 동안 스타일을 적용한다. */
    div:hover {
      background-color: red;
    }
  }

  /* hover가 되지 않는 device에서의 스타일을 적용한다 => Mobile */
  @media (hover: none) {
    /* 터치하고 있는 동안 스타일을 적용한다. */
    div:active {
      background-color: yellow;
    }
  }

 

2. 반응형

반응형 웹 페이지를 만들기 전 알아야 할 개념이 있다.

• Desktop First: Desktop(PC) 기준의 화면 크기를 기준으로 먼저 작업을 한 후, 모바일 반응형을 위한 CSS 작업을 한다.
• Mobile First: Mobile 기준의 화면 크기를 기준으로 먼저 작업을 한 후, 데스크탑 반응형을 위한 CSS 작업을 한다.

기본적으로 Desktop First의 경우 최대치인 Desktop을 먼저 디자인하고, max-width를 설정해 가며 반응형을 디자인하고, Mobile First의 경우 최소치인 Mobile을 먼저 디자인하고, min-width를 설정해 가며 반응형을 디자인한다. min-width, max-width를 겹치지 않게 하여 사용하기도 한다.

2-1. Brack point

스마트폰, 폴더폰, 태블릿, 데스크탑, 노트북, 모니터, TV 등의 사이즈에 반응형을 적용하기 위한 분기 포인트를 의미한다.

Desktop-first, Mobile-first에 따라 여러 가지의 Brack Point가 존재한다.

 

1) Mobile First

/* Default Mobile - Portrait */

/* Mobile - Landscape */
@media (min-width: 576px) {}

/* Tablet */
@media (min-width: 768px) {}

/* Desktop */
@media (min-width: 992px) {}

/* Desktop (Large) */
@media (min-width: 1200px) {}

2) Desktop First

/* Default Desktop */

/* Desktop */
@media (max-width: 1199px) {}

/* Tablet */
@media (max-width: 991px) {}

/* Mobile - Landscape */
@media (max-width: 767px) {}

/* Mobile - Portrait */
@media (max-width: 575px) {}