반응형
반응형 블로그 또는 웹사이트에 적용하기 편한 방법입니다.
노출시키고 싶은 또는 감추고 싶은 요소를 컨트롤하는 방법은 많지만
그중에 가장 간단하게 적용하기 좋은 방법은 미디어쿼리를 이용하는 방법입니다.
우선 아래와 같은 특정요소를 숨기기위한 CSS 코드를 살펴보겠습니다.
.notice-go-to-index {
display: none;
}
위와 같은 기본CSS 코드에 media-query를 사용해 보겠습니다.
아래 코드를 보시면 @media로 시작하고 max-width를 보실 수 있습니다.
@media screen and (max-width: 1000px) {
.notice-go-to-index {
display: none;
}
}
위 코드는 최대 화면 크기가 1000px 까지는 노출이 된다는 것입니다.
웹 브라우저 창이 999px로 줄어들면 사라진다는 것입니다.
아래 CSS 코드도 살펴보겠습니다.
@media screen and (min-width: 1000px) {
.notice-go-to-index {
display: none;
}
}
다른 건 없어 보이지만 이 코드는 min-width를 사용하였습니다.
min-width의 표현방식은 0~999px 까지는 화면에 표시하고, 1000px이 되면 화면에 보이지 않습니다.
어때요? 정말 간단하게 사용하기 좋습니다.
반응형