CSS 동작 버튼 만들기
CSS만으로 실제 동작하는 버튼을 만들 수 있다. 다시말해, 버튼을 클릭했을 때 메뉴창이 뜬다거나, 글자들이 사라진다거나 하는 것을 구현할 수 있다는 말이다. 흔히들 자바스크립트로만 구현이 가능할 거라 생각하지만, HTML 태그 중 label과 input 태그의 조합을 잘 이용하면 이러한 마법같은 일도 구현할 수 있다.
아래 예제 코드를 작성해 보자. 이 예제는 label과 input이 어떻게 작동하는지 간단하게 설명하기 위해 만들어졌다. 구현 결과에서 “팝업창 띄우기” 글자를 클릭해 보자. 그러면, input[type=checkbox]가 체크가 되고, 언체크 된다.
그럼 팝업창 띄우기 글자를 클릭할 때, 작동할 메뉴창을 만들어 보자. CSS의 #menus에 Line 2은 내용물을 완전히 둘러 싸기 위해 inline-block으로 설정해 주었고, Line 3 – 4에서는 테두리선의 모양을 설정해준다. .menu에 Line 8은 마우스 커서가 메뉴창 위로 왔을 때, 화살표 모양이 나오게 설정해 주었다. 그렇지 않으면 I자 모양의 텍스트 커서가 나온다. .menu:hover에 Line 10는 마우스가 hover 되었을 때, 바탕색이 회색으로 변하게 설정해주었다. 스마트폰에서 메뉴명을 터치해보자.
1 2 3 4 5 6 7 8 9 | <div id=“container”> <label for=“popup”>팝업창 띄우기</label> <input type=“checkbox” id=“popup”> <div id=“menus”> <div class=“menu”>새파일</div> <div class=“menu”>불러오기</div> <div class=“menu”>종료하기</div> </div> </div> | cs |
1 2 3 4 5 6 7 8 9 10 11 12 | #menus { display: inline-block; border: 2px solid black; border-radius: 4px; } .menu { padding: 2px 5px; cursor: context-menu; } .menu:hover { background-color: #eeeeee; } | cs |
다음으론 “팝업창 띄우기” 글자를 클릭했을 때 메뉴창이 사라지고, 다시 클릭했을 때 메뉴창이 나타나는 조건문을 만들어 보자. Line 14 – 16 부분에서는 input[type=checkbox]가 체크되었을 때, 동위 선택자 +를 이용하여 바로 뒤에 오는 메뉴창을 보이지 않게 처리한다. Line 17 – 19 부분에서는 input[type=checkbox]가 언체크되었을 때, 동위 선택자 +를 이용하여 바로 뒤에 오는 메뉴창을 다시 보이게 한다. “팝업창 띄우기” 클릭을 해보자.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <style> #menus { display: inline-block; border: 2px solid black; border-radius: 4px; } .menu { padding: 2px 5px; cursor: context-menu; } .menu:hover { background-color: #eeeeee; } #popup:checked + #menus { display: none; } #popup:unchecked + #menus { display: inline-block; } </style> <div id=“container”> <label for=“popup”>팝업창 띄우기</label> <input type=“checkbox” id=“popup”> <div id=“menus”> <div class=“menu”>새파일</div> <div class=“menu”>불러오기</div> <div class=“menu”>종료하기</div> </div> </div> | cs |
마지막으로 input[type=checkbox]를 보이지 않게 설정하면 완성된다. “팝업창 띄우기” 글자를 클릭해보자.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <style> #menus { display: inline-block; border: 2px solid black; border-radius: 4px; } .menu { padding: 2px 5px; cursor: context-menu; } .menu:hover { background-color: #eeeeee; } #popup:checked + #menus { display: none; } #popup:unchecked + #menus { display: inline-block; } input[type=checkbox] { display: none; } </style> <div id=“container”> <label for=“popup”>팝업창 띄우기</label> <input type=“checkbox” id=“popup”> <div id=“menus”> <div class=“menu”>새파일</div> <div class=“menu”>불러오기</div> <div class=“menu”>종료하기</div> </div> </div> | cs |
더 나아가, CSS를 이용하여 “팝업창 띄우기” 글자를 버튼 형태로 꾸밀 수도 있고, 메뉴창의 위치를 자바스크립트를 이용해서 마우스 커서 위치에 옮길 수도 있다. 더 정밀한 기능은 자바스크립트와 결합을 해야 하지만, 간단한 실제 동작하는 버튼은 CSS만으로 구현가능하다.
