자바스크립트 제이쿼리 없이 CSS 만으로 클릭 이벤트 연출하기
CSS에서는 마우스를 올렸을 경우에 애니메이션을 변경한다던지, CSS3 애니메이션을 사용하여 반복적인 움직임을 만들 수 있습니다. 왜 CSS에서는 클릭 이벤트를 만들지 않았을까요! 정말 너무 아쉬운 순간입니다. 버전이 올라가면서 부디 클릭 속성에 대한 설정 부분도 추가되었으면 좋겠습니다. 자바스크립트가 늘어날수록 웹페이지의 로딩 시간은 그만큼 길어지는데다 오류의 주요 원인이 될 수 있기 때문에 저는 CSS를 좋아할 수 밖에 없습니다. (사실 스크립트를 잘 몰라서...)
구글에서 CSS 관련 클릭 이벤트에 대해 검색해보니 역시 해결하신분들의 경험담을 확인할 수 있었습니다. 단 이 방법은 공식적이지 않으며 지극히 개인적인 방법이라는 것을 염려해 두셨으면 좋겠습니다. 개인적으로는 무척 마음에 들었던 방법입니다.
CSS Input 태그를 활용한 Click Event 만들기
소제목에서 이미 눈치를 채신분들도 계실 것 입니다. 그렇습니다. Input 요소를 사용한다면 클릭에 대한 속성을 연출할 수 있습니다. 단도직입적으로 먼저 핵심을 말씀 드리자면 다음과 같습니다.
1. Input 태그로 클릭 이벤트를 연출한다.
2. Input과 늘 짝꿍처럼 따라다니는 Label 요소에서 클릭 이벤트가 처리되게 한다.
3. 사용되어지는 Input 요소는 화면상 보이지 않도록 처리한다.
그렇습니다. 유일하게 클릭에 대하여 표현이 가능한 Input 태그, 그리고 여기에 같이 따라다니는 Label 태그를 써서 만들 수 있습니다. input type은 checkbox로 진행하며, hover 라던지 after, before 같은 기능을 담당하는 checked 라는 것이 있습니다. 이녀석을 사용하여 체크가 되었을 때, 그리고 되지 않았을때를 구별해 주는 것 입니다.
input type 버튼으로는 일반적인 button의 형태, radio 같은 선택지 형태, text같은 텍스트 입력창, 그리고 여기에 쓰인 checkbox 형태가 있습니다. 체크가 된 상태, 되지 않은 상태를 하나의 input 요소에서 구별지어주려면 checkbox 타입이 가능합니다. 그래서 이 요소를 사용하는 것 입니다.
See the Pen jQuery Click 이벤트 사용하지 않고 CSS3 만으로 완성하기 by rgy0409 (@rgy0409) on CodePen.
위에서 직접 테스트 해 보시기 바랍니다. 그리고 CSS 마크업 상태도 유심히 살펴보시기 바랍니다. input 요소와 label 요소가 같이 붙어 있는게 특징이며, input 요소는 고정 위치를 사용하여 (position: fixed;) 화면상에 보이지 않도록 저 멀리 보내버렸습니다. (left: -9999px;) 이렇게 처리해두면 절대로 디스플레이상에 checkbox 상자는 나타나지 않겠지요.
input 태그에 id 값을 부여했고, label에도 for 속성으로 똑같은 이름의 input id 값을 부여해서 연동되게 만듭니다. 이제 이 label에 나타나는 text를 클릭할 때, 클릭이벤트가 발생되게 합니다. 그것이 checked 속성 입니다.
li 세로 형태에서 부드럽게 토글되는 형태는 불가능한건가?
위의 예시에는 세가지 형태로 표현되고 있습니다. 두번째와 세번째는 의도한대로 부드럽게 연출이 되서 좋은데 문제는 첫번째네요. 이런 경우는 보통 모바일에서 많이 볼 수 있는 메뉴 형태입니다. 메인메뉴 안쪽에 서브메뉴가 있는 형태로, 메인메뉴중 하나를 누르면 그 아래의 메뉴들이 아래로 밀리면서 중간에 서브메뉴가 토글되게 만들어주고 싶었는데, li가 블록요소이다보니 크기값을 갖고 해당 영역만큼 자리를 잡고 있습니다.
자바스크립트 제이쿼리로 toggle 매서드를 사용하면 순식간에 처리가 가능합니다. 하지만 어떻게든 스크립트를 사용하지 않고 CSS 안에서 해결해보려고 했는데... 부드럽게 토글되는 형태는 아무래도 어려울 듯 싶습니다. 위의 예시에서 확인하실 수 있는게 전부입니다. display로 아예 없앴다가 누르면 다시 block 형태로 나타나게 만들어주는 방법이 최선일 듯 싶습니다. 앞으로 코딩을 하면서 좀 더 연구를 해봐야 할 것 같습니다. 혹시 여러분들께서 좋은 생각이 있다면 주저없이 댓글로 알려주세요. 저에게는 큰 도움이 될 것입니다. 끝.
"친절한효자손 취미생활" 을 검색!
