부트스트랩 collapse

이 글에서 버튼을 클릭하면 숨겨져 있는 내용이 나타나게 하는 것을 알아보려 한다. 전에도 아래 버튼을 클릭하면 아이콘도 변하여 버튼 아래에 감춰져 있는 것이 보였던 것을 설명한 적이 있다. 이번에는 부트스트랩 3과 4에서 모두 할 수 있는 것에 대해 간단히 설명하려고 한다. 참고로 이 블로그에서 아래와 같은 것을 많이 이용하니 봤을 것이다. 

가치를 없으면, 얼마나 대한 있는가? 청춘 이 무엇을 위하여서. 아름답고 없으면, 쓸쓸한 얼음과 무엇이 이 청춘의 보는 돋고, 이것이다. 내려온 수 행복스럽고 그들의 안고, 동산에는 인도하겠다는 가장 가슴이 위하여서.

부트스트랩의 collapse 자바스크립트를 이용하면 버튼 아래에 내용을 숨길 수 있다. 만약 시작 시 내용을 나타내고 싶다면 3에서는 collapse 옆에 in을 추가하면 되며 4에서는 in이 아니라 show이다. 부트스트랩을 사용한 적이 있다면 어렵지 않게 사용할 수 있을 것이다. 아래 소스가 기본 사항을 입력한다. 버튼 아래에 내용이 감춰지는 것이다. 아래 소스에서 중요한 것은 내용의 data-target은 내용의 id와 같아야 한다. 그리고 data-target 명을 적을 때 아이디명에 #을 빼지 말아야 한다. 

<button class="btn" data-toggle="collapse" data-target="#example06"> 버튼 이름 </button>

<div id="example06" class="collapse">

  내 용

</div>

나머지는 버튼을 클릭하면 버튼 옆에 아이콘이 변하게 하는 아래와 같은 CSS를 추가하는 것이다. 부트스트랩 3에서는 기본적으로 폰트아이콘 모음인 Glyphicons이라는 것을 제공하니 아래 CSS 소스는 부트스트랩3에만 해당된다. 부트스트랩4는 해당사항이 없으니 4라면 아래를 계속 읽었으면 한다. 

/* 보여질 때 아이콘 */ 

.btn:after { font-family: "Glyphicons Halflings"; content: "\e114"; } 

 /* 감춰질 때 아이콘 */ 

.btn.collapsed:after { content: "\e080"; }

만약 위와 같이 btn이라 정의하면 btn 클래스에 아이콘이 생기므로 특정한 속성에만 생기도록 하기 위해서 나는 아래 그림처럼 btn-info와 btn-danger에만 아이콘이 생기도록 했다.

이것은 부트스트랩 버전 3만이 아닌 4도 할 수 있다. 내 다른 티스토리 블로그는 4로 만들었는데 거기에서 해보니 됐다. 그런데 4에서는 3에서 없던 것이 있어서 약간 수정해야 한다. HTML 부분은 수정할 필요 없고 CSS 부분만 수정해야 한다. 위에서 적었듯이 부트스트랩4에서 자체적인 폰트아이콘이 없어 외부 폰트아이콘인 font awesome 등을 사용한다. 참고로 난 font awesome을 사용한다.

그러면 내가 사용하는 Font Awesome 5로 설명하면 아래와 같은 CSS로 대체하면 된다. 참고로 여기도 부트스트랩3을 사용하지만 Font Awesome의 폰트아이콘을 사용한다. Font Awesome은 부트스트랩에서 제공하는 것과 비교할 수 없이 다양하다. 참고로 HTML,CSS 등이 가능하면 그래픽으로 아이콘을 만들지 않고 폰트아이콘을 사용한다. 폰트아이콘에서 제공하지 않으면 만들게 된다.

/* 보여질 때 아이콘 */

 .btn:after { font-family: 'FontAwesome'; content: "\f078";} 

/* 감춰질 때 아이콘 */

.btn.collapsed:after { content: "\f054"; }

만약 collapse에 있는 accordion에 들어가면 완전 달라진다. 부트스트랩3의 accordion을 4에서는 180˚ 변한다. 위는 collapse의 일부분이다.