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


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


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









































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



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





phone
tablet
desktop





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


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

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

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



언제 사용하기 좋을까?


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




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


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