CSS MQ Examples

CSS Media Queries Examples

1. 기본 반응형 디자인 예시

이 예시는 모바일, 태블릿, 데스크탑 기기에 맞춰 폰트 크기를 변경하는 간단한 미디어 쿼리입니다.

/* 기본 스타일 (데스크탑) */
body {
  font-size: 18px;
}

/* 모바일 (최대 너비 600px) */
@media only screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

/* 태블릿 (최대 너비 1024px) */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
  body {
    font-size: 16px;
  }
}

설명:

모바일 화면(600px 이하): 폰트 크기를 14px로 설정.
태블릿 화면(601px~1024px): 폰트 크기를 16px로 설정.
데스크탑 화면(1025px 이상): 기본 18px 폰트 크기를 유지.

2. 반응형 이미지 갤러리

화면 너비에 따라 갤러리 열 수를 조절하는 미디어 쿼리입니다. 작은 화면에서는 1열, 큰 화면에서는 4열로 배치됩니다.

.gallery {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, 1fr); /* 기본 4열 */
}

@media only screen and (max-width: 1024px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr); /* 3열로 조정 */
  }
}

@media only screen and (max-width: 768px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr); /* 2열로 조정 */
  }
}

@media only screen and (max-width: 480px) {
  .gallery {
    grid-template-columns: 1fr; /* 1열로 조정 */
  }
}

설명:

데스크탑(1025px 이상): 4열로 갤러리 구성.
태블릿(1024px 이하): 3열로 축소.
작은 태블릿(768px 이하): 2열로 축소.
모바일(480px 이하): 1열로 축소.

3. 세로/가로 모드에 따른 레이아웃 변경

기기의 **화면 방향(orientation)**에 따라 레이아웃을 변경합니다. 세로 모드에서는 열(column)로, 가로 모드에서는 행(row)로 배치합니다.

.container {
  display: flex;
}

/* 세로 모드 (Portrait) */
@media only screen and (orientation: portrait) {
  .container {
    flex-direction: column;
  }
}

/* 가로 모드 (Landscape) */
@media only screen and (orientation: landscape) {
  .container {
    flex-direction: row;
  }
}

설명:

세로 모드(Portrait): .container 요소의 자식들을 열로 나열.
가로 모드(Landscape): .container 요소의 자식들을 행으로 나열.

4. 고해상도 디스플레이용 이미지

Retina 디스플레이나 고해상도 장치에서 고화질 이미지를 사용할 때 유용한 미디어 쿼리입니다.

/* 고해상도 디스플레이용 이미지 설정 */
@media only screen and (min-resolution: 192dpi) {
  .logo {
    background-image: url('logo-highres.png');
  }
}

설명:

해상도 192dpi 이상인 기기에서는 고해상도 로고 이미지가 표시됩니다.

5. 모바일 메뉴 버튼(햄버거 메뉴)

화면이 작은 모바일 기기에서는 메뉴가 햄버거 버튼으로 표시되고, 큰 화면에서는 기본 메뉴가 보이는 방식입니다.

/* 기본 메뉴 (데스크탑) */
.nav-menu {
  display: block;
}

.hamburger {
  display: none;
}

/* 모바일 메뉴 (600px 이하) */
@media only screen and (max-width: 600px) {
  .nav-menu {
    display: none;
  }

  .hamburger {
    display: block;
  }
}

설명:

모바일 화면(600px 이하): **메뉴 버튼(햄버거 아이콘)**이 나타나고, 기본 메뉴는 숨겨집니다.
데스크탑에서는 기본 네비게이션 메뉴가 보입니다.

6. 미디어 유형을 사용한 인쇄 스타일

웹 페이지를 **인쇄(print)**할 때 사용되는 스타일을 정의하는 미디어 쿼리입니다.

@media print {
  body {
    font-size: 12pt;
    color: black;
    background: white;
  }

  a {
    text-decoration: underline;
    color: black;
  }
}

설명:

인쇄할 때는 배경색을 흰색으로 하고, 텍스트는 검은색으로 설정합니다.
링크는 밑줄을 표시하고, 색상을 검은색으로 변경하여 인쇄 시에도 가독성을 높입니다.

7. 터치 지원 기기를 위한 스타일

터치스크린 기기에서만 적용되는 스타일을 정의하는 미디어 쿼리입니다.

@media (hover: none) and (pointer: coarse) {
  button {
    font-size: 18px;
    padding: 15px;
  }
}

설명:

터치스크린(마우스 호버가 없는) 기기에서 버튼의 크기와 글꼴 크기를 확대하여, 터치 인터페이스에 적합한 스타일을 제공합니다.

8. 반응형 카드 레이아웃

이 예시는 카드 레이아웃에서 화면 크기에 따라 카드 수가 자동으로 조정되는 반응형 디자인을 구현합니다.

.card-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* 태블릿 (768px 이하) */
@media only screen and (max-width: 768px) {
  .card-container {
    grid-template-columns: repeat(2, 1fr); /* 2열로 변경 */
  }
}

/* 모바일 (480px 이하) */
@media only screen and (max-width: 480px) {
  .card-container {
    grid-template-columns: 1fr; /* 1열로 변경 */
  }
}

설명:

데스크탑: 4개의 열로 카드 배치.
태블릿(768px 이하): 2개의 열로 카드 배치.
모바일(480px 이하): 1개의 열로 카드 배치.

9. 다크 모드와 라이트 모드

사용자의 다크 모드 선호 여부에 따라 스타일을 적용하는 미디어 쿼리입니다.

@media (prefers-color-scheme: dark) {
  body {
    background-color: #333;
    color: #fff;
  }
}

@media (prefers-color-scheme: light) {
  body {
    background-color: #fff;
    color: #000;
  }
}

설명:

다크 모드가 활성화된 경우 배경색은 어둡게, 텍스트는 밝게 설정.
라이트 모드에서는 기본 밝은 배경과 어두운 텍스트를 사용.

CSS Media Queries는 웹 페이지를 다양한 기기와 해상도에 맞춰 반응형 디자인으로 구현하는 데 필수적인 기능입니다. 미디어 쿼리를 활용해 화면 크기, 해상도, 기기의 특성에 맞는 유연한 레이아웃을 제공하고, 사용자 경험을 최적화할 수 있습니다.

코딩 스쿨 CSS