HTML & CSS/실습
-
[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을 클릭시 인풋이 체크되고 드롭다운 ..
-
[HTML & CSS] 드롭다운 메뉴 기본HTML & CSS/실습 2022. 12. 18. 22:49
node.js 기본을 익히고 이제 웹 페이지를 제작하려던 찰나 드롭다운 메뉴 하나도 빠르게 만들지 못하는 내 자신을 발견했다. 정작 중요한게 아니라 다른걸 열심히 파고 있었단걸 깨닫고 fe의 기본인 html, css, js의 기본을 다시 탄탄히 하고자 한다. 일단 실패한 드롭다운 메뉴부터 시작해야지... See the Pen Untitled by OnnJE (@ogtitle) on CodePen. 일단 만든건 위와 같다. 이게 처음 막 하다보니 어떻게 원리를 적용해 드롭다운을 구현할지 생각보다 쉽지 않았다.. 그러니 나중에 봐도 쉽게 이해할 수 있게 핵심적인 부분을 정리해 보자. 1. 구현은 가장 깊숙한 요소부터 실제 구현을 해보니 가장 아래의 요소 (위 드롭다운 메뉴의 경우 a 태그)부터 구현하는게 훨..