[반응형 웹] CSS3의 Media Query를 활용하여 다양한 조건에서 다른 css를 실행하는 방법

 

CSS3에서는 Media Query를 사용하여 다양한 디바이스의 화면 크기에 따라 콘텐츠를 적절하게 조절할 수 있습니다. Media Query는 웹 페이지의 스타일과 개별 요소를 조절하여 반응형 디자인을 구현하는 데 필요한 도구입니다. 이 글에서는 Media Query의 사용법을 알아보도록 하겠습니다.

 

Media Query의 기본 구조는 다음과 같습니다.

 

css

@media (조건) {
  /* 스타일 선언 */
}

화면 크기에 따른 적용:

 

css

@media (max-width: 767px) {
  /* 화면 너비가 767px 이하일 때 적용할 스타일 */
}

위의 코드에서는 화면 너비가 767px (픽셀) 이하인 경우에 스타일이 적용됩니다. 반대로, min-width를 사용하여 특정 화면 크기 이상일 때 스타일을 적용할 수도 있습니다.

css

@media (min-width: 768px) {
  /* 화면 너비가 768px 이상일 때 적용할 스타일 */
}

 

반응형

여러 조건 결합하기:
아래와 같이 and를 사용하여 여러 조건을 결합하여 적용할 수 있습니다.

css

@media (min-width: 768px) and (max-width: 1023px) {
  /* 화면 너비가 768px 이상이고 1023px 이하일 때 적용할 스타일 */
}

또한, 쉼표,를 사용하여 하나의 @media rule와 여러 가지 조건을 추가할 수 있습니다.

css

/* 화면 너비가 320px 이하이거나 480px 이하일 때 적용할 스타일 */
@media (max-width: 320px), (max-width: 480px) {
  /* 스타일 선언 */
}

기기 타입에 따른 적용:
media 속성에 screen 또는 print와 같이 디바이스 타입을 지정할 수 있습니다.

 

css

@media screen and (min-width: 768px) {
  /* 화면에 표시되는 디바이스에서만 적용할 스타일 */
}

@media print {
  /* 프린트 버전에서만 적용할 스타일 */
}

가로/세로 방향 (orientation)에 따른 적용:

orientation 속성을 사용하여 가로 방향 (landscape) 또는 세로 방향 (portrait) 화면에 적용하는 스타일을 정의할 수 있습니다.

css

@media (orientation: portrait) {
  /* 세로 방향 화면일 때 적용할 스타일 */
}

@media (orientation: landscape) {
  /* 가로 방향 화면일 때 적용할 스타일 */
}

이처럼 CSS3의 Media Query를 사용하여 웹 컨텐츠를 다양한 디바이스 및 화면에서 적절하게 보이도록 조절할 수 있습니다. 이를 통해 반응형 웹 디자인을 구현하면 사용자에게 좀 더 최적화 화면 구성을 제공할 수 있습니다.