[CSS] Media Query: 반응형 웹의 마법사! 📱

Media Query 톺아보기! 🚀

CSS Media Query는 반응형 웹 디자인(Responsive Web Design)의 핵심 도구입니다. 다양한 디바이스와 화면 크기에서 최적의 사용자 경험을 제공하려면 Media Query를 꼭 알아야 해요! 🎯

---

Media Query란? 🚁

Media Query는 CSS3에서 도입된 기능으로,특정 조건(화면 크기, 해상도, 색상 깊이, 디바이스 타입, 디바이스 방향 등)에 따라 CSS 스타일을 조건부로 적용하는 규칙이에요. 화면이 좁아질수록 디자인이 깨지지 않고 자연스럽게 변경되도록 도와줍니다.

/* 기본 스타일 */
body {
  background-color: lightblue;
}

/* 화면 너비가 768px 이하일 때 적용 */
@media (max-width: 768px) {
  body {
    background-color: lightcoral;
  }
}

 

👉 화면 크기가 768px 이하로 줄어들면 배경색이 파란색에서 빨간색으로 바뀝니다!

---

Media Query 기본 문법 💻 

Media Query는 @media 키워드를 사용해 작성합니다.

@media (조건) {
  /* 조건이 참일 때 적용할 스타일 */
}

조건 유형

1. max-width / min-width: 화면 너비를 기준으로 조건 설정
2. max-height / min-height: 화면 높이를 기준으로 조건 설정
3. aspect-ratio: 화면의 가로세로 비율
4. resolution: 화면의 해상도
5. orientation: 화면 방향 (세로/가로)

 

예제: 기본 사용법

 

1. 화면 너비에 따른 스타일: width / height

• max-width: 화면의 최대 너비
• min-width: 화면의 최소 너비.

/* 기본 스타일 */
h1 {
  font-size: 24px;
}

/* 화면 너비가 600px 이하일 때 */
@media (max-width: 600px) {
  h1 {
    font-size: 18px;
  }
}

 

👉 화면이 좁아지면 글자 크기를 줄입니다.

---

2. 세로/가로 방향에 따라 스타일 변경: orientation (디바이스 방향)

• portrait: 세로 모드
• landscape: 가로 모드

@media (orientation: portrait) {
  body {
    background-color: lightgreen;
  }
}

@media (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

 

👉 화면 가로 세로 모드에 따라 배경 색깔이 달라짐

---

3. 고해상도 디바이스 스타일링: resolution (해상도)

• min-resolution: 최소 해상도
• max-resolution: 최대 해상도

@media (min-resolution: 2dppx) {
  img {
    content: url('high-resolution.png');
  }
}

 

👉 Retina 디스플레이나 고해상도 화면에서 선명한 이미지를 제공하려면 resolution 조건을 사용하면 됩니다.

---

4. 가로 세로 비율: aspect-ratio

@media (aspect-ratio: 16/9) {
  .video-container {
    width: 100%;
  }
}

 

👉 디바이스 화면의 가로 세로 비율을 기준으로 스타일을 적용

---

Media Query에서 사용되는 논리 연산자 🚁 

1. and (조건이 모두 참일 때)

@media (min-width: 600px) and (max-width: 1200px) {
  body {
    font-size: 16px;
  }
}

 

2. or (조건 중 하나라도 참일 때, 키워드 ,로 표현)

@media (max-width: 600px), (orientation: portrait) {
  body {
    background-color: lightcoral;
  }
}

 

3. not (조건을 부정)

@media not (max-width: 600px) {
  body {
    font-size: 18px;
  }
}

 

4. only (해당 조건에만 적용)

@media only screen and (max-width: 600px) {
  body {
    background-color: lavender;
  }
}

---

Media Query 실전 예제 🖼️

1. Mobile First 디자인 전략

모바일 우선 전략은 기본 스타일을 모바일 중심으로 작성하고, 더 큰 화면을 위한 스타일을 Media Query로 추가하는 방식입니다.

/* 기본 스타일 (모바일 우선) */
body {
  font-size: 14px;
}

/* 태블릿 */
@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
}

/* 데스크톱 */
@media (min-width: 1024px) {
  body {
    font-size: 18px;
  }
}

 

2. Grid 레이아웃에 Media Query 적용

.container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .container {
    grid-template-columns: repeat(4, 1fr);
  }
}

 

3. 이미지 반응형 처리

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

@media (min-width: 768px) {
  img {
    width: 50%;
  }
}

4.  다크 모드 구현하기

다크 모드는 현대 웹사이트에서 필수죠. Media Query로 간단히 구현할 수 있어요.

@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #ffffff;
  }
}

@media (prefers-color-scheme: light) {
  body {
    background-color: #ffffff;
    color: #000000;
  }
}

5.  반응형 네비게이션 구현하기 

화면 크기에 따라 네비게이션을 변경하는 예제입니다.

/* 기본 스타일 */
nav {
  display: flex;
}

/* 화면이 좁아지면 네비게이션 숨기기 */
@media (max-width: 768px) {
  nav {
    display: none;
  }
}

---

CSS-in-JS에서 Media Query 사용 📖

React 스타일링 라이브러리에서도 Media Query를 활용할 수 있습니다.

Styled-Components

import styled from "styled-components";

const Container = styled.div`
  font-size: 14px;

  @media (min-width: 768px) {
    font-size: 16px;
  }

  @media (min-width: 1024px) {
    font-size: 18px;
  }
`;

export default function App() {
  return <Container>Hello, Media Query!</Container>;
}

 

Emotion

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

const containerStyle = css`
  font-size: 14px;

  @media (min-width: 768px) {
    font-size: 16px;
  }

  @media (min-width: 1024px) {
    font-size: 18px;
  }
`;

export default function App() {
  return <div css={containerStyle}>Hello, Media Query!</div>;
}

---

Media Query 사용 시 주의사항 🖍️

1. 테스트 필수: 다양한 디바이스와 화면 크기에서 테스트하세요.
2. 조건 중복 주의: min-width와 max-width 조건이 겹치지 않도록 설정
3. 성능 최적화: 너무 많은 Media Query를 사용하면 CSS 파일이 복잡해질 수 있어요.

---

결론: 반응형 디자인은 Media Query로! 🌟

Media Query는 현대 웹에서 다양한 디바이스를 지원하는 데 필수적인 도구입니다. 제대로 이해하고 활용하면 아름답고 유연한 사용자 경험을 제공할 수 있어요. 지금 당장 여러분의 프로젝트에 Media Query를 적용해보세요!

 

🌷전설의 개발자가 되어봅시당! 🌷