BELOWZERO

오늘은 input태그와 button태그를 이용해서 input태그 안에 적힌 텍스트를 화면에 출력해보고 이를 다시 form태그를 이용하여 구현해보려 한다. html, css, js소스는 아래와 같다. 💻 소스 button exam /* CSS */ input { padding: 10px; } button { border: none; outline: none; border-radius: 3px; padding: 10px 15px; color: white; background-color: black; cursor: pointer; } // JavaScript const input = document.querySelector('input'); const btn = document.querySelector('bu..

html, css를 좀 더 연습하고 싶어서 사이트를 돌아다니면서 구현하고 싶은 것을 골랐다. tree구조로 동작할 수 있게 만드는 건데 이렇게 간단한 걸 구현하면서도 모르는 게 참 많았다. 1. 결과물 및 소스 열린 폴더 아이콘을 누르면 열린 폴더 아이콘은 닫힌 폴더 아이콘으로 변경되고 root노드의 자식들이 모두 닫히는 식으로 동작한다. html 소스 css 소스 2. 구현 과정에서 어려웠던 점 및 알게 된 것 [main idea] checkbox와 label의 동작 방식 input 태그의 type중에 checkbox와 label태그를 이용해서 해당 트리를 구현했다. checkbox의 id를 정해주고 label 태그의 for attribute에 check box의 id를 적어주면 서로 연결되어 chec..