CSS만으로 자바스크립트 하나 없이 드롭다운 토글을 만들어보자 (feat. focus-within)
인터넷에 검색해보면 CSS 드롭다운 메뉴의 대부분이 :hover 클래스만 사용해 마우스를 올렸을 때 드롭다운 메뉴가 나타나는 동작을 보여주고 있다. 그러나 때때로, 호버 할 때 뿐만이 아닌 진짜 드롭다운 메뉴처럼 클릭해야 메뉴가 보이게끔 구성하고 싶을 때가 있다. 그리고 대부분은 이런 동작을 구현하기 위해 JavaScript가 개입된다. 하지만 :focus-within을 사용하면 자바스크립트 없이도 클릭 드롭다운 메뉴를 구현할 수 있다. 이번 예제는 Tailwind CSS 의 플러그인인 daisyUI 의 Fab 컴포넌트 구성을 분...