12칼럼과 썸네일 수

유튜브를 보면 가끔 썸네일이 가로로 5개로 나온다. 이것을 보면 만들고 싶은 생각이 든다. 예전에 이 블로그에 썸네일 5개를 만들었다. 그런데 스마트폰이 아니라 PC에서 썸네일이 너무 작아  그냥 썸네일 4개를 택한 기억이 난다. 스마트폰과 태블릿에서 썸네일이 작을 일 없다. 왜냐하면 이 글을 읽으면 알 수 있다.

---

 

아래 그림처럼 부트스트랩은 12개의 칼럼을 조합하는 12 칼럼 그리드 시스템이다. 그런데 12 칼럼인 그리드 시스템을 택하고 있는 부트스트랩에서 방법을 쉽게 생각할 수 없다. 만약 이 블로그는 부트스트랩 버전 3으로 만들었고 3으로 쉽게 하고자 한다면 10이나 15 칼럼이 좋을 것 같다.

 

 

내 노트북 화면을 기준으로 이 블로그 홈에 썸네일을 가로로 썸네일이 4개를 사용하고 있다. 또한 카테고리 다른 글 썸네일인 경우 마찬가지로 4개로 하고 있다. 단, 스마트폰에서는 2개로 나오게 했다. 왜냐하면 스마트폰 화면 크기도 커서 내 스마트폰에서 썸네일 1은 크게 보였다.

 

참고로 아래 그림을 보면 홈 화면인과 카테고리 다른 글의 썸네일은 노트북 이상에서는 4 칼럼, 태블릿 PC에서는 3 칼럼, 스마트폰에서는 2 칼럼이 나오게 했다. 이것은 내 마음에 따라 변할 수 있다. 참고로 버전 4와 5에서는 xs라는 것이 없다.

 

 

나는 편하게 md를 노트북, sm을 태블릿 PC, xs를 스마트폰이라 생각하는 경향이 있다. 버전 3에서는 md, sm, xs를 기기와 연관시키는 경향이 있다. 10년 전, 2013년에 정식 버전이 나온 버전 3에서 제어할 수 없는 기기가 많지 않았다. 참고로 lg는 데스크톱이라 생각하고 현재 부트스트랩 최신 버전은 5.2이고 xs가 없어지고 xl고 xxl이 추가됐다. 

 

---

 

부트스트랩 3은 768px 미만에서 1200px 이상까지 설정 가능하다. 4는 567px 미만에서 1200px 이상까지 설정 가능하며 5의 경우는 567px 미만에서 1400px(XXL) 이상까지 설정 가능하다. 그러면 부트스트랩 5를 사용하면 더 다양하게 설정할 수 있다.

 

레이아웃 전체 폭을 브라우저에 꽉차게 했더니 4개의 썸네일은 크다는 느낌을 받았다. 버전 4나 5에서 레이아웃 폭을 기기에 따라  설정할 수 있다고 알고 있다. 부트스트랩에 대해 쓰면서 10년이 지난 3을 버리고 5을 사용하고 싶을 때가 많지만 3으로 만든 것이 많아서...