부트스트랩 Responsive Utility를 이용한 해상도의 최적화된 레이아웃 구성

Bootstrap의 가장 핵심적인 반응형 웹을 구축 할수 있는 기반이 되는  Responsice Utility Classes를 제공한다. 이 class를 이용하면 화면에 크기변경에 따른 Callback을 해주기 때문에, 메뉴를 보였다가 화면이 작을 경우 숨기는등 해상도 변경에 따른 작업을 할 수 있다.

responsive.less에 클래스가 호출 되는 해상도를 정의 할 수 있다. 

Class	Phones 767px and below	Tablets 979px to 768px	Desktops Default
.visible-phone	Visible	Hidden	Hidden
.visible-tablet	Hidden	Visible	Hidden
.visible-desktop	Hidden	Hidden	Visible
.hidden-phone	Hidden	Visible	Visible
.hidden-tablet	Visible	Hidden	Visible
.hidden-desktop	Visible	Visible	Hidden

기본적으로 위의 해상도에 따라 class가 호출 되며, 사용방법은 아주 간단하다. <span>에 특정 해상도로 변했을때 하는 작업을 하면 된다.

phone 
tablet 
desktop 

아래는 실제 코드로 테스트를 해보았다. 아래는 해상도별로 메시지가 바뀐다.

현재 화면은 폰에 최적화 되어있습니다.

현재 화면은 테블릿에 최적화 되어있습니다.

현재 화면은 데크스톱에 최적화 되어있습니다.

언제 사용하기 좋을까?

구글 에드센스 광고를 붙일경우 크기가 고정이기 때문에, 가로로 긴 광고를 붙이면 테블릿이나 폰의 경우에는 짤리게 된다. 이런 경우에 각각의 해상도에 따라서 화면에 최적화된 광고를 넣으면 좋을 것이다. 

이런 식으로 특정 고정된 크기가 있을 경우 해상도 별로 처리하는 경우 많은 도움이 된다.

부트스트랩 2.3.2 기반으로 작성된 글입니다.