[HTML+CSS] ul, li 태그로 트리구조 만들기

트리구조는 아래의 그림처럼 우리가 흔히 볼 수 있는 폴더의 구조입니다.

폴더 트리구조

또한 웹개발을 할때 메뉴, 카테고리 등을 표현할 때 필요한 구조입니다.

카테고리 예시

 

다음은 코드입니다.

See the Pen Tree by limqo (@limqo) on CodePen.

구조는 <ul><li><input><label>이 기본 한 묶음이고, 하위 트리를 생성할 경우는 <li>하위에 새로운 <ul>을 추가하면 됩니다. javascript를 응용하여 동적으로 생성 할 수 있습니다. 마지막 노드 여부를 class="lastTree"로 판단하고, 여기에 필요한 이벤트를 추가하면 됩니다. 

 

코드를 보면 선택 여부를 <input type="checkbox">를 이용하여 선택 여부를 확인합니다.