이 블로그 스킨 유지와 변경

이 블로그 스킨은 부트스트랩 버전 3으로 만들었다. 버전 3이 나온지도 오래돼 최근에 5 베타가 아닌 정식 버전이 나와 변경하려고 했다. 스킨 변경은 고생한다는 것을 알고 있는데 하겠다고 생각하게 된 계기가 버전 3, 4에 비해 버전 5에서 변경된 아코디언이 좋았다.

 

부트스트랩에서 아코디언

 

그리고 5에 새롭게 추가된 오프캔버스(Off-Canvas)를 사용하고 싶었다. 무엇보다도 최근에 방문자 수, 댓글 수, 애드센스 등에 관심이 없어졌다. 누군가는 방문자 수,댓글 수, 애드센스 수익 때문에 블로그를 하는 것이 아니다. 내가 이런 것에 신경을 썼다면 스킨 변경에 대해 고민하지도 않았을 것이다.

 

참고로 오프캔버스는 버전 3과 4에서 오프캔버스를 지원하지 않는다. 이 블로그에서 오프캔버스는 사용했는데 대부분 jQuery를 사용해 여기에서 배웠다.

 

 

부트스트랩5에서 오프캔버스, 컨포넌트

아래 더보기를 클릭하면 이 블로그에서 자주 볼 수 있는 오프캔버스를 알 수 있다. 참고로 아래 영상은 OBS로 만들었다. 동영상을 올릴 때마다 느끼는데 재생할 때 광고가 나와 짜증 난다.

 

 

이 블로그에서 자주 볼 수 있는 오프캔버스

버전 4 정식이 나왔을 때 버전 3으로 만든 이 블로그를 4로 변경하고 싶었으나 고생길이 펼쳐져 변경하지 못했다. 그 대신 다른 티스토리 블로그를 4로 만들어 부트스트랩 4를 맛봤다. 참고로 티스토리 블로그는 스킨 편집이 자유로워 얼마든지 부트스트랩을 사용해서 스킨을 만들 수 있다.

 

그런데 문제가 생겼다. 내가 이 블로그에서 jQuery를 정말 많이 사용한다. 예로 스마트폰 등 모바일 기기에서 안 보이지만 블로그 메인에 나오는 배경이 jQuery를 사용한다. 그리고 배경에 유튜브 동영상이 나오게 한다. 보여주고 싶지만 다른 곳에서 많이 봤을 것이다.

 

다른 방식으로 유튜브를 동영상 배경으로 사용

 

그리고 아래처럼 모달에 나오게 하는 것도 jQuery를 사용한다. 만약 버전 5를 사용한다면...

 

• DNA 04:15
• IDOL 03:51
• FAKE LOVE 05:18
• '봄날 (Spring Day)' 05:28

 

또는 아래와 같은 것도 사용한다. 위아래 모두 같은 것으로 jQuery를 사용해서 구현한 멋있는 부트스트랩 3, 4에서만 해당하는 모달이다. 해당 스크립트는 5용은 없다. 5는 jQuery가 없기 때문인 것 같다.

 

---

부트스트랩 5에서 jQuery

 

부트스트랩 버전 3, 4에 포함됐기 때문에 있을 것이라 생각하겠지만 버전 5에서 jQuery가 없다. 버전 5를 사용하면서 jQuery를 추가할 수 있지만 나는 100% 부트스트랩으로만 블로그를 구축하고 싶었다. jQuery를 사용하고 싶지 않았다. jQuery가 없다면 이 블로그에서 많은 것을 제외해야 한다.

---

이 블로그는 그대로 둔 상태에서 오프캔버스를 추가했다. 부트스트랩 버전 4로 만든 블로그를 버전 5로 변경하려고 계획하고 있다. 내가 부트스트랩을 배우면서 가장 많이 방문했던 bootsnipp.com가 jQuery가 빠진 것 때문인지 몰라도 5에 대한 소스가 하나도 없다는 것이다. 멋있는 소스를 제공하는 사이트를 찾아야...

 

부트스트랩