반응형 디자인을 위한 CSS 미디어 쿼리 기초 사용법

반응형 디자인을 위한 css 미디어 쿼리 기초 사용법에 대해 알려드리겠습니다. 웹 디자인 시 반응형 디자인은 필수적인 항목이 되었습니다. 데스크탑, 스마트폰, 태블릿 등 어떤 기기에서도 오류 없이 의도한 디자인으로 보여주기 위해서는 미디어 쿼리 도구를 이용해 화면 크기, 해상도, 기타 속성 등을 기반으로 스타일을 적용해줘야 합니다. 이 쿼리가 무엇이며 어떻게 구현할 수 있는지 정리해 보겠습니다.

CSS 미디어 쿼리?

css 미디어 쿼리란 장치 및 화면에 대한 특정 조건이 충족되는 경우에만 스타일을 적용할 수 있게 하는 규칙으로 다양한 화면 크기 및 해상도에 빠르게 변형하는 반응형 디자인으로 레이아웃을 구성할 수 있습니다.

• 조건을 정의해 주는 ‘@media’를 선언하고,
• 조건이 성립할 때 css 스타일이 적용됩니다.

예시로, 화면 너비가 700px 이하일 경우 배경 색깔이 연한 파란색으로 변할 수 있도록 명령하는 코드입니다.

@media (max-width: 700px) {
  body {
    background-color: lightblue;
  }
}

반응형 디자인에서 중요한 이유

1. 웹 사이트 or 페이지가 화면 크기에 맞춰서 조정되기 때문에 사용자가 화면을 편하게 볼 수 있습니다.
2. 장치에 따라 최적화된 스타일을 보여줍니다.
3. 다양한 사용자의 입장에서 어떤 기기에서든 보기 좋게 표현된다면 더 오래 머무르게 됩니다.

CSS 미디어 쿼리 사용 방법

‘미디어 쿼리’는 아래의 코드를 기본적으로 사용하며 ‘medai-type’ : 장치 유형(screen, print, all) 등을 지정해서 명령합니다. 그리고 {} 괄호 안에는 적용하고 싶은 css 스타일을 넣으면 됩니다.

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

1. 타겟팅 화면 너비

가장 기본적인 용도가 화면 너비를 반응형으로 만들어 주는 것입니다.

/* Default styles for large screens */
body {
  font-size: 18px;
  color: #333;
}

/* Styles for screens smaller than 1024px */
@media (max-width: 1024px) {
  body {
    font-size: 16px;
  }
}

/* Styles for screens smaller than 768px */
@media (max-width: 768px) {
  body {
    font-size: 14px;
    color: #555;
  }
}

2. 조건 결합

‘and’를 이용해 여러 조건들을 합치거나 쉼표로 구분된 목록을 사용해서 여러 범위를 타겟팅 할 수도 있습니다.

• 결합 시

@media (min-width: 600px) and (max-width: 900px) {
  body {
    background-color: yellow;
  }
}

• 여러 범위 선택 시

@media (max-width: 600px), (min-width: 1200px) {
  body {
    background-color: lightgrey;
  }
}

3. 반응형 이미지

미디어 쿼리 코드를 사용해 크기가 바르게 조정될 수 있도록 사용합니다.

img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 500px) {
  img {
    display: block;
    margin: 0 auto;
  }
}

4. 레이아웃

레이아웃에 미디어 쿼리를 적용할 때는 flexbox와 css grid 시스템에서도 정상적으로 작동할 수 있습니다.

• 플렉스박스(flexbox)

.container {
  display: flex;
  justify-content: space-between;
}

@media (max-width: 700px) {
  .container {
    flex-direction: column;
    align-items: center;
  }
}

• 그리드(grid)

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 700px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

반응형 디자인의 평균 너비

이 평균 너비 표는 다양한 장치나 기기에 알맞게 조정되는 화면 크기를 정리해 둔 것입니다. 가장 보편적인 것들로 모아두었으니 참고하시기 바랍니다.

기기	너비
초소형	최대 너비 : 480px
소형	최대 너비 : 768px
보통	최대 너비 : 1024px
데스크탑	최소 너비 : 1025px
대형 데스크탑	최소 너비 : 1200px

미디어 쿼리 FAQ

총 정리

CSS 미디어 쿼리는 여러 장치와 화면 크기에 적용되는 반응형 웹 디자인에 반드시 필요한 도구로 너비, 스타일 등을 적용하여 모든 화면에서 내가 의도한 스타일을 보여줄 수 있습니다. 모바일을 기준으로 코드를 짜면서 테스트 하는 것이 좋고 빠른 가동을 위해 단순하게 코드를 만드는 것을 추천드립니다.