부트스트랩 탭 구현

여기에서 아래에서 볼 수 있는 탭 만드는 것에 대해 적으려고 한다. 글에서 볼 수 있는 탭은 부트스트랩에서 지원하는 기본 탭으로 단지) 소스만 복사해서 붙이면 된다. 

부트스트랩을 자세히 몰랐던 초기에는 사용법 등을 알아야 아래와 같은 탭을 적용할 수 있는 어려울 것으로 알았다. 지금은 간단히 소스를 복사해 붙이면 된다는 것을 알았다. 당연히 부트스트랩을 사용해야 한다는 조건이 따를 것이다. 전에도 적었지만 부트스트랩을 사용하지 않으면서 짜증내면서 안된다고 하지 말았으면 한다. 참고로 이 블로그는 스킨에서 부트스트랩을 사용하고 있으니 부트스트랩을 사용 중이다. 그리고 부트스트랩을 사용하면 기본적으로 따라오는 것이 jquery 고, 이 블로그는 버전 1.11.0 을 사용 중이다. 

아래와 같은 탭 소스는 여기를 클릭해서 Markup을 보면 소스가 나와 그 부분을 복사해서 얻거나 한글 부트스트랩 홈페이지에서 여기를 클릭해서 마크업(Markup)에서 얻을 수 있다. 소스만 얻고자 한다면 한글이나 영문이나 차이는 없지만 설명까지 보고자 한다면 한글이 편할 것이다. 참고로 이 블로그에서 탭을 글 아래에 사용했다. 예로 글에 탭을 사용해서 한 쪽은 티스토리 댓글을 사용했고 다른 쪽은 MORE(디스커스)를 사용했다. 

• 탭 1
• 탭 2
• 탭 3
• 탭 4

탭 1 : 고행을 이성은 별과 얼음에 봄바람을 기쁘며, 그리하였는가? 굳세게 충분히 군영과 목숨을 황금시대를 천고에 끓는다. 그들은 되는 수 부패뿐이다. 영락과 꾸며 들어 작고 두손을 너의 기쁘며, 피에 것이다.

탭 2 : 더운지라 영원히 소금이라 역사를 자신과 뛰노는 우리 인간이 것이다. 있는 원질이 관현악이며, 무엇을 예가 맺어, 천자만홍이 보이는 보라. 힘차게 청춘은 오직 것이다. 보내는 되는 실현에 속잎나고, 같으며, 것이다. 낙원을 동력은 영원히 갑 없는 이것이다.

탭 3 : 갑 그들의 보이는 그들의 가슴이 동력은 그들은 주는 때문이다. 위하여 지혜는 피가 어디 운다. 거친 싹이 찾아 있으랴? 곧 피에 이상은 영락과 않는 끓는다. 구하기 생의 평화스러운 따뜻한 것은 밥을 사막이다. 너의 무엇이 무한한 커다란 소금이라 힘있다.

탭 4 : 사랑의 수 얼음에 인간에 것이다. 우는 노년에게서 두손을 아름다우냐? 그것은 것은 있음으로써 목숨이 수 위하여, 그들의 무한한 쓸쓸하랴? 행복스럽고 예가 천지는 천자만홍이 바이며, 얼마나 끝에 싹이 봄바람이다. 뛰노는 무엇을 속에서 붙잡아 소금이라 보내는 끓는다. 새가 곳으로 생명을 보내는 간에 부패를 열락의 그들은 봄바람이다. 방지하는 아니한 싶이 생명을 광야에서 같이, 곳이 뿐이다.

이것이 어떻게 구현되는가 보기 위해서 아래 그림을 보듯이 색 부분에 원하는 글을 채우면 된다. 눈치가 빠른 분은 탭의 제목을 id명과 일치한다는 것을 소스를 보면 알 것이다.  예전에 위와 같은 것을 구현하기 위해 jquery 소스에서 멋진 것이 있나 보고 힘들게 했다. 부트스트랩에 있는 탭을 이용하니 해결하니 편하다. 

나는 소스를 복사하여 붙여 넣기를 주로 하는데 어떻게 작동하는지 이해하여 활용하는 타입이다. 코딩 실력은 안 되니 간편한 방법은 복사하여 붙이기가 아닌가 한다.    

그런데 위와 같은 탭을 간단하게 구현할 수 있으니 편하고 쉽다는 장점이 있다. 그러나 동일한 것을 쉽게 볼 수 있어 부트스트랩의 기본으로만 만든 홈페이지는 독특함이 없다.

그러니 부트스트랩을 어느 정도 배웠다면 기본을 벗어나 다양하게 활용했으면 한다. 기본을 벗어나야 부트스트랩을 사용한 것처럼 보이지 않는다. 기본만 추구하면 소스를 볼 필요없이 부트스트랩으로 보인다. 다른 예지만 네이버 블로그와 달리 티스토리는 HTML/CSS/스크립트 등을 사용할 수 있다. 어떤 티스토리는 소스를 봐야 비로소 그 블로그가 티스토리인지 알 수 있다. 기본만 사용한 네이버 블로그나 티스토리는 바로 보면 어떤 블로그인지 바로 알 수 있다.  

도메인,호스팅,쇼핑몰