[CSS] 버튼 클릭으로 메뉴 화면 보이기/감추기

서론

대상독자

HTML과 CSS 만으로 화면에서 태그를 감췄다 보였다 처리해주고 싶은 개발자

본론

구현방법

먼저, 정답은 아주 간단합니다! CSS 가상선택자 :checked 속성을 활용하면 충분히 구현할 수 있습니다. 우선 먼저, css에서 input의 type을 checkbox을 생성하고 유동적으로 화면에 보여줄 HTML 태그에 대해, 기본 속성으로 display : none을, :checked 상태에서 display: block 등으로 지정해주면 됩니다. 이게 끝입니다!!

또 display: none 처리된 Input 태그를 클릭하기 위해 label 태그를 추가해주고 속성으로 for에 input에 대한 name을 추가하면 됩니다. 그럼 label 태그를 클릭할 때마다, 보여주고 싶은 영역이 사라졌다 나타났다를 반복할 것입니다.
또 만약 리액트와 같은 UI 라이브러리를 사용한다면, 컴포넌트 onClick 함수에 해당 로직을 그대로 구현하시면 됩니다!

실제 코드

See the Pen :checked 연습하기 (2) by joonho lee (@goldycoder) on CodePen.

이상입니다! 읽어주셔서 감사합니다.