[웹 디자인] 16일차: 미디어 쿼리 사용법

미디어 쿼리란?

미디어 쿼리는 특정 조건(예: 화면 크기, 해상도, 방향)에 따라 다른 CSS 스타일을 적용할 수 있게 해주는 CSS 기술입니다. 미디어 쿼리를 사용하면 다양한 기기와 화면 크기에 맞춰 웹 페이지의 레이아웃과 스타일을 조정할 수 있습니다.

미디어 쿼리 기본 문법

미디어 쿼리는 @media 규칙을 사용하여 정의합니다.

@media (조건) {
  /* 조건이 참일 때 적용할 CSS 스타일 */
}

예제:

/* 기본 스타일 */
.container {
  background-color: blue;
}

/* 화면 크기가 600px 이하일 때 적용 */
@media (max-width: 600px) {
  .container {
    background-color: red;
  }
}

미디어 쿼리 조건

미디어 쿼리는 다양한 조건을 사용하여 스타일을 적용할 수 있습니다. 주요 조건은 다음과 같습니다:

max-width와 min-width

• max-width: 조건이 참일 때, 지정한 너비 이하의 화면 크기에 스타일을 적용합니다.
• min-width: 조건이 참일 때, 지정한 너비 이상의 화면 크기에 스타일을 적용합니다.

예제:

@media (max-width: 768px) {
  .container {
    background-color: green;
  }
}

@media (min-width: 769px) {
  .container {
    background-color: blue;
  }
}

max-height와 min-height

• max-height: 조건이 참일 때, 지정한 높이 이하의 화면 크기에 스타일을 적용합니다.
• min-height: 조건이 참일 때, 지정한 높이 이상의 화면 크기에 스타일을 적용합니다.

예제:

@media (max-height: 600px) {
  .container {
    font-size: 14px;
  }
}

@media (min-height: 601px) {
  .container {
    font-size: 18px;
  }
}

orientation

• orientation: 화면의 방향을 지정합니다. portrait(세로) 또는 landscape(가로) 값을 가질 수 있습니다.

예제:

@media (orientation: portrait) {
  .container {
    background-color: yellow;
  }
}

@media (orientation: landscape) {
  .container {
    background-color: lightblue;
  }
}

aspect-ratio와 resolution

• aspect-ratio: 화면의 가로세로 비율을 지정합니다.
• resolution: 화면의 해상도를 지정합니다.

예제:

@media (min-aspect-ratio: 16/9) {
  .container {
    background-color: pink;
  }
}

@media (min-resolution: 2dppx) {
  .container {
    background-color: purple;
  }
}

복합 조건

미디어 쿼리는 여러 조건을 조합하여 사용할 수 있습니다.

and, or, not 조합

• and: 모든 조건이 참일 때 스타일을 적용합니다.
• or: 하나 이상의 조건이 참일 때 스타일을 적용합니다.
• not: 조건이 거짓일 때 스타일을 적용합니다.

예제:

@media (min-width: 600px) and (max-width: 1200px) {
  .container {
    background-color: lightgreen;
  }
}

@media (min-width: 600px), (orientation: landscape) {
  .container {
    background-color: orange;
  }
}

@media not all and (max-width: 600px) {
  .container {
    background-color: grey;
  }
}

반응형 디자인을 위한 미디어 쿼리 예제

모바일 우선 접근 방식

모바일 우선 접근 방식은 기본 스타일을 모바일에 맞추고, 더 큰 화면에서만 미디어 쿼리를 사용하여 스타일을 조정합니다.

예제:

/* 기본 모바일 스타일 */
.container {
  background-color: white;
  padding: 10px;
}

/* 태블릿 스타일 */
@media (min-width: 600px) {
  .container {
    background-color: lightgrey;
    padding: 20px;
  }
}

/* 데스크탑 스타일 */
@media (min-width: 1024px) {
  .container {
    background-color: darkgrey;
    padding: 30px;
  }
}

데스크탑 우선 접근 방식

데스크탑 우선 접근 방식은 기본 스타일을 데스크탑에 맞추고, 더 작은 화면에서만 미디어 쿼리를 사용하여 스타일을 조정합니다.

예제:

/* 기본 데스크탑 스타일 */
.container {
  background-color: darkgrey;
  padding: 30px;
}

/* 태블릿 스타일 */
@media (max-width: 1024px) {
  .container {
    background-color: lightgrey;
    padding: 20px;
  }
}

/* 모바일 스타일 */
@media (max-width: 600px) {
  .container {
    background-color: white;
    padding: 10px;
  }
}

결론

미디어 쿼리는 다양한 기기와 화면 크기에 맞춰 웹 페이지의 스타일을 조정하는 데 필수적인 도구입니다. 다양한 조건을 사용하여 반응형 디자인을 구현할 수 있으며, 모바일 우선 접근 방식과 데스크탑 우선 접근 방식을 통해 다양한 전략을 적용할 수 있습니다. 이번 글에서는 미디어 쿼리의 기본 문법과 다양한 사용법에 대해 배웠습니다.

다음 글에서는 플렉스박스를 이용한 반응형 레이아웃에 대해 알아보겠습니다.

다음 글에서 만나요!