이 블로그에는 부트스트랩을 사용하고 있다. 블로그의 가독성을 올리기 위해서 많은 시간을 할애하는데 대부분 데스크탑과 모바일만을 중심으로 작업을 진행하였다. 그러다보니 태블릿 환경에서 최악의 가독성을 보이고 있었다.

문제는 .col-md 클래스만을 사용하여 크기를 조절했기 때문이었다. 처음 부트스트랩을 배운것도 다른 레이아웃에 적용된 것을 보면서 익혔기 때문에 그냥 그리드를 조절하려면 md 클래스를 사용해야 하는 줄 알았다. 하지만 그건 일부 디바이스의 크기에 대한 크기였다. md 뿐 아니라 xs, sm, lg가 있다.

Column Class

  • .col-xs-x / 768px 이하 - 휴대폰
  • .col-sm-x / 768px 이상 - 태블릿
  • .col-md-x / 992px 이상 - 10인치 태블릿(세로), 데스크톱 화면 분할
  • .col-lg-x / 1200px 이상 - 10인치 태블릿(가로), 데스크톱

10인치 태블릿(가로, 세로)와 데스트톱 화면(16:9) 분할은 필자가 임의로 추가한 환경이다. x의 크기는 12이하로 조절되어야 하며 12는 디바이스의 최대 너비의 크기가 되며 12다음의 그리드는 자동으로 다음행으로 내려간다.

가령 필자의 블로그는 쉐어버튼은 lg-2, 본문은 lg-8로 구성하고자 하였으나 태블릿(세로)나 사용자가 화면을 반으로 나누어 사용하는 경우에는 최악의 가독성을 보여준다. 따라서 쉐어버튼은 md-2, 본문은 md-10을 추가해 주어야 한다. 하지만 쉐어버튼은 변화가 없으므로 md-2만 적용하면 되겠다.

1
2
3
4
<div class="row">
    <div class="col-md-2">쉐어</div>
    <div class="col-lg-8 col-md-10">본문</div>
</div>
WRITTEN BY

배진오

하고싶은 건 다 하면서 사는게 목표
im@baejino.com

comments powered by Disqus