CSS 중급 기초

CSS 미디어 쿼리 심화

CSS 미디어 쿼리 심화 — 중급

미디어 쿼리 심화

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

미디어 쿼리는 웹 디자인에서 반응형 웹을 구현하기 위한 핵심 기술입니다. 오늘날 사용자들은 다양한 디바이스에서 웹사이트를 이용하기 때문에, 각 디바이스의 화면 크기와 해상도에 맞춰 디자인을 최적화하는 것이 중요합니다. 만약 미디어 쿼리를 잘 활용하지 않으면, 사용자는 웹사이트를 보기 불편하게 느끼고, 이는 사용자 경험 저하로 이어져 결과적으로 이탈률이 높아질 수 있습니다. 따라서 미디어 쿼리를 이해하고 활용하는 것은 현대 웹 개발에서 필수적입니다.

2. 핵심 개념 설명

미디어 쿼리는 CSS에서 특정 조건을 만족할 때 스타일을 적용할 수 있도록 해주는 기술입니다. 이는 마치 다양한 환경에 맞춰 옷을 고르는 것과 같습니다. 예를 들어, 여름에는 반팔 티셔츠를 입고, 겨울에는 두꺼운 외투를 입는 것처럼, 웹 페이지도 각 디바이스의 특성에 맞춰 스타일을 다르게 적용할 수 있습니다.

용어	설명
뷰포트(Viewport)	사용자가 보는 웹 페이지의 가상 영역
세로 방향(Orientation)	디바이스가 세로로 놓여져 있는 상태
가로 방향(Orientation)	디바이스가 가로로 놓여져 있는 상태
미디어 타입(Media Type)	미디어 쿼리에서 적용할 수 있는 디바이스의 종류 (예: screen, print)

3. 기본 코드 예제

아래는 화면의 가로 크기가 600픽셀 이하일 때 요소의 배경색을 변경하는 미디어 쿼리의 기본 사용법입니다.

/ 기본 스타일 /
body {
    background-color: white; / 기본 배경색은 흰색 /
}

/ 미디어 쿼리 /
@media (max-width: 600px) {
    body {
        background-color: lightblue; / 화면이 600px 이하일 경우 배경색을 연한 파란색으로 변경 /
    }
}

실행 결과

화면의 가로 크기가 600픽셀 이하일 경우 배경색이 연한 파란색으로 바뀝니다.

코드 한 줄씩 동작 설명

body 선택자를 통해 기본 배경색을 흰색으로 설정합니다.
@media (max-width: 600px) 구문을 통해 화면의 최대 너비가 600픽셀 이하일 때 적용될 스타일을 정의합니다.
미디어 쿼리 내부에서 body의 배경색을 연한 파란색으로 변경합니다.

4. 실전 활용 예제

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

쇼핑몰에서 장바구니를 구현할 때, 모바일에서는 네비게이션 바의 스타일을 변경하여 사용자가 쉽게 접근할 수 있도록 합니다.

/ 기본 네비게이션 스타일 /
.navbar {
    display: flex; / 가로 방향으로 나열 /
}

/ 모바일 스타일 /
@media (max-width: 600px) {
    .navbar {
        flex-direction: column; / 세로 방향으로 나열 /
    }
}

상황 설명: 모바일에서 사용자는 손가락으로 쉽게 클릭할 수 있도록 세로로 나열된 메뉴를 선호합니다.

예제 2: 이미지 크기 조정

반응형 이미지를 위해 화면 크기에 따라 이미지 크기를 조정합니다.

img {
    width: 100%; / 기본적으로 이미지 너비를 100%로 설정 /
}

@media (min-width: 600px) {
    img {
        width: auto; / 화면이 600px 이상일 경우 이미지 크기를 자동으로 설정 /
    }
}

상황 설명: 작은 화면에서는 이미지를 전체 너비로 보여주고, 큰 화면에서는 원래 크기를 유지하여 품질을 높이는 방식입니다.

5. 흔한 실수와 주의사항

실수 1: 미디어 쿼리의 위치

잘못된 코드:

@media (max-width: 600px) {
    / 미디어 쿼리 내부에 기본 스타일을 작성 /
    body {
        background-color: lightblue;
    }
}
body {
    background-color: white;
}

올바른 코드:

body {
    background-color: white; / 기본 스타일은 미디어 쿼리 외부에 작성해야 함 /
}

@media (max-width: 600px) {
    body {
        background-color: lightblue; / 미디어 쿼리 내부는 조건에 맞는 스타일만 /
    }
}

실수 2: 조건을 잘못 설정