CSS 미디어 쿼리 소개

특별한 명령어 @media가 있으며, 이 명령어를 사용하면 화면 너비에 따라 다른 코드를 실행할 수 있습니다.

다음 예제에서는 화면 너비가 300px부터 1200px까지일 때 일부 코드가 실행됩니다:

css@media (min-width: 300px) and (max-width: 1200px) {
  /* 일부 코드 */
}

다음 예제에서는 화면 너비가 300px보다 클 때 일부 코드가 실행됩니다:

css@media (min-width: 300px) {
  /* 일부 코드 */
}

다음 예제에서는 화면 너비가 1200px보다 작을 때 일부 코드가 실행됩니다:

css@media (max-width: 1200px) {
  /* 일부 코드 */
}

우리의 미디어 쿼리에 어떤 코드를 작성해 봅시다. 예를 들어, 특정 화면 크기에서 단락을 빨간색으로 칠하겠습니다:

css@media (min-width: 300px) and (max-width: 1200px) {
  p {
    color: red;
  }
}

@media (min-width: 300px) and (max-width: 1200px) {
  p {
    color: red;
  }
}

이제 화면 너비에 따라 단락을 다양한 색상으로 칠해 봅시다:

css@media (max-width: 300px) {
  p {
    color: red;
  }
}
@media (min-width: 300px) and (max-width: 900px) {
  p {
    color: green;
  }
}
@media (min-width: 900px) and (max-width: 1200px) {
  p {
    color: blue;
  }
}
@media (min-width: 1200px) {
  p {
    color: orange;
  }
}

cssp {
  font-size: 20px;
}

cssp {
  font-size: 30px;
}

cssp {
  font-size: 15px;
}

cssp {
  font-size: 20px;
}

cssp {
  font-size: 30px;
}