부트스트랩3과 4에서 이미지 차이

이 블로그의 스킨은 부트스트랩 버전 3으로 만들었디. 부트스트랩 4로 스킨을 만들면서 이미지에 대한 것을 많이 사용하면서 3과 차이를 많이 느껴 적으려 한다.

위는 부트스트랩 버전 3에서 이미지를 둥글게 하는 방식이다. 티스토리 블로그는 글에 CSS가 적용되므로 아래처럼 바로 적용했다. 아래에서 왼쪽 마지막에 있는 것은 원본이다. 왼쪽에서 차례로 img-rounded, img-circle, img-thumbnail이다. 자세히 적으면 3에서 사각형 네 모서리를 약간만 둥글게 하는 것은 .img-rounded라 하고 완전히 둥글게 하는 것은 .img-circle이라고 한다. 그리고 썸네일로는 .img-thumbnail이라고 한다. 

위와 같이 하면 방문자는 그림이 아니라 퍼가기 어렵다. 만약 글에서 CSS를 지원하지 않는 블로그나 카페에 퍼가면 100% 깨진다. 네이버 블로그나 다음 블로그는 아마 대부분의 CSS를 지원하지 않을 것이다. 예전에 내 글을 퍼간 곳을 봤더니 엉망이었다. 왜냐하면, 그 글에 CSS를 사용해 효과가 나타나게 했기 때문이다. 그래도 퍼갔다. CSS나 스크립트를 사용하면 퍼가기 어렵게 하는 장점이 있으나 내가 어렵다는 단점이 있다. 

그건 그렇고 위는 부트스트랩 버전 4 소스와 결과로 3에서 각진 모서리를 약간만 둥글게 할 때 img-rounded라고 했지만 4에서 rounded라고 변했다. 완전히 둥글게 하는 것은 img-circle에서 rounded-circle이라 했다. 그리고 썸네일을 만드는 것을 3과 동일하게 img-thumbnail을 사용한다.

소스는 HTML을 누르면 볼 수 있고 결과는 Result를 누르면 된다. 참고로 위는 JSFiddle사용했으며 그것을 글에 삽입한 것이다. 티스토리 블로그는 글에 CSS만 아니라 JS도 삽입할 수 있다. 네이버 블로그는 삽입할 수 없으니 하지 말았으면 한다.

위 사항을 그림으로 정리하면 위 그림과 같다. 그리고 버전 4에서 이미지 배치 등 3에 없던 많이 추가 됐는데 그것은 부트스트랩 홈페이지 등 여러 곳에서 확인했으면 한다.

윈도우10 홈과 프로 차이