IT.인터넷.생활 관련/부트스트랩 (98) 썸네일형 리스트형 드디어 부트스트랩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이라는 숫자만 변경하면 된다. 예전에.. overflow-hidden 때문에 고생했다. over-hidden(overflow:hidden) 때문에 몇 시간을 고생했다. 예로 물체가 영역을 벗어나면 벗어난 부분은 보이지 않게 overflow-hidden을 사용했는데 자꾸 보이는 것이다. 그런데 다양한 방법을 사용해도 영역을 div에 클래스를 사용해서 별 방법을 사용해도 특정 영역을 벗어난 부분을 없앨 수 없었다. 그래서 CSS를 사용하지 말고 부트스트랩5를 사용하니 부트스트랩 5에 정의된 overflow를 사용하자고 생각했다. 부트스트랩에 보면 CSS와 비슷하게 overflow도 정의된다. 비슷해서 가끔 헷갈린다. 부트스트랩 5에서는 클래스를 overflow-hidden이라면 하면 된다. 그랬더니 감쪽같이 됐다. 참고로 이 블로그는 부트스트랩 버전 3이고 3에서는 overflow는 정의되지 .. 부트스트랩5 소스와 테마의 수, 해결은 시간 이 블로그 스킨은 부트스트랩 버전 3으로 만들었다. 버전 3이 2015년에 출시했고 4나 5과 나온 후에 이 블로그 스킨도 4나 5로 변경하려고 했지만 그것이 쉽지 않았다. 2021년 5월 5일에 버전 5가 나왔을 때는 변경하려고 큰 마음먹고 멋있게 만들고 싶었지만 그것이 마음대로 되지 않았다. 이 블로그를 많이 존재하는 부트스트랩 3 소스를 보고 만들었다. 하지만 부트스트랩 5가 출시될 때만 하더라도 테마나 소스가 적었다. 직접 내가 창조적으로 할 수 있었지만 실력이 모자라 시간이 엄청 소모됐다. 버전 4에 대한 테마나 소스는 많았으나 5가 출시됐는데 4로 꾸미고 싶지 않았다. 무료 테마 2021.5.5. 이후 시간이 흐른 지금, 부트스트랩 5로 만든 테마나 소스가 많아졌다. 전에 몰랐던 https:/.. 부트스트랩5 폰트 아이콘 이 글에서 부트스트랩 버전 5에서 아이콘에 대해 적으려 한다. 이 블로그는 부트스트랩 버전 3으로 만들었다. 버전 3에서 사용할 수 있는 아이콘이 216개뿐이었다. 그래서 부트스트랩을 사용하면서 Font Awesome이라는 사이트에서 2,018개의 무료 폰트 아이콘을 사용 중이다. 참고로 유료로 사용한다면 2,018개가 아닌 19,403개가 된다. 이 블로그 폰트 아이콘에 대해서는 아래 글에서 자세히 설명했다. 이 블로그에서 사용하는 폰트 아이콘 이 블로그는 부트스트랩 버전 3으로 만들었고 다른 티스토리를 만들었다. 거기에서 버전 5의 여러 기능을 보고 있다. 알고 있듯이 버전 5는 아이콘을 제공하므로 1,500개 이상의 아이콘이 있는 고 min-blog.tistory.com 부트스트랩이 버전 5로 업그.. 부트스트랩5에 적절한 라이트박스를 찾았다. 이 글에서 부트스트랩 버전 5에서 사용할 수 있는 라이트박스에 대해 적으려고 한다. 이 블로그에서 사용하고 있는 아래 라이트박스는 Lightbox for Bootstrap라는 라이트박스(lightbox)를 사용 중으로 마음에 든다. 라이트박스는 Jquery를 사용하는 부트스트랩 버전 3과 4에 사용할 수 있다. 티스토리에서 이미지를 클릭하면 나오는 것과 비슷하다. HTML 삽입 미리보기할 수 없는 소스 그런데 Jquery를 사용하지 않는 버전 5에서는 사용할 수 없다. 부트스트랩 버전 5에 적절한 멋있는 라이트박스를 찾았으나 마음에 드는 것이 없었다. 부트스트랩 공식 홈페이지에서 부트스트랩 5에 맞는 라이트박스로 https://trvswgnr.github.io/bs5-lightbox/에 있는 것을 소개하.. 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만 출시했을 때 레이아웃을 만드는 사이트가 많았다. 그때 사이트 대부분이 이용자가 원하는 레이아웃을 선택하게 했다.. 이전 1 2 3 4 ··· 13 다음
