이 글에서 부트스트랩 버전 5에서 아이콘에 대해 적으려 한다. 이 블로그는 부트스트랩 버전 3으로 만들었다. 버전 3에서 사용할 수 있는 아이콘이 216개뿐이었다. 그래서 부트스트랩을 사용하면서 Font Awesome이라는 사이트에서 2,018개의 무료 폰트 아이콘을 사용 중이다. 참고로 유료로 사용한다면 2,018개가 아닌 19,403개가 된다. 이 블로그 폰트 아이콘에 대해서는 아래 글에서 자세히 설명했다. 이 블로그에서 사용하는 폰트 아이콘 이 블로그는 부트스트랩 버전 3으로 만들었고 다른 티스토리를 만들었다. 거기에서 버전 5의 여러 기능을 보고 있다. 알고 있듯이 버전 5는 아이콘을 제공하므로 1,500개 이상의 아이콘이 있는 고 min-blog.tistory.com 부트스트랩이 버전 5로 업그..
이 글에서 부트스트랩 버전 5에서 사용할 수 있는 라이트박스에 대해 적으려고 한다. 이 블로그에서 사용하고 있는 아래 라이트박스는 Lightbox for Bootstrap라는 라이트박스(lightbox)를 사용 중으로 마음에 든다. 라이트박스는 Jquery를 사용하는 부트스트랩 버전 3과 4에 사용할 수 있다. 티스토리에서 이미지를 클릭하면 나오는 것과 비슷하다. HTML 삽입 미리보기할 수 없는 소스 그런데 Jquery를 사용하지 않는 버전 5에서는 사용할 수 없다. 부트스트랩 버전 5에 적절한 멋있는 라이트박스를 찾았으나 마음에 드는 것이 없었다. 부트스트랩 공식 홈페이지에서 부트스트랩 5에 맞는 라이트박스로 https://trvswgnr.github.io/bs5-lightbox/에 있는 것을 소개하..
유튜브를 보면 가끔 썸네일이 가로로 5개로 나온다. 이것을 보면 만들고 싶은 생각이 든다. 예전에 이 블로그에 썸네일 5개를 만들었다. 그런데 스마트폰이 아니라 PC에서 썸네일이 너무 작아 그냥 썸네일 4개를 택한 기억이 난다. 스마트폰과 태블릿에서 썸네일이 작을 일 없다. 왜냐하면 이 글을 읽으면 알 수 있다. 아래 그림처럼 부트스트랩은 12개의 칼럼을 조합하는 12 칼럼 그리드 시스템이다. 그런데 12 칼럼인 그리드 시스템을 택하고 있는 부트스트랩에서 방법을 쉽게 생각할 수 없다. 만약 이 블로그는 부트스트랩 버전 3으로 만들었고 3으로 쉽게 하고자 한다면 10이나 15 칼럼이 좋을 것 같다. 내 노트북 화면을 기준으로 이 블로그 홈에 썸네일을 가로로 썸네일이 4개를 사용하고 있다. 또한 카테고리 다..
이 블로그 스킨을 부트스트랩 버전 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만 출시했을 때 레이아웃을 만드는 사이트가 많았다. 그때 사이트 대부분이 이용자가 원하는 레이아웃을 선택하게 했다..