CSS 입문 기초

CSS 미디어 쿼리 기본

CSS 미디어 쿼리 기본 — 초급

미디어 쿼리 기본

1. 도입 (왜 배워야 하는가)

미디어 쿼리는 웹 디자인에서 반응형 웹사이트를 구축하는 데 필수적인 도구입니다. 사용자가 어떤 장치에서 웹사이트에 접근하든지 간에 최적의 사용자 경험을 제공하기 위해 필요합니다. 예를 들어, 스마트폰, 태블릿, 데스크탑의 화면 크기는 모두 다릅니다. 이럴 때 미디어 쿼리를 사용하지 않으면, 웹사이트가 각 장치에 맞게 조정되지 않아 사용자가 정보를 찾기 어렵거나 불편함을 느낄 수 있습니다.

미디어 쿼리를 모르면, 모든 디바이스에서 동일한 레이아웃과 스타일이 적용되어, 사용자 경험이 저하되고, 이는 결국 사용자 이탈로 이어질 수 있습니다.

2. 핵심 개념 설명

미디어 쿼리는 CSS의 기능으로, 특정 조건(예: 화면 크기)에 따라 스타일을 적용할 수 있게 해줍니다. 이를 통해 웹사이트가 다양한 디바이스에서 다르게 표시될 수 있습니다.

미디어 타입: 화면, 인쇄 등 디바이스의 종류를 지정합니다.
미디어 특징: 화면의 너비, 높이, 해상도 등을 지정하여 스타일을 조정합니다.

용어	설명
미디어 쿼리	다양한 디바이스에서 스타일을 조정하는 CSS 기능
반응형 웹	다양한 화면 크기에서 최적의 사용자 경험을 제공하는 웹 디자인 패턴
미디어 타입	스타일을 적용할 디바이스의 종류

3. 기본 코드 예제

다음은 기본적인 미디어 쿼리 사용법을 보여주는 코드입니다.

/ 기본 스타일 /
body {
    background-color: lightblue; / 기본 배경색 /
    font-size: 16px; / 기본 폰트 크기 /
}

/ 화면 크기가 600px 이하일 때 /
@media (max-width: 600px) {
    body {
        background-color: lightgreen; / 작은 화면에서 배경색 변경 /
        font-size: 14px; / 작은 화면에서 폰트 크기 조정 /
    }
}

실행 결과

기본적으로 lightblue 배경과 16px 폰트 크기를 가집니다.
화면 너비가 600px 이하일 경우, 배경이 lightgreen으로 변경되고, 폰트 크기가 14px로 조정됩니다.

코드 한 줄씩 동작 설명

body { background-color: lightblue; font-size: 16px; }: 기본 스타일을 설정합니다. 모든 화면에서 lightblue 배경과 16px 폰트 크기를 적용합니다.
@media (max-width: 600px) { ... }: 화면 너비가 600px 이하인 경우에만 아래의 CSS 규칙을 적용합니다.
body { background-color: lightgreen; font-size: 14px; }: 작은 화면에서 배경색을 lightgreen으로 변경하고, 폰트 크기를 14px로 줄입니다.

4. 실전 활용 예제

예제 1: 모바일 네비게이션 메뉴

쇼핑몰 웹사이트에서 모바일 사용자가 메뉴를 쉽게 접근할 수 있도록, 화면 크기에 따라 네비게이션 메뉴 스타일을 변경합니다.

/ 기본 네비게이션 스타일 /
nav {
    display: flex;
    background-color: #333;
    padding: 10px;
}

/ 모바일 화면에서 메뉴를 수직으로 나열 /
@media (max-width: 600px) {
    nav {
        flex-direction: column; / 세로 방향으로 나열 /
    }
}

예제 2: 카드 레이아웃

뉴스 웹사이트에서 카드 레이아웃을 사용하여 기사를 표시할 때, 화면 크기에 따라 카드의 개수를 조정합니다.

/ 기본 카드 스타일 /
.card {
    width: 30%; / 기본적으로 3개의 카드를 가로로 나열 /
    margin: 1%;
}

/ 화면 크기가 600px 이하일 때 /
@media (max-width: 600px) {
    .card {
        width: 100%; / 작은 화면에서 카드를 전체 너비로 변경 /
    }
}

5. 흔한 실수와 주의사항

실수 1: 미디어 쿼리를 잘못 설정

@media (min-width: 600px) { / 잘못된 설정 /
    / 스타일 규칙 /
}

올바른 코드:

@media (max-width: 600px) { / 화면이 600px 이하일 때 /
    / 스타일 규칙 /
}

주의: 조건을 정확히 설정하지 않으면 원하는 스타일이 적용되지 않습니다.

실수 2: 중첩된 미디어 쿼리

@media (max-width: 600px) {
    @media (max-width: 400px) { / 잘못된 중첩 /
        / 스타일 규칙 /
    }
}