CSS Media Queries

CSS Media Queries: 반응형 웹 디자인 구현

CSS Media Queries는 다양한 화면 크기와 디스플레이 특성에 따라 서로 다른 CSS 스타일을 적용할 수 있는 기능입니다. 이를 사용하면 하나의 웹 페이지에서 다양한 디바이스에 맞춰 콘텐츠와 레이아웃을 적절히 조정할 수 있어, 반응형 웹 디자인을 구현하는 데 핵심적인 역할을 합니다.

1. Media Queries의 기본 개념

미디어 쿼리는 웹 페이지의 뷰포트 크기나 디스플레이 해상도 등의 조건에 따라 CSS 스타일을 적용하는 방식입니다. 이를 통해 화면 크기나 디바이스 특성에 맞춰 다른 레이아웃을 제공할 수 있습니다.

기본 구문

@media only screen and (조건) {
  /* 해당 조건이 충족될 때 적용할 스타일 */
}

@media: 미디어 쿼리를 시작하는 구문.
조건: 미디어 쿼리가 적용될 조건(예: 화면 크기).
스타일: 조건이 충족될 때 적용할 CSS 스타일.

예시: 화면 크기에 따른 스타일 적용

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

이 코드는 화면 너비가 600px 이하일 때 배경색을 밝은 파란색으로 변경합니다.

2. Media Queries에서 사용할 수 있는 조건

미디어 쿼리는 다양한 조건을 통해 특정 상황에서만 스타일을 적용할 수 있습니다.

주요 조건

width/height: 화면의 너비나 높이.
min-width/max-width: 화면의 최소 또는 최대 너비.
min-height/max-height: 화면의 최소 또는 최대 높이.
orientation: 화면의 방향 (가로 또는 세로).
resolution: 화면의 해상도 (예: DPI).

3. 반응형 디자인에 자주 사용하는 Media Queries

반응형 웹 디자인에서는 화면 너비에 따라 스타일을 변경하는 것이 일반적입니다. 주로 모바일, 태블릿, 데스크탑 기기에 맞춰 미디어 쿼리를 설정합니다.

예시: 기본 반응형 설정

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

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

/* 데스크탑 (최소 너비 1025px) */
@media only screen and (min-width: 1025px) {
  body {
    font-size: 18px;
  }
}

모바일: 폰트 크기를 14px로 설정.
태블릿: 폰트 크기를 16px로 설정.
데스크탑: 폰트 크기를 18px로 설정.

4. 미디어 유형과 미디어 기능

미디어 쿼리는 다양한 미디어 유형과 미디어 기능을 조합하여 사용할 수 있습니다.

미디어 유형

screen: 스크린 기반 장치(모니터, 태블릿, 스마트폰 등).
print: 인쇄 또는 인쇄 미리보기.
all: 모든 장치에 적용(기본값).

미디어 기능

min-width, max-width: 최소/최대 너비 조건.
min-height, max-height: 최소/최대 높이 조건.
orientation: 화면 방향(세로/가로).
aspect-ratio: 화면의 가로 세로 비율.
resolution: 화면 해상도(DPI).

예시: 인쇄 미디어에 맞춘 스타일

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

이 코드는 프린터로 출력할 때 페이지의 글자 크기를 12pt로 설정하고, 배경색을 흰색으로, 글자색을 검정색으로 설정합니다.

5. `orientation`을 사용한 가로/세로 레이아웃 변경

미디어 쿼리를 사용하면 기기의 방향(세로/가로)에 따라 다른 스타일을 적용할 수 있습니다.

예시: `orientation` 사용

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

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

세로 모드(portrait): **.container*의 레이아웃을 **열(column)**로 설정.
가로 모드(landscape): **.container*의 레이아웃을 **행(row)**으로 설정.

6. 고해상도 디스플레이를 위한 미디어 쿼리

*고해상도 디스플레이(Retina, 4K 등)**에서 이미지가 선명하게 보이도록 해상도를 설정할 수 있습니다.

예시: 고해상도 디스플레이 설정

@media only screen and (min-resolution: 192dpi) {
  .logo {
    background-image: url('logo-highres.png');
  }
}

이 코드는 화면의 해상도가 192dpi 이상일 때, 더 높은 해상도의 로고 이미지를 사용합니다.

7. 미디어 쿼리에서 논리 연산자 사용

미디어 쿼리에서 논리 연산자를 사용해 여러 조건을 결합할 수 있습니다.

주요 논리 연산자

and: 두 조건이 모두 참일 때 적용.
or: 두 조건 중 하나라도 참이면 적용.
not: 특정 조건을 제외.

예시: 논리 연산자 사용

@media only screen and (min-width: 600px) and (max-width: 1024px) {
  /* 너비가 600px 이상 1024px 이하일 때 적용 */
  body {
    font-size: 16px;
  }
}

@media not all and (max-width: 600px) {
  /* 너비가 600px 이하가 아닌 경우 적용 */
  body {
    font-size: 18px;
  }
}

이 코드는 화면 너비가 600px 이상 1024px 이하일 때와 600px 이하가 아닌 경우 각각 다른 스타일을 적용합니다.

8. 실전 예시: 반응형 네비게이션 메뉴

미디어 쿼리를 사용해 반응형 네비게이션 메뉴를 만들 수 있습니다. 작은 화면에서는 햄버거 메뉴로 전환되고, 큰 화면에서는 수평 메뉴가 나타납니다.

HTML

<nav class="navbar">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS

/* 기본 네비게이션 스타일 (데스크탑) */
.navbar ul {
  display: flex;
  list-style: none;
  justify-content: space-around;
  background-color: #333;
}

.navbar ul li a {
  color: white;
  text-decoration: none;
  padding: 15px;
}

/* 모바일 (600px 이하)에서는 수직 네비게이션으로 전환 */
@media only screen and (max-width: 600px) {
  .navbar ul {
    flex-direction: column;
  }

  .navbar ul li a {
    padding: 10px;
    text-align: center;
  }
}

이 코드는 화면이 작을 때 네비게이션 메뉴를 수직으로 정렬하고, 큰 화면에서는 수평으로 정렬합니다.

CSS Media Queries는 화면 크기, 해상도, 디스플레이 특성에 따라 다양한 스타일을 적용할 수 있게 해주는 중요한 도구입니다. 이를 통해 반응형 웹 디자인을 쉽게 구현할 수 있으며, 사용자에게 최적화된 경험을 제공할 수 있습니다. 다양한 미디어 유형과 미디어 기능을 결합하여 웹 페이지를 보다 유연하고 동적인 레이아웃으로 설계할 수 있습니다.

코딩 스쿨 CSS