<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>트리 뷰</title>
</head>
<body>
<h2>Tree View</h2>
<div id="tree"></div>
</body>
<script src="script.js"></script>
</html>
body {
font-family: Arial, sans-serif;
}
.folder {
cursor: pointer;
font-weight: bold;
}
.children {
margin-left: 20px;
display: none;
}
.open > .children {
display: block;
// 1. JSON 데이터
const treeData = [
{
name: 'Root',
children: [
{
name: 'src',
children: [
{
name: 'components',
children: [
{ name: 'Button.js' },
{ name: 'Modal.js' }
]
},
{ name: 'App.js' },
]
},
{
name: 'public',
children: [
{ name: 'index.html' }
]
},
{ name: 'package.json' }
]
}
];
// 2. 재귀적으로 DOM 생성
function createTreeNode(node) {
const container = document.createElement('div');
if (node.children && node.children.length > 0) {
// 폴더
const folder = document.createElement('div');
folder.className = 'folder';
folder.textContent = '📁 ' + node.name;
folder.addEventListener('click', (e) => {
e.stopPropagation(); // 이벤트 버블링 방지
container.classList.toggle('open');
});
const childrenContainer = document.createElement('div');
childrenContainer.className = 'children';
node.children.forEach(child => {
childrenContainer.appendChild(createTreeNode(child));
});
container.appendChild(folder);
container.appendChild(childrenContainer);
} else {
// 파일
const file = document.createElement('div');
file.textContent = '📄 ' + node.name;
container.appendChild(file);
}
return container;
}
// 3. 트리 렌더링
const treeRoot = document.getElementById('tree');
treeData.forEach(node => {
treeRoot.appendChild(createTreeNode(node));
});
treedata를 토대로 트리구조를 생성하는 과제.
'Linux' 카테고리의 다른 글
| CLI EC2 인스턴스 정보 확인 명령어 (0) | 2025.10.06 |
|---|