웹 페이지에서 파일 탐색기처럼 계층 구조를 보여주고 싶다면 트리 뷰(Tree View)가 유용한 UI 요소입니다. CSS와 JavaScript만으로도 별도의 라이브러리 없이 클릭 시 노드를 펼치고 접을 수 있는 트리 뷰를 손쉽게 구현할 수 있습니다.
이 글에서는 중첩된 <ul>, <li> 목록과 간단한 JavaScript 이벤트 처리를 활용해 트리 뷰를 만드는 전체 과정을 예제와 함께 살펴보겠습니다.
전체 예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
ul, #treeUL {
list-style-type: none;
}
#treeUL {
margin: 0;
padding: 0;
}
.rootTree {
cursor: pointer;
user-select: none;
font-size: 18px;
font-weight: bold;
color: blue;
}
li {
font-size: 16px;
color: crimson;
font-weight: 500;
}
.rootTree::before {
content: "\25B6";
color: black;
display: inline-block;
margin-right: 6px;
}
.rootTree-down::before {
transform: rotate(90deg);
}
.children {
display: none;
}
.active {
display: block;
}
</style>
</head>
<body>
<h1>Tree view example</h1>
<ul id="treeUL">
<li>
<span class="rootTree">Root</span>
<ul class="children">
<li>/bin</li>
<li>/etc</li>
<li>
<span class="rootTree">/home</span>
<ul class="children">
<li>/home/Downloads</li>
<li>/home/Pictures/</li>
<li>
<span class="rootTree">/home/Desktop</span>
<ul class="children">
<li>/home/Desktop/file.txt</li>
<li>/home/Desktop/file1.mp3</li>
<li>/home/Desktop/file1.mp4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<script>
var toggler = document.querySelectorAll(".rootTree");
Array.from(toggler).forEach(item => {
item.addEventListener("click", () => {
item.parentElement.querySelector(".children").classList.toggle("active");
item.classList.toggle("rootTree-down");
});
});
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같이 Root라는 최상위 노드만 보이는 트리 뷰가 화면에 출력됩니다. 하위 항목들은 기본적으로 숨겨져 있습니다.
노드를 클릭하여 펼친 경우
삼각형 캐럿(▶)이 있는 항목을 클릭하면 해당 노드의 하위 디렉터리와 파일들이 아래와 같이 펼쳐지며, 캐럿 아이콘도 90도 회전해 열린 상태임을 나타냅니다.
동작 원리 정리
1. HTML 구조
트리의 각 계층은 중첩된 <ul>과 <li>로 구성됩니다. 폴더 역할을 하는 항목에는 .rootTree 클래스를 가진 <span>을 사용하고, 그 자식 항목들은 .children 클래스를 가진 <ul> 안에 배치합니다.
2. CSS 스타일링
.rootTree::before 선택자에 유니코드 문자(\25B6)를 넣어 삼각형 캐럿 아이콘을 표시하고, .rootTree-down 클래스가 추가되면 transform: rotate(90deg)로 아이콘을 회전시켜 확장 상태를 시각적으로 알려줍니다. 또한 .children은 기본적으로 display: none으로 숨기고, .active 클래스가 붙으면 display: block으로 변경되어 내용이 보이게 됩니다.
3. JavaScript 이벤트 처리
document.querySelectorAll(".rootTree")로 모든 폴더 항목을 선택한 뒤, 각 항목에 클릭 이벤트 리스너를 등록합니다. 클릭이 발생하면 classList.toggle()을 사용해 자식 목록의 .active 클래스와 자신의 .rootTree-down 클래스를 번갈아 추가·제거함으로써 펼침/접힘 상태를 전환합니다.
이처럼 몇 줄의 CSS와 JavaScript만으로도 파일 탐색기 스타일의 트리 뷰를 완성할 수 있으며, 실제 프로젝트에서는 애니메이션 효과나 아이콘 이미지, 비동기 데이터 로딩 등을 추가해 더욱 풍부한 UX를 제공할 수 있습니다.