소개
Tree view는 디렉토리 구조와 같은 정보를 보여주기 위한 UI입니다. 일반적으로 Tree view를 만들기 위해서는 자바스크립트와 같은 기술이 필요한 것으로 알려져있지만 html, css 만으로도 꽤 많은 기능을 구현할 수 있습니다. 여기서는 그 방법을 알아봅니다.
미리보기
사용기술
관련기술
수업
예제 - tree.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | <!doctype html><html><head> <link rel="stylesheet" href="tree_fontello/css/fontello.css"> <style> .tree{ color:#393939; } .tree, .tree ul{ list-style: none; padding-left:17px; } .tree *:before{ width:17px; height:17px; display:inline-block; } .tree label{ cursor: pointer; } .tree label:before{ content:'\f256'; font-family: fontello; } .tree a{ text-decoration: none; color:#393939; } .tree a:before{ content:'\e800'; font-family: fontello; } .tree input[type="checkbox"] { display: none; } .tree input[type="checkbox"]:checked~ul { display: none; } .tree input[type="checkbox"]:checked+label:before{ content:'\f255'; font-family: fontello; } </style></head><body> <ul class="tree"> <li> <input type="checkbox" id="root"> <label for="root">ROOT</label> <ul> <li> <input type="checkbox" id="node3"> <label for="node3">node3</label> <ul> </ul> </li> </ul> </li> </ul></body></html> |
