참고 : 자바스크립트 없이 tree 만들기
■ HTML / CSS 만을 이용하여 트리 뷰(tree view) 제작하기 #02
01. 이전 예제에서 2단 트리 뷰를 만들어 보았다. 이번에는 3단 트리뷰를 만들어 보자.
tree.html |
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>HTML / CSS를 이용한 트리</title>
<head>
<style type="text/css">
input[type="checkbox"] {
display:none;
}
input[type="checkbox"]:checked~ul {
display:none;
}
</style>
</head>
<body>
<input type="checkbox" id="root"/>
<label for="root">트리 카테고리</label>
<ul>
<li>one1</li>
<li>one2</li>
<li>
<input type="checkbox" id="one3">
<label for="one3">one3</label>
<ul>
<li>one3-1</li>
<li>one3-2</li>
<li>one3-3</li>
<li>
<input type="checkbox" id="one3-4">
<label for="one3-4">one3-4</label>
<ul>
<li>one3-4-1</li>
<li>one3-4-2</li>
<li>one3-4-3</li>
<li>one3-4-4</li>
<li>one3-4-5</li>
<li>one3-4-6</li>
<li>one3-4-7</li>
<li>one3-4-8</li>
<li>one3-4-9</li>
</ul>
</li>
<li>one3-5</li>
<li>one3-6</li>
<li>one3-7</li>
<li>one3-8</li>
</ul>
</li>
</ul>
<ul>
<li>two1</li>
<input type="checkbox" id="two2">
<label for="two2">two2</label>
<ul>
<li>two2-1</li>
<li>two2-2</li>
<li>two2-3</li>
</ul>
<li>two3</li>
</ul>
</body>
</html>
|
출력결과는 아래와 같다.
하지만 기본적인 ul, li 태그의 점, 블릿기호가 삽입된 모습니다.
이제 이 트리뷰를 폰텔로를 사용하여 좀더 트리 뷰 처럼 보이게 꾸며보자.
02. 폰텔로(http://fontello.com/) 사이트에 접속하여 예제에 필요한 아이콘을 다운받자.
① 사용할 아이콘을 3개 선택한다 선택된 아이콘은 붉은색 ○ 기호로 테두리가 감싸진다.
② 아이콘을 선택하면 화면 상단에 Download Webfont 를클릭한다.
③ 사용도리 fontello 코드를 다운받는다.
03. 다운받은 fontello.zip 파일을 위 tree.html 과 같은 폴더에 위치시키고 압축을 해제한다.
① 다운받은 fontello.zip 파일의 압축을 해제한다.
② 압축을 해제하고 생성된 폴더의 이름을 tree_fontelo로 변경하였다.
04. tree_fontelo 폴더내부의 demo.html 파일이 존재한다. 해당 파일을 실행 시킨다.
05. demo.html을 윕브라우저를 통해 실행한다.
① 상단 우측에 보면 show codes라는 체크박스가 존재한다. 체크해준다.
② 그럼 다운받은 아이콘들의 CODE값이 나타난다. 이제 이 코드를 적용시켜 보자.
06. 위에서 작업한 tree.html 파일을 이제 다시 실행하여 수정하여 보자.
07. tree.html 파일을 아래와 같이 수정해 보자.
tree.html
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>HTML / CSS를 이용한 트리</title>
<head>
<!-- 다운받은 fontello.css의 경로를 지정하여 준다. -->
<link rel="stylesheet" href="./tree_fontello/css/fontello.css"/>
<style type="text/css">
/* ul, li태그의 앞의 점, 블릿기호를 제거한다. */
ul { list-style:none; }
/* fontello 아이콘과 tree의 간격 조절 */
.tree *:before {
width:17px;
height:20px;
display:inline-block;
}
/* 해당 영역을 닫을경우, 혹은 닫혀있는경우 사용할 이미지를 지정한다. */
.tree input[type="checkbox"]:checked+label:before {
content:"\e800";
font-family:fontello;
}
/* 해당 영역을 오픈 하였을때 변경할 이미지를 지정한다. */
.tree label:before {
content:"\e801";
font-family:fontello;
}
/* a태그로 지정한 더이상 오픈할 것이 없고 해당 페이지를 불러올때 사용될 이미지를 지정한다. */
.tree a:before {
content:"\f0f6";
font-family:fontello;
}
input[type="checkbox"] {
display:none;
}
input[type="checkbox"]:checked~ul {
display:none;
}
</style>
</head>
<body>
<input type="checkbox" id="root"/>
<label for="root">트리 카테고리</label>
<ul class="tree">
<li><input type="checkbox" id="one1" checked="checked"><label for="one1">one1</label></li>
<li><input type="checkbox" id="one2" checked="checked"><label for="one2">one2</label></li>
<li>
<input type="checkbox" id="one3" checked="checked">
<label for="one3">one3</label>
<ul class="tree">
<li><input type="checkbox" id="one3-1" checked="checked"><label for="one3-1">one3-1</label></li>
<li><input type="checkbox" id="one3-2" checked="checked"><label for="one3-2">one3-2</label></li>
<li><input type="checkbox" id="one3-3" checked="checked"><label for="one3-3">one3-3</label></li>
<li>
<input type="checkbox" id="one3-4" checked="checked">
<label for="one3-4">one3-4</label>
<ul class="tree">
<li><a href="">one3-4-1</a></li>
<li><a href="">one3-4-2</a></li>
<li><a href="">one3-4-3</a></li>
<li><a href="">one3-4-4</a></li>
<li><a href="">one3-4-5</a></li>
<li><a href="">one3-4-6</a></li>
<li><a href="">one3-4-7</a></li>
<li><a href="">one3-4-8</a></li>
<li><a href="">one3-4-9</a></li>
</ul>
</li>
<li><input type="checkbox" id="one3-5" checked="checked"><label for="one3-5">one3-5</label></li>
<li><input type="checkbox" id="one3-6" checked="checked"><label for="one3-6">one3-6</label></li>
<li><input type="checkbox" id="one3-7" checked="checked"><label for="one3-7">one3-7</label></li>
<li><input type="checkbox" id="one3-8" checked="checked"><label for="one3-8">one3-8</label></li>
</ul>
</li>
</ul>
<ul class="tree">
<li><input type="checkbox" id="two1" checked="checked"><label for="two1">two1</label></li>
<input type="checkbox" id="two2" checked="checked">
<label for="two2">two2</label>
<ul class="tree">
<li><a href="">two2-1</a></li>
<li><a href="">two2-2</a></li>
<li>
<input type="checkbox" id="two2-3" checked="checked">
<label for="two2-3">two2-3</label>
<ul class="tree">
<li><a href="">two2-3-1</a></li>
<li><a href="">two2-3-2</a></li>
<li><a href="">two2-3-3</a></li>
</ul>
</li>
<li><a href="">two2-4</a></li>
<li><a href="">two2-5</a></li>
</ul>
<li><input type="checkbox" id="two3" checked="checked"><label for="two3">two3</label></li>
</ul>
</body>
</html>
|
폰텔로 아이콘을 적용한 tree.html파일의 출력결과는 아래와 같다.
해당 트리를 선택하면 폴더 아이콘이 끝에가서는 페이지 아이콘이 나오는 모습을 확인 할 수 있다.
