부트스트랩4에서 테두리 만들기

전에 적었듯 부트스트랩 버전4에는 3에서 볼 수 없었던 유틸리티를 볼 수 있다. 그 중 하나 테두리를 만드는 것이다. 아래 사진은 플리커에서 가져와 HTML  이미지 태그로 글에 삽입한 것이다. 에디터의 사진으로 삽입한 것이 아니다. 이 블로그 스킨은 부트스트랩 3으로 만들었는데 테두리를 지원하지 않아 CSS를 사용해 테두리를 만들었다. CSS로 테두리를 만드는 것을 어렵지 않은데 귀찮다.  

만약 부트스트랩 4였다면 border라는 것만 추가하면 간단히 테두리를 만들 수 있다. 테두리 유틸리티 옵션을 보니 색깔도 부트스트랩을 모르면 어렵지만 알면 익숙한 primary, danger, warning 등 다양했다. 위와 같이 빨간색과 비슷하게 하려면 class="border-danger"라고 하면 될 것이다. 그런데 알아야 할 것이 부트스트랩에서 danger는 red가 아니다. 그리고 테두리도 위, 아래, 왼쪽, 오른쪽으로 가능했다. 그 외 여러 옵션이 있었다. 

가장 마음에 드는 부분은 사진의 모든 모서리가 아닌 한 부분만 둥글게 할 수 있다는 것이 좋았다. 부트스트랩 3에서는 아래 그림처럼 4개 모든 부분을 둥글게 해야 했다. 

그리고 4에서는 아래 그림처럼 테두리를 둥글게 하는 것이 이미지(사진)만 아니라 박스도 둥글게 할 수 있다는 것이 너무나 마음에 들었다. 박스의 모서리 부분은 다양하게 할 수 있다. CSS로 해야 한다면 은근히 귀찮다. 박스까지 둥글게 하려면 CSS로 해야 한다.