HTML CSS 미디어쿼리(Media Query)란?

CSS 미디어쿼리란?

CSS 미디어쿼리는 브라우저의 환경에 따라 CSS 스타일을 적용하는 방법입니다. 미디어쿼리는 @media 키워드로 시작하며, 미디어 유형과 미디어 표현식을 괄호로 묶습니다.

@media screen and (max-width: 600px) {
  /* 화면 너비가 600px 이하일 때 적용되는 CSS */
}

위 예시에서는 화면 너비가 600px 이하일 때 @media 블록 내의 CSS가 적용됩니다.

CSS 미디어쿼리 활용방법

CSS 미디어쿼리는 화면 너비, 해상도, 장치 유형 등 브라우저의 환경에 따라 다양한 방식으로 활용할 수 있습니다. 다음은 몇 가지 예시입니다.

• 화면 너비에 따른 스타일링

화면 너비에 따라 다른 스타일을 적용하는 것은 CSS 미디어쿼리의 가장 기본적인 사용법입니다. 다음은 화면 너비에 따라 헤더의 크기를 조절하는 예시입니다.

header {
  /* 모든 화면에서 적용되는 스타일 */
  font-size: 20px;
}

@media screen and (max-width: 600px) {
  header {
    /* 화면 너비가 600px 이하일 때 적용되는 스타일 */
    font-size: 16px;
  }
}

위 예시에서는 모든 화면에서 헤더의 글씨 크기가 20px로 적용되고, 화면 너비가 600px 이하일 때 헤더의 글씨 크기가 16px로 조절됩니다.

• 화면 해상도에 따른 스타일링

화면 해상도에 따라 다른 스타일을 적용할 수도 있습니다. 다음은 화면 해상도가 1280x720 이상일 때 이미지를 넓게 보여주는 예시입니다.

img {
  /* 모든 화면에서 적용되는 스타일 */
  max-width: 100%;
}

@media screen and (min-resolution: 1280x720) {
  img {
    /* 화면 해상도가 1280x720 이상일 때 적용되는 스타일 */
    max-width: none;
  }
}

위 예시에서는 모든 화면에서 이미지의 너비가 100%로 설정되고, 화면 해상도가 1280x720 이상일 때 이미지의 너비가 제한되지 않고 화면 너비에 맞게 표시됩니다.

• 장치 유형에 따른 스타일링

장치 유형에 따라 다른 스타일을 적용할 수도 있습니다. 다음은 데스크톱에서는 메뉴를 왼쪽에, 모바일에서는 메뉴를 하단에 배치하는 예시입니다.

nav {
  /* 모든 장치에서 적용되는 스타일 */
  float: left;
}

@media screen and (max-width: 600px) {
  nav {
    /* 모바일에서 적용되는 스타일 */
    float: none;
    position: fixed;
    right: 0;
    bottom: 0;
    width: 100%;
  }
}

위 예시에서는 모든 장치에서 메뉴가 왼쪽에 배치되고, 모바일에서는 메뉴가 왼쪽으로 고정되어 화면 하단에 표시됩니다.

• 다양한 미디어쿼리 사용법

CSS 미디어쿼리는 다양한 조건을 사용하여 CSS 스타일을 적용할 수 있습니다. 다음은 몇 가지 예시입니다.

• 특정 해상도와 화면 방향을 지정할 수 있습니다.
• 특정 장치 유형을 지정할 수 있습니다.
• 특정 색상 모드나 텍스트 크기를 지정할 수 있습니다.
• 특정 프린터 설정을 지정할 수 있습니다.

CSS 미디어쿼리를 사용하여 다양한 브라우저 환경에서 사용자에게 최적화된 웹사이트를 만들 수 있습니다.