부트스트랩 (63) 썸네일형 리스트형 드디어 부트스트랩5로 변경 2013년에 버전 3 부트스트랩이 나온 후 그 후 약 10년 동안 이 블로그도 버전 3을 고집했다. 그동안 부트스트랩 버전 3으로 꾸민 스킨을 버리기 힘들었다. 2016년에 버전 4나 2021년에 버전 5가 출시했어도 버전 3을 고집했다. 최근 블로그 스킨에 신경 쓰지 않으니 버전 5로 변경하는 것에 대해 생각하게 됐다. 애드센스 수익이 100달러를 넘으면 변경하려고 했는데 100달러를 넘으려면 몇 달이 걸릴 것 같아 오늘 변경했다. 예전부터 또 다른 내 티스토리에 부트스트랩 5를 위한 스킨을 만들었었기 때문에 변경은 쉬웠다. 아래 그림을 보듯이 현재 기준으로 정식 버전은 5에서 5.3.3이고 이 블로그는 5.3.2를 사용 중이다. 나중에 css 및 js를 5.3.3이라는 숫자만 변경하면 된다. 예전에.. 12칼럼과 썸네일 수 유튜브를 보면 가끔 썸네일이 가로로 5개로 나온다. 이것을 보면 만들고 싶은 생각이 든다. 예전에 이 블로그에 썸네일 5개를 만들었다. 그런데 스마트폰이 아니라 PC에서 썸네일이 너무 작아 그냥 썸네일 4개를 택한 기억이 난다. 스마트폰과 태블릿에서 썸네일이 작을 일 없다. 왜냐하면 이 글을 읽으면 알 수 있다. 아래 그림처럼 부트스트랩은 12개의 칼럼을 조합하는 12 칼럼 그리드 시스템이다. 그런데 12 칼럼인 그리드 시스템을 택하고 있는 부트스트랩에서 방법을 쉽게 생각할 수 없다. 만약 이 블로그는 부트스트랩 버전 3으로 만들었고 3으로 쉽게 하고자 한다면 10이나 15 칼럼이 좋을 것 같다. 내 노트북 화면을 기준으로 이 블로그 홈에 썸네일을 가로로 썸네일이 4개를 사용하고 있다. 또한 카테고리 다.. 부트스트랩 5로 변경하려고 했지만 실패! 이 블로그 스킨을 부트스트랩 버전 3으로 만들었다. 그리고 부트스트랩 3은 2013.08.19에 출시됐으니 10년이 넘었다. 2016년에 버전 4가 출시했을 때 4로 만들고 싶었지만 3에 대한 미련이 남아 버전 5를 기약하면 버전 3을 유지했다. 그 후 2021년에 정식 버전 5가 출시됐다. 부트스트랩 버전 4와 5를 이 블로그가 아닌 다른 티스토리 블로그를 만들어 거기에서 여러 가지를 시험했다. 며칠 전 마음먹고 다른 블로그가 아닌 이 블로그 스킨을 버전 5로 변경했다. 이 글을 쓰는 지금을 기준으로 정확히 버전 5.2로 변경했다. 그런데 손댈 것이 정말 많았다. 내 다른 티스토리에서 적용한 버전 5로 만든 거의 완성된 스킨이어서 손댈 필요 없다고 생각했지만 그것이 아니었다. 내 눈에는 이 블로그에서 .. 부트스트랩에서 중단점을 기기로 생각하면 이해가 쉽다. 나는 이 블로그 스킨을 부트스트랩 버전 3으로 만들었다. 부트스트랩에서 버전 5 그리드는 버전 3의 것을 따르는 것이 아닌 아래 그림을 보듯이 버전 5의 경우도 버전 4와 비슷하다. 버전 3을 중점적으로 익힌 나는 헷갈린다. 버전 4와 5의 중단점을 볼 때 숫자가 변해 헷갈렸다. 예로 버전 3에서는 md가 992px과 같거나 큰 경우였다면 버전 4와 5부터는 768px로 됐다. 그리고 기기로 생각한다면 992px은 노트북이고 768px은 태블릿 PC라 인식했다. 그러면 버전 4와 5에서는 992px과 같거나 큰 중단점은 md가 아닌 lg가 되고 md는 768px에 해당된다. 부트스트랩 버전 3만 출시했을 때 레이아웃을 만드는 사이트가 많았다. 그때 사이트 대부분이 이용자가 원하는 레이아웃을 선택하게 했다.. 부트스트랩, 변화된 container 부트스트랩 버전 3의 container에 대한 내용은 특별히 배울 필요없이 단순하다. 콘텐츠를 포함하는 container와 container 가로 폭이 100%인 container-fluid 뿐이었다. 하지만 버전 4를 배울 때 container의 중첩점에 대해 변하는 것이 추가됐는데 버전 3처럼 단순할 것이라 생각하고 그냥 지나쳤다. 그래서 버전 5에서 1버전 4 이상부터 변한 container가 어떻게 변했는지 아래에서 적으려 한다. 버전 3에서 가로 폭이 100%되게 하려면 container-fluid를 한다고 알고 있다. 버전 4와 5를 여기에서 확장하여 container-중첩점(Breakpoints)을 사용하여 다양하게 설정할 수 있다. 특정 기기나 해상도에 도달하면 가로 폭을 100% 되게 할.. 부트스트랩, 콘텐츠를 포함하는 container 대부분 클래스(class)나 아이디(id) 이름을 만들 때 container라고 한다. 부트스트랩 3에서도 마찬가지로 container라고 콘텐츠 등을 포함하는 채우는 컨테이너가 있다. 이 컨테이너에 두 가지가 있는데 1200px인 고정과 가로폭이 브라우저 가장자리가 경계인 유동이 있다. 고정은 container라 하고 유동은 fluid를 더 해 contain-fluid라 한다. 이 블로그는 부트스트랩 버전 3으로 만들었는데 처음에 고정인 container를 사용하다가 나중에 fluid로 변경했다. 처음 내가 container-fluid를 사용할 때 아래 그림처럼 경계와 여백이 없어 보기 좋지 않아서 고정인 container를 사용했다. 아래 그림의 회색 경계는 브라우저 가장자리라 생각하면 된다. con.. 다양한 부트스트랩 버전 소스를 얻을 수 없구나! 부트스트랩 2~4까지 공부하면서 https://bootsnipp.com/에서 부트스트랩 다양한 버전에 대한 소스를 얻었다. 그 사이트에서는 단지 부트스트랩 2, 부트스트랩 3, 부트스트랩 4 이런 식으로 소스를 제공하는 것이 아니다. 부트스트랩 3에 대한 소스를 제공한다면 단지 한 버전만 칭하여 제공하는 것이 아니라 3의 다양한 버전으로 제공한다. 가령 3.0.0, 3.0.1, 3.1.0, 3.2.0, 3.3.0이라고 세세한 버전에 맞는 소스를 제공한다. 만약 사용자가 부트스트랩 버전 3.0.0 사용한다면 CSS와 JS 또한 3.0.0이다. 그 사용자가 3.3.0 소스를 사용한다면 안 될 것이다. 되기 위해서는 부트스트랩 3.3.0에 맞는 CSS와 JS를 사용해야 한다. 부트스트랩은 업그레이드한 후 자주.. 내가 알고 있는 부트스트랩5 정보 이 블로그는 부트스트랩 3으로 만들었고 다른 티스토리 블로그를 부트스트랩 4에서 5로 변경하면서 정보를 얻었다. 부트스트랩 5는 jQuery를 사용하지 않기 때문에 jQuery를 많이 사용하는 이 블로그는 5로 변경할 수 없었다. 대신에 내 다른 티스토리 블로그를 부트스트랩 5로 변경했다. 부트스트랩 5가 jQuery를 버려서 다이내믹한 소스를 구하기 힘들었다. 부트스트랩 3과 4는 https://bootsnipp.com/에서 소스를 얻었는데 그 홈페이지는 이제 5에 대해 다루지 않아 너무 아쉽다. 대신 다른 홈페이지를 알았는데 5에 대한 멋진 소스가 많지 않아 만족스럽지 않았다. 내가 내 다른 티스토리 블로그를 5로 꾸미면서 알게 된 사이트는 아래 2개 사이트다. 아래 사이트가 좋았고 소스를 무조건 사.. 이전 1 2 3 4 ··· 8 다음
