부트스트랩4에 card가 추가됐다. 그리고 며칠 전에 티스토리 블로그에 인기 글을 추가할 수 있게 됐다. 며칠 전까진 불가능했다. 그래서 인기 글을 이 스킨을 추가했는데 세로로 나열되는 것이 마음에 안 들었다. 참고로 티스토리 블로그의 인기 글 치환자에 대해서는 여기를 보면 된다.


그래서 이 글 아래에 카테고리 다른 글이 부트스트랩4의 card를 이용했다. card를 이용하여 가로로 나열하기로 했다. 인기글은 5컬럼이어야 하고 부트스트랩 그리드는 12컬럼이다. 5의 배수가 안 되니 그냥 컬럼을 동일한 폭으로 하기 위해서는 위 그림에 나왔듯 col을 사용하기로 했다. 부트스트랩 4에서 컬럼을 동일하게 하기 위해서 col만 사용하면 된다. 3에서는 없었는데...


이렇게 col만 사용하면 스마트폰에서 컬럼을 제어할 방법이 없었다. 그래서 스마트폰 등 모바일 기기에서는 d-none d-md-block을 사용해서 인기 글 모듈을 숨겨야겠다. 스마트폰에서 인기글 5개가 가로로 나열되면 너무 보기가 안좋다. 만약 인기글이  4개라면 col-md-4 col-6으로 그리드를 만들었을 것이다. 이 그리드의 인기 글은 PC에서 4개, 스마트폰에서 2개가 된다는 말이다.


결과는 아래 Popular Posts를 클릭하면 된다. 그것은 부트스트랩 card를 사용했다.


윈도우10 홈과 프로 차이

댓글 0