[220124] input="checkbox" / label / 아코디언 메뉴

input과 연결되는 label

관계를 짓지 않은 input과 label.

 

See the Pen Untitled by supermint (@ma_ad_shouri) on CodePen.

 

---

checkbox를 체크 유무를 표시하는 법

checkbox 체크 유무 표현하기

---

관계 없는 둘을 묶어주는 id

id를 생성하면서 서로를 엮어줄 수 있다.

---

체크박스, 라벨과 다른 컨텐츠를 연결하기

 

id가 app1인 체크박스와 id가 box1, box2인 div와 연결하기

---

클릭하면 빨간박스 #box1랑 파란박스 #box2가 보이게 만들기

div를 보이지 않게 만들 display

 

체크박스를 해제하면 빨간 박스를, 체크박스를 체크하면 파란박스를 보이게 만듬.

---

클릭하면 접히는 메뉴 만들기

어떻게 구성할지 생각하기

 

어떻게 구조를 만들지 생각하면 나중에 덜 헤맨다 (개인적인 경험)

 

 

형제 선택자(+)를 사용하기 위한 조건

 

 

같은 줄에 있어야지 적용이 된다. 선택된 속성 다음에 있는 같은 속성을 모조리 선택함.

 

---

체크박스 여러개 : 아코디언 메뉴

라벨을 클릭했을때 각각 다른 체크박스에 체크될 수 있도록 id를 다르게 주었다.

 

대략적인 구조 단순화