유동적 스킨 구조에 알맞은 미디어쿼리(Media Query)와 DIV 태그 조합 활용

2015년 12월 24일
재미있게 읽어주세요!

유동적 스킨 구조에 알맞은 미디어쿼리(Media Query)와 DIV 태그 조합 활용

웹 구조를 프로그래밍할 때 특정 위젯이나 영역을 모바일과 데스크탑 뷰(View)로 나누게 됩니다.

즉, 트래픽 절약을 위해 A라는 이미지를 PC에만 출력시키고 모바일에선 제외하고 싶을 때 ‘미디어쿼리’를 쓰게 되는데요.

스타일 시트에 명령 1줄을 추가해주는 것만으로 구독자가 느끼는 경험을 획기적으로 끌어올릴 수 있습니다.

(개인적으로 애드센스 배치에 큰 도움이 되지 않을까 싶네요.)

 

15-12-24-img1-1.38

  

Media Query

 

1. 우선 적용할 부분을 <div id=”name”>을 입혀 감싸줍니다.(Class로 해도 딱히 상관은 없구요.)

2. 그 다음 CSS 편집기를 열어 동적뷰 옵션을 넣어주는데,

 예를 들어 가로폭이 300픽셀보다 낮은 장치에서 안보이게 하려면

⇢ @media all and (max-with: 300px) { #name { display: none; } } 이렇게 넣어주면 되는 것이죠.

반대로 그 이상의 디스플레이가 타겟이라면 max를 min으로 교체하세요.



댓글을 남겨주세요!

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>