부트스트랩 버전4, 스마트폰에서 요소감추기

부트스트랩 버전 4에서 Display에 대해서 적어보려 한다. 반드시 이 글은 부트스트랩 버전 4에 대해서 적는다는 것을 알고 글을 읽었으면 한다. 참고로 부트스트랩 버전3에서 display 속성이라는 것이 없었으며 4에서 display 속성이라는 것이 생겼다. 그러니 3에서 display 속성을 찾으면 고생한다.

부트스트랩3 그리드를 공부하면서 xs, sm, md, lg를 수치로 이해하지 않고 위 그림과 같이 기기로 이해했다. 즉 xs를 스마트폰, sm를 태블릿, md를 노트북, lg를 데스크탑이라고 이해했다. 간단히 이해한다는 것이... 그러니 글을 볼 때 xs를 수치가 아니라 스마트폰이라고 하니 이해하기 바란다. 

부트스트랩 3 버전에서 스마트폰 기기에서 특정 요소에 숨기려면 위 그림을 보듯이 hidden-xs라고 하면 간단히 해결됐다. 그런데 알고 있듯이 4에서는 xs라는 것이 없어졌다. 즉 버전 4에서 그리드를 만들 때  col-xs-4 이런 것은 인식하지 못한다. 4에서는 xs를 빼고 col-4라고 해야 한다. 만약 레이아웃 작성 시 col-md-4이라 했다면 된다. 왜냐하면 md는 버전 4에서 사용하기 때문이다. 

그래서 버전 4에서는 어떻게 할까 부트스트랩 4 공식 홈페이지의 Display 속성을 봤다. d-none, d-block 등 많아 복잡했다. 자세히 익힐 수 있었지만 간단히 스마트폰(xs)에서만 특정 요소를 숨기는 법만 알고 싶었다. 그 페이지에 스마트폰에 숨기기는 d-none d-sm-block 이라고 3과 다르게 d-none과 d-block를 혼합하는 것이었다. 모두 숨긴 후 스마트폰 이후로 보인다. 

내가 부트스트랩4로 만드는 블로그에 스마트폰에서 특정 요소를 위 그림 빨간 테두리 사각형을 보면 d-none d-block을 사용하여 숨겨지게 했다. 참고로 노란색 배경 사각형은 4에서 스마트폰에서 컬럼이 9라는 말이다. 만약 버전 3이었다면 xs를 더해서 col-xs-9라고 했을 것이다.