소개
Tree view는 디렉토리 구조와 같은 정보를 보여주기 위한 UI입니다. 일반적으로 Tree view를 만들기 위해서는 자바스크립트와 같은 기술이 필요한 것으로 알려져있지만 html, css 만으로도 꽤 많은 기능을 구현할 수 있습니다. 여기서는 그 방법을 알아봅니다.
미리보기
사용기술
관련기술
수업
예제 - tree.html
<!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><a href="https://opentutorials.org">node1</a></li>
<li><a href="https://opentutorials.org">node2</a></li>
<li>
<input type="checkbox" id="node3">
<label for="node3">node3</label>
<ul>
<li><a href="https://opentutorials.org">node31</a></li>
<li><a href="https://opentutorials.org">node32</a></li>
<li><a href="https://opentutorials.org">node33</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
