[HTML]input, label 세로메뉴(code)

See the Pen PoWxMdR by minsucoding (@minsucoding) on CodePen.

 

위 예제를 보면 클릭을 했을때 리스트가 열리는걸 볼수있습니다

원리는 input type="checkbox"를 해주게 되면 CSS에서 checked라는 가상선택자를 사용할수 있습니다

만약 체크가 되면 리스트가 열리고 체크를 해제하면 다시 리스트를 닫아줘라를 CSS로 구현한 것입니다

 

코드를 보면 그렇게 어렵지는 않습니다
input 과 label의 성질을 이용해서 만들었으며, input의 사이즈를 아예 없애주었습니다
하지만 선택을 해주어도 정상 작동 하는 이유가 무엇일까요??

바로 label에게 비밀이 있습니다
label태그는 label의 for값이랑 id값이 동일한 요소와 쌍을 이루는 성질이 있습니다

그렇기 때문에 지금 input과 label은 동일한 성질을 가지게 된 것 입니다
그말은 label을 눌러도 input을 클릭 한것처럼 checkbox의 체크가 된다라는 것입니다

그러면 위에 input의 checkbox를 안보이게 해준 이유를 아시겠죠?

 

code.pen자체에서 a링크를 막아주지 못해서 JS에 preventDefault를 주었는데 그래도 링크오류가 남아있네요...