Frontend Academy · 강의

미디어 쿼리와 모바일 우선 개발

min-width 미디어 쿼리로 중단점을 작성하고 모바일 레이아웃을 먼저 만든 다음 더 큰 화면에 맞게 점진적으로 개선합니다.

레슨 4/413개 단계

미디어 쿼리와 모바일 우선 개발은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

미디어 쿼리란 무엇인가요?

미디어 쿼리는 뷰포트 너비가 특정 기준보다 큰 경우처럼 조건이 참일 때만 CSS 규칙을 적용합니다. 반응형 디자인의 기반으로, 하나의 스타일시트가 모든 화면 크기에 맞게 조정되도록 합니다.

기본 문법

미디어 쿼리는 @media 규칙 안에 CSS 블록을 넣는 방식으로 작성합니다. 안쪽 규칙은 조건이 일치할 때만 적용됩니다.

@media (min-width: 768px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

min-width와 max-width

min-width: 뷰포트가 이 너비 이상일 때 스타일을 적용합니다(모바일 우선). max-width: 뷰포트가 이 너비 이하일 때 스타일을 적용합니다(데스크톱 우선). 모바일 우선 개발에는 min-width를 사용하는 것이 좋습니다.

/* Mobile-first (preferred): */
@media (min-width: 768px) { /* tablets and up */ }
@media (min-width: 1024px) { /* desktops and up */ }

/* Desktop-first: */
@media (max-width: 767px) { /* phones only */ }

모바일 우선 접근 방식

먼저 작은 화면용 CSS를 작성합니다(미디어 쿼리 외부에 작성). 그런 다음 min-width 미디어 쿼리를 사용해 큰 화면에서 점진적으로 복잡한 스타일을 추가합니다. 이렇게 하면 모바일 사용자를 위한 CSS가 더 작아지고 전체 코드도 깔끔해집니다.

.card {
  /* Mobile defaults: single column */
  padding: 16px;
  font-size: 0.9rem;
}

@media (min-width: 768px) {
  .card {
    /* Tablet enhancement */
    padding: 24px;
    font-size: 1rem;
  }
}

일반적인 중단점

특정 기기가 아니라 콘텐츠를 기준으로 중단점을 선택하십시오. 널리 사용되는 시작점은 480px(대형 휴대전화), 768px(태블릿), 1024px(소형 데스크톱), 1280px(대형 데스크톱)입니다. 특정 기기 모델을 대상으로 하는 중단점은 피하십시오.

미디어 유형

화면 너비 외에도 미디어 유형을 대상으로 지정할 수 있습니다. 디스플레이에는 screen, 프린터에는 print를 사용합니다. 인쇄 미디어 쿼리를 사용하면 페이지를 인쇄할 때 표시되는 방식을 맞춤 설정할 수 있습니다(탐색 메뉴 숨기기, 색상 조정).

@media print {
  nav, footer, .ads {
    display: none;
  }
  body {
    font-size: 12pt;
    color: black;
  }
}

and를 사용한 조건 결합

and로 조건을 연결하여 두 조건이 모두 참일 때만 스타일을 적용합니다. 더 복잡한 논리에는 not과 or를 사용합니다.

@media (min-width: 768px) and (max-width: 1023px) {
  /* tablets only */
}

@media (orientation: landscape) and (max-width: 767px) {
  /* landscape phones */
}

색상 체계 선호

사용자의 OS 다크 모드 선호에 반응합니다. 기본적으로 전환 버튼 없이 다크 테마를 제공합니다.

@media (prefers-color-scheme: dark) {
  body {
    background: #1a202c;
    color: #f7fafc;
  }
}

동작 감소 선호

동작이 적은 것을 선호하는 사용자(전정 장애, 간질)를 배려합니다. 이 미디어 쿼리 안에서는 애니메이션을 비활성화하거나 단순화합니다.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

컨테이너 쿼리 — 미래

컨테이너 쿼리(@container)는 뷰포트가 아니라 상위 컨테이너의 크기에 따라 스타일을 적용합니다. 이를 통해 진정한 컴포넌트 수준의 반응형 동작을 구현할 수 있으며, 2023년 이후 모든 최신 브라우저에서 사용할 수 있습니다.

.card-container {
  container-type: inline-size;
}
@container (min-width: 400px) {
  .card { flex-direction: row; }
}

RTL 지원을 위한 논리적 속성

왼쪽에서 오른쪽으로 쓰는 언어와 오른쪽에서 왼쪽으로 쓰는 언어 모두에서 작동하는 레이아웃에는 margin-left 대신 margin-inline-start와 같은 논리적 속성을 사용합니다. 반응형 레이아웃을 미래에도 활용할 수 있도록 작성합니다.

빠른 확인

모바일 우선 CSS 전략을 올바르게 정의하는 방법은 무엇입니까?

인터랙티브 레슨에서 답해보세요

요약: 미디어 쿼리와 모바일 우선

모바일 우선 점진적 향상에는 @media (min-width: N)을 사용합니다. 쿼리 없이 모바일용 기본 스타일을 작성합니다. 더 큰 화면에는 복잡한 기능을 추가합니다. 다크 모드에는 prefers-color-scheme을 사용합니다. 접근성에는 prefers-reduced-motion을 사용합니다. 컴포넌트 수준의 반응형 동작에는 컨테이너 쿼리를 사용합니다.

무료로 시작

AI 튜터와 함께 HTML을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 41
레슨: 163

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“미디어 쿼리와 모바일 우선 개발” 강의는 무료인가요?

네 — “미디어 쿼리와 모바일 우선 개발” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“미디어 쿼리와 모바일 우선 개발”에서 뭘 배우나요?

min-width 미디어 쿼리로 중단점을 작성하고 모바일 레이아웃을 먼저 만든 다음 더 큰 화면에 맞게 점진적으로 개선합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Frontend Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“미디어 쿼리와 모바일 우선 개발” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Frontend Academy(으)로 돌아가기