반응형
토글
-
[HTML & CSS] 드롭다운 메뉴 (Toggle)HTML & CSS/실습 2022. 12. 23. 22:27
이번에는 토글기능을 적용해 아래와 같이 html, css만을 이용해 드롭다운 메뉴를 만들어봤다 See the Pen Dropdown menu (toggle) by OnnJE (@ogtitle) on CodePen. 다시볼때 이해하기 쉽게 만들면서 느꼈던 핵심적인 부분만 정리해 봐야겠다. input & label 위 태그에서 input과 label은 위의 코드와 같이 사용되었다. input은 type을 checkbox로 설정하여 체크(toggle) 여부를 판단할 수 있게 하였고, label은 for 속성으로 위 input의 id를 지정해 바인딩 했다. 따라서 라벨을 클릭해도 input에 체크가 된다. 라벨태그 자체를 css로 조작할 수 있어 이번 드롭다운메뉴는 label을 클릭시 인풋이 체크되고 드롭다운 ..