부트스트랩4에서 그림자 만들기

부트스트랩, 버전3에서 지원하지 않던 그림자를 4에서 지원하니 이 글에서 4의 그림자에 대해 적으려 한다. 참고로 3에서 지원하지 않는 기능이 4에 많다.

위에서 적었듯 부트스트랩 3는 그림자를 지원하지 않는다. 그래서 그림자를 만들고자 한다면 CSS의 그림자를 이용할 것이다.  나는 CSS보다 그림자에 대한 CSS 옵션을 몰라도 되는 간편하게 그림자를 만들어주는 페이지를 이용한다. 그림자만이 아니고 예전 그라디언드 배경, 버튼 등을 만들 때도 CSS 옵션을 알기 보다 자동으로 만들어주는 웹페이지를 이용했다. 왜냐하면 간편하기 때문이다. 그런 것 때문에 내가 부트스트랩을 사용하는 것도 있다. 

CSS 그림자(Shadow)에 대해 100% 모르는 것은 아니다. 약 70% 정도는 안다고 생각한다. 부트스트랩 3에서 그림자를 지원하지 않으니 알게 됐고 수정하려면 알아야 됐다.

부트스트랩 4에서는 class에 shadow를 추가하면 박스에 그림자가 생긴다. 결과(Result)의 Default Shadow가 된다. shadow-sm, shadow-lg은 그림자의 번짐의 정도라는 것을 알 수 있다. 그림자와 관계는 없지만 박스 모서리 부분을 둥글게 하고 싶다면 rounded를 추가하면 된다. 

CSS의 그림자를 보니 박스 그림자(box-shadow)와 텍스트 그림자(text-shadow)가 있었는데 이 글은 텍스트 그림자다. 현재 부트스트랩4는 박스 그림자만 지원하는 것 같다. 텍스트 그림자는 부트스트랩 5에서 추가될 것 같다.

각진 사진 부분을 둥글게 하는 것도 rounded를 사용한다는 것을 알 것이다. 부트스트랩 4가 아닌 3에서 각진 부분을 둥글게 하는 rounded가 아닌 아래 그림처럼 img-rounded이다. 4에서는 img-이 없는 rounded다.  이것에 대해서는 이미지를 설명할 때 적었었다. 참고로 아래 사진은 플리커에서 가져와 삽입한 후 class에 img-rounded를 추가했다.

이 블로그는 3으로 만들었지만 내 다른 티스토리 블로그가 부트스트랩 4로 만들어 커버에 그림자를 사용했다. 그림자의 크기는 기본으로 하여 단지 클래스(class)에 shadow만을 추가했다. 사용하지 않으면 잊게 된다. 부트스트랩으로 그림자를 주는 것이 간단한 것 같지만 CSS로 박스에 그림자 주는 것도 주는 것도 간단하다. CSS로 하는 것이 더 다양하다.