w3.css
트리 뷰
CSS와 JavaScript를 사용하여 트리 뷰를 만드는 방법을 알아보자.
트리 뷰
트리 뷰는 정보의 계층적 보기를 나타내는데 각 항목에는 여러 개의 하위 항목이 있을 수 있다.
화살표를 클릭하면 나무 가지를 열거나 닫을 수 있다.
1단계) HTML 추가
<ul id="myUL"> <li><span class="caret">Beverages</span> <ul class="nested"> <li>Water</li> <li>Coffee</li> <li><span class="caret">Tea</span> <ul class="nested"> <li>Black Tea</li> <li>White Tea</li> <li><span class="caret">Green Tea</span> <ul class="nested"> <li>Sencha</li> <li>Gyokuro</li> <li>Matcha</li> <li>Pi Lo Chun</li> </ul> </li> </ul> </li> </ul> </li> </ul>
2단계) CSS 추가
/* Remove default bullets */ ul, #myUL { list-style-type: none; } /* Remove margins and padding from the parent ul */ #myUL { margin: 0; padding: 0; } /* Style the caret/arrow */ .caret { cursor: pointer; user-select: none; /* Prevent text selection */ } /* Create the caret/arrow with a unicode, and style it */ .caret::before { content: "\25B6"; color: black; display: inline-block; margin-right: 6px; } /* Rotate the caret/arrow icon when clicked on (using JavaScript) */ .caret-down::before { transform: rotate(90deg); } /* Hide the nested list */ .nested { display: none; } /* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */ .active { display: block; }
3단계) JavaScript 추가
var toggler = document.getElementsByClassName("caret"); var i; for (i = 0; i < toggler.length; i++) { toggler[i].addEventListener("click", function() { this.parentElement.querySelector(".nested").classList.toggle("active"); this.classList.toggle("caret-down"); }); }
기본 예시
예제 보기체크박스 트리 뷰
이 예에서 우리는 caret 대신 "ballot box" 유니코드를 사용한다.
예제
var toggler = document.getElementsByClassName("box"); var i; for (i = 0; i < toggler.length; i++) { toggler[i].addEventListener("click", function() { this.parentElement.querySelector(".nested").classList.toggle("active"); this.classList.toggle("check-box"); }); }
기본 예시
예제 보기참고
W3C School - How TO - Tree View