[HTML & CSS] 드롭다운 메뉴 (Toggle)

  이번에는 토글기능을 적용해 아래와 같이 html, css만을 이용해 드롭다운 메뉴를 만들어봤다

 

See the Pen Dropdown menu (toggle) by OnnJE (@ogtitle) on CodePen.

 

 

  다시볼때 이해하기 쉽게 만들면서 느꼈던 핵심적인 부분만 정리해 봐야겠다. 

 

input & label

 

<input type="checkbox" id="toggle" hidden>
<label for="toggle" id="label">
  <ion-icon name="chevron-down-outline" id="arrow"></ion-icon>
</label>

 

 

  위 태그에서 input과 label은 위의 코드와 같이 사용되었다. input은 type을 checkbox로 설정하여 체크(toggle) 여부를 판단할 수 있게 하였고, label은 for 속성으로 위 input의 id를 지정해 바인딩 했다. 따라서 라벨을 클릭해도 input에 체크가 된다. 라벨태그 자체를 css로 조작할 수 있어 이번 드롭다운메뉴는 label을 클릭시 인풋이 체크되고 드롭다운 메뉴가 출력되는 방식으로 제작하였다.

 

선택자

  사용된 선택자는 ~, > 이다. ~은 형제 선택자이고, >은 자식 선택자이다. 인풋이 체크됐을 때 드롭다운 메뉴가 출력되어야 하므로 css상에서 input 형제값에 영향을 줄 수 있는 형제 선택자 ~를 사용했고, label의 화살표 아이콘을 회전시키기 위해 ~와 >를 함께 사용해 형제태그인 label의 자식태그인 ion-icon태그에 접근했다.

 

ion-icon

  icon을 보다 편하게 사용하기 위해 ionicons 사이트를 사용했다. usage에 설명되어 있듯이 아래 스크립트를 body태그 이후에 넣고 링크의 사이트에서 원하는 아이콘을 검색해 html tag를 따와 적용하면 된다.

 

<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

 

 

Ionicons: The premium icon pack for Ionic Framework