반응형 웹 디자인 - Media Query 활용

Media Query를 사용하면 화면 크기, 해상도, 방향 등에 따라 다른 CSS를 적용하여 반응형 웹사이트를 만들 수 있습니다.

언제 사용하나요?

• 모바일/태블릿/데스크톱 대응


• 프린트용 스타일 지정


• 화면 방향(가로/세로)에 따른 레이아웃


• 다크 모드 대응

기본 문법

/* 기본 */
@media (조건) {
    /* 조건을 만족할 때 적용될 CSS */
}

/* 화면 너비가 768px 이하일 때 */
@media (max-width: 768px) {
    .container {
        width: 100%;
    }
}

/* 화면 너비가 768px 이상일 때 */
@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}

일반적인 브레이크포인트

/* 모바일 우선 (Mobile First) */
/* 기본 스타일 = 모바일 */

/* 태블릿 (768px 이상) */
@media (min-width: 768px) {
    /* 태블릿 스타일 */
}

/* 데스크톱 (1024px 이상) */
@media (min-width: 1024px) {
    /* 데스크톱 스타일 */
}

/* 와이드 데스크톱 (1280px 이상) */
@media (min-width: 1280px) {
    /* 와이드 데스크톱 스타일 */
}

자주 사용하는 브레이크포인트

복합 조건

/* AND 조건 */
@media (min-width: 768px) and (max-width: 1024px) {
    /* 768px ~ 1024px 사이 */
}

/* OR 조건 */
@media (max-width: 600px), (orientation: portrait) {
    /* 600px 이하 또는 세로 모드 */
}

/* NOT 조건 */
@media not screen and (color) {
    /* 컬러 화면이 아닐 때 */
}

/* 미디어 타입 지정 */
@media screen and (min-width: 768px) {
    /* 화면에서만 */
}

@media print {
    /* 프린트할 때만 */
}

실전 예시: 반응형 레이아웃

/* 기본 (모바일) */
.container {
    display: flex;
    flex-direction: column;
    padding: 10px;
}

.sidebar {
    width: 100%;
    order: 2;
}

.main {
    width: 100%;
    order: 1;
}

/* 태블릿 이상 */
@media (min-width: 768px) {
    .container {
        flex-direction: row;
        padding: 20px;
    }
    
    .sidebar {
        width: 250px;
        order: 1;
    }
    
    .main {
        flex: 1;
        order: 2;
    }
}

실전 예시: 반응형 네비게이션

/* 모바일: 햄버거 메뉴 */
.nav-menu {
    display: none;
}

.hamburger {
    display: block;
}

.nav-menu.active {
    display: flex;
    flex-direction: column;
}

/* 데스크톱: 가로 메뉴 */
@media (min-width: 768px) {
    .nav-menu {
        display: flex;
        flex-direction: row;
    }
    
    .hamburger {
        display: none;
    }
}

실전 예시: 반응형 폰트

/* 기본 폰트 (모바일) */
body {
    font-size: 14px;
}

h1 {
    font-size: 24px;
}

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

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

/* 또는 clamp() 사용 */
h1 {
    font-size: clamp(24px, 5vw, 48px);
}

특수 미디어 쿼리

/* 다크 모드 */
@media (prefers-color-scheme: dark) {
    body {
        background: #1a1a1a;
        color: #fff;
    }
}

/* 라이트 모드 */
@media (prefers-color-scheme: light) {
    body {
        background: #fff;
        color: #000;
    }
}

/* 애니메이션 줄이기 설정 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* 고해상도 디스플레이 */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
    /* Retina 디스플레이용 고해상도 이미지 */
}

/* 프린트 */
@media print {
    .no-print {
        display: none;
    }
    body {
        font-size: 12pt;
    }
}

viewport 메타 태그

<!-- 반응형 웹 필수 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

CSS 변수와 함께 사용

:root {
    --container-width: 100%;
    --font-size: 14px;
}

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

.container {
    width: var(--container-width);
    font-size: var(--font-size);
}