부트스트랩4에서 마음에 들었던 컴포넌트

부트스트랩4은 3에서 많이 변했다. 만약 3을 그대로 사용한다면 4에서 특정한 것은 아예 안 될 것이다. 예로 3에서 사용하던 캐러셀(carousel)의 모양은 크게 변하지 않아 그대로 사용하면 될 것 같지만 정의 방법은 180도 변해 4에서 3처럼 한다면 100% 깨진다. 여기에서 캐러셀에 대해서 적을 것이 아니니 줄이겠다. 

이 글에서 부트스트랩4를 사용해 티스토리 블로그 스킨을 만들면서 마음에 들었던 컴포넌트 하나에 대해 대해서 적으려고 한다. 

부트스트랩3 사용자에게 card 콤포넌트는 생소할 것이다. 왜냐하면, 부트스트랩3에서 card라는 것이 없었기 때문이다. card는 3에 있던 panel과 비슷하다고 생각하면 된다. 그렇다고 같지는 않다. 참고로 4에서 panel이 없어졌다. 그리고 4의 collapse에도 panel을 사용하지 않는다. 

이 블로그가 아닌 부트스트랩4로 스킨을 만들 때 card를 정말 많이 사용했다. 그만큼 card가 아주 유용하기 때문이었다. 부트스트랩이 아닌 사이트에서 카드와 같은 것을 많이 사용한 것을 많이 본다. 내가 사용한 스킨을 만들 때 카드를 사용한 곳은 위 그림과 같은 카테고리 다른 글, 인기 글, 특히 card-columns을 사용하면  아래 그림과 같은 벽돌 모양의의 형태를 만들 수 있다는 것이 좋았다. 참고로 벽돌 모양은 커버에서 사용했다.

그리고 아래 그림처럼 를 사용해서 간편하게 이미지 위에 텍스트를 삽입하는 것도 좋았다. 예전에 CSS를 사용하면 못하는 것이 아니었으나 귀찮았다. 부트스트랩을 사용하면 클래스에 card-img-overlay만 추가하면 끝난다.

부트스트랩4에서 나에게 유용한 컴포넌트는 없었다. 그러나 4에 추가된 유틸리티에 mt-*,pb-* 등 여백과 마진을 간단히 하는 것이 처리할 수 있는 것이 좋았다. 편리한 것은 좋은데 정식 CSS 정의를 잊는 것이 걱정됐다. 예로 위 여백이 style="padding-top:수치"으로 하지 않고 부트스트랩4에서는 간단한 pt-수치로 하면 된다.