[HTML + CSS] checkbox, label로 트리 만들기

html, css를 좀 더 연습하고 싶어서 사이트를 돌아다니면서 구현하고 싶은 것을 골랐다. tree구조로 동작할 수 있게 만드는 건데 이렇게 간단한 걸 구현하면서도 모르는 게 참 많았다.

 

1. 결과물 및 소스

열린 폴더 아이콘을 누르면 열린 폴더 아이콘은 닫힌 폴더 아이콘으로 변경되고 root노드의 자식들이 모두 닫히는 식으로 동작한다.

 

 

html 소스

css 소스

 

 

---

2. 구현 과정에서 어려웠던 점 및 알게 된 것

[main idea]

1. checkbox와 label의 동작 방식
   • input 태그의 type중에 checkbox와 label태그를 이용해서 해당 트리를 구현했다.
     
     • checkbox의 id를 정해주고 label 태그의 for attribute에 check box의 id를 적어주면 서로 연결되어 checkbox를 클릭하지 않고 label을 클릭해도 checkbox가 클릭된다. 
       

       

2. 클릭시 아이콘 변경
   • 클릭할 때 아이콘을 변경하려면 2가지를 알아야 한다.
     1. checkbox의 checked attribute
        먼저 checkbox 또는 label을 클릭하면 checkbox가 checked상태가 되는데 이를 이용하면 된다. 나는 cheked라면 ul(트리에서 자식노드 역할)의 display가 사라질 수 있도록 다음과 같이 작성했다. 
        

        

        자식 노드 숨기기

     2. 아이콘 변경 시키기: 가상 클래스  ::before
        다음으로 아이콘을 변경하기 위해서는 ::before 가상 클래스를 사용하면 된다.
        :cheked가 붙지 않았을 때는 열린 폴더 아이콘이 보일 수 있도록 작성했고, :cheked를 붙였을 때는 닫힌 폴더 아이콘이 보일 수 있도록 작성했다. font awesome 아이콘을 적용하려면 content attribute값으로 사이트에 나와있는 \+16진수와 font-family attribute값으로 "Font Awesome 5 Free"를 주면 된다.
        

        

        check 됐을 때

        

        check 안 됐을 때

        
        

        

        16진수

 

 

 

class

---

3. 느낀 점

이렇게 작은 데모라도 직접 구현해보니까 잘 몰랐던 태그의 사용법이다 css의 속성들을 알게 되었다. 앞으로 여러가지 데모를 만들어보면서 html, css가 익숙해질 수 있도록 하면 될 것 같다.