특정 창크기 줄어들면 특정요소 숨기기 미디어쿼리 CSS

미디어 쿼리 CSS 활용

반응형 블로그 또는 웹사이트를 구축할 때, 특정 요소를 화면 크기에 따라 숨기거나 노출시키는 방법은 매우 유용합니다. 그중 가장 간단하고 효과적인 방법은 미디어 쿼리를 사용하는 것입니다.

기본 CSS 코드

우선, 숨기고자 하는 특정 요소에 대한 기본 CSS 코드를 설정합니다. 예를 들어, 다음과 같은 클래스를 사용할 수 있습니다.

.notice-go-to-index {
  display: none;
}

미디어 쿼리 사용

이제 미디어 쿼리를 사용하여 특정 화면 크기에서 요소의 표시 여부를 제어할 수 있습니다.

1. 최대 화면 크기 기준

아래 코드는 최대 화면 너비가 1000px 이하일 때 요소를 숨기는 방법입니다.

@media screen and (max-width: 1000px) {
  .notice-go-to-index {
    display: none;
  }
}

이 코드에 따르면, 웹 브라우저 창의 너비가 999px로 줄어들면 해당 요소가 사라집니다.

2. 최소 화면 크기 기준

다음은 최소 화면 너비가 1000px 이상일 때 요소를 숨기는 방법입니다.

@media screen and (min-width: 1000px) {
  .notice-go-to-index {
    display: none;
  }
}

이 경우, 화면 너비가 1000px 이상일 때 요소가 사라지고, 0~999px 범위에서는 요소가 표시됩니다.

간단한 사용법

이렇게 미디어 쿼리를 활용하면, 웹사이트의 반응형 디자인을 손쉽게 구현할 수 있습니다. 특정 요소를 필요에 따라 숨기거나 노출시키는 기능은 사용자 경험을 개선하는 데 큰 도움이 됩니다.

마무리

미디어 쿼리를 활용한 CSS 코드는 반응형 웹 디자인에서 매우 유용한 도구입니다. 이 방법을 통해 다양한 화면 크기에서 최적의 사용자 경험을 제공할 수 있습니다. 이러한 기법을 적용하여 블로그나 웹사이트의 디자인을 더욱 향상시켜 보세요.