[CSS] - (11) Media Query

bellong·2026년 2월 19일

CSS

김버그의 CSS는 재밌다 - 강의 정리

목록 보기

11/16

media query 는 반응형 웹을 만들기 위해 반드시 필요한 CSS 기능 중 하나이다.

1. 반응형 웹이란 ?

반응형 웹이란,
사용자가 접속한 디바이스의 화면 크기(뷰포트)에 따라 그에 맞게 레이아웃이 자동으로 변경되는 웹을 의미한다.

즉,
모바일에서는 모바일 화면에 맞게
태블릿에서는 태블릿 화면에 맞게
PC에서는 PC 화면에 맞게

화면 크기에 반응하여 UI가 달라지는 웹이라고 보면 된다.

2. 반응형 웹을 만들기 위한 필수 요소

반응형 웹을 만들기 위해서는
HTML과 CSS 두 가지 설정이 필요하다.

① HTML - viewport meta 태그 선언

<meta name="viewport" content="width=device-width" />

이 설정을 해야
모바일에서 실제 화면 크기에 맞게 레이아웃이 적용된다.

② CSS - Media Query 선언

CSS에서는 media query를 사용하여
특정 화면 크기에서만 적용되는 스타일을 작성할 수 있다.

@media screen and (조건) {
  /* 조건을 만족할 때 적용되는 CSS */
}

3. 가장 많이 사용하는 조건

min-width

@media screen and (min-width: 768px) {
  /* 화면 너비가 768px 이상일 때 적용 */
}

모바일 → 기본 스타일
태블릿 이상 → media query로 추가 스타일

이 방식으로 많이 작성한다.

max-width

@media screen and (max-width: 768px) {
  /* 화면 너비가 768px 이하일 때 적용 */
}

주로 모바일 스타일을 따로 지정할 때 사용한다.

예시

* {
    box-sizing: border-box;
    margin: 0;
}

body {
    font-family: "Poppins", sans-serif;
    color: #212529;
}

.box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh; /* vh: viewport height */
    background-color: #ff4949;
    font-size: 30px;
    font-weight: 700;
    color: #fff;
}

.box::after {
    content: "Mobile";
}

.box img {
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 100px;
}

@media  screen and (min-width: 576px) {
    /* 가로 길이가 576px 이상일 때만 적용됨 */
    .box {
        background-color: #ff5216;
    }

    .box::after {
        content: "Landscape Phone";
    }
}

@media screen and (min-width: 768px) {
    /* 가로 길이가 768px 이상일 때만 적용됨 */
    .box {
        background-color: #ffc82c;
    }

    .box::after {
        content: "Tablet";
    }
}