특정 창크기에서 특정요소 숨기기 (미디어쿼리 사용)

특정 창크기에서 요소 숨기기

  기겸배님께서 문의주신 내용입니다.

"근데 카테고리 오른쪽에 있는 애드센스의 경우 Readiz 님 블로그 처럼 화면을 줄이면 제대로 동작 하는거 같은데 문제는 화면을 줄이면 Readiz 님 블로그처럼 다음페이지로 넘기는 오른쪽에 큰 화살표가 없어져야 하는데 제 블로그에선 애드센스와 화살표가 겹쳐서 표시가 되네요 화면을 줄이면 화살표가 없어지게 하는건 어떻게 하는건가요?"

 이를 구현하는 방법은 여러가지가 있겠지만 가장 간단한 방법은 미디어쿼리(media-query)를 이용하는 것입니다. 우선 특정 요소를 숨기기 위한 CSS코드는 다음처럼 사용될 것입니다.

	
#outer_btn_right {
  display: none;
} 
	

  여기에 이제 media-query를 사용해봅시다. 전체를 감싸주는 형식으로 구현합니다.

	
@media screen and (max-width: 1800px) {
  #outer_btn_right {
    display: none;
  }
} 
	

  media-query를 사용하기 위해서는 @media로 시작하는 구문을 사용합니다. 그리고 특정 조건을 입력합니다. 예시처럼 @media screen and (max-width: 1800px)를 사용한다면 최대 화면크기가 1800px가 될때까지 감싸고 있는 구문이 적용된다는 것입니다. 즉, #outer_btn_right에 해당하는 요소는 0~1800px의 창크기까지 나타나지 않게 되겠죠. 그렇다면 아래처럼 하면 어떻게 될까요?

	
@media screen and (min-width: 1800px) {
  #outer_btn_right {
    display: none;
  }
} 
	

  max에서 min으로 바뀌었습니다. 감이 오시죠? 1800px이 최소 되어야 안의 구문이 실행됩니다. 즉, 0~1799px까지는 #outer_btn_right의 요소가 화면에 표시되다가 1800px부터 숨겨질 것입니다.

  media-query를 처음 적용하시면 헷갈릴 수도 있습니다만 적용하기 간단하게 하려면

1. 경계가 되는 창크기를 생각한다.

2. min인지 max인지를 결정한다.

  위 두 스탭으로 생각하시면 쉽습니다. 일단 적용해보고 아니다 싶으면 min은 max로 max는 min으로 변경해보시면 되겠죠. 조금 삽질이 예상되는 적용법입니다만 어찌됐든 적용은 될 것입니다.