참고 : 자바스크립트 없이 tree 만들기
※ 해당 글은 참고로 올려둔 생활코딩의 내용을 자체적으로 정리한 내용입니다.
■ HTML / CSS 만을 이용하여 트리 뷰(tree view) 제작하기 #01
01. 먼저 ul, li 태그와 checkbox를 이용하여 트리 구조를 만들어 보자. 코드는 아래와 같다.
tree_01.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>
<body>
<input type="checkbox" id="root"/>
<label for="root">트리 카테고리</label>
<ul>
<li>one1</li>
<li>one2</li>
<li>
<!-- 트리를 ON / OFF 하기위해서 checkbox를 사용한다. -->
<input type="checkbox" id="one3">
<label for="one3">one3</label>
<ul>
<li>one3-1</li>
<li>one3-2</li>
<li>one3-3</li>
</ul>
</li>
</ul>
<ul>
<li>two1</li>
<!-- 트리를 ON / OFF 하기위해서 checkbox를 사용한다. -->
<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>
|
위 코드를 그대로 입력하면.
아래와 같은 결과의 트리 구조가 출력되는 것을 확인 할 수 있다.
02. 이제 체크박스를 check함으로서 체크박스의 창을 열고 닫고 하는 기능을 추가하여보자.
tree_02.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">
/* 체크박스가 체크가 되어있는(checked) 속해있는(~) 모든 ul태그를 숨긴다. */
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>
</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>
|
출력결과를 보면 아래와같이 체크박스를 선택하면 트리구조의 카테고리가 ON / OFF 되는것을 확인 할 수 있다.
03. 특정 영역을 닫아 두고 시작하고 싶다면 해당부분을 해당부분을 미리 체크해 두고 시작하면 된다.
tree_03.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">
/* 체크박스가 체크가 되어있는(checked) 속해있는(~) 모든 ul태그를 숨긴다. */
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>
<!-- checked를 사용하여 해당 영역을 미리 체크된 상태로 시작하면 닫혀진 상태로 실행되는것을 확인 할 수 있다 -->
<input type="checkbox" id="one3" checked="checked">
<label for="one3">one3</label>
<ul>
<li>one3-1</li>
<li>one3-2</li>
<li>one3-3</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>
|
위 코드를 실행해 보면 one3부분만 체크가 된 상태로 나타나는 것을 알 수 있다.
04. 마지막으로 이제 저 체크박스가 나타나지 않으면서 작동할 수 있게끔 숨겨보자.
tree_04.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>
</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>
|
위 코드를 실행해보면 이제 체크박스가 사라진 것을 확인 할 수 있다.
그렇지만 트리의 동작에는 전혀 문제가 되지 않는 모습을 확인 할 수 있다.
☞ [HTML] HTML / CSS 만을 이용하여 트리 뷰(tree view) 제작하기 #02
