[CSS] 보더가 겹쳐져 있는 메뉴 ACTIVE 주기

상황

각각의 네모박스는 label 안의 input checkbox로 되어있고 보더를 unchecked는 회색으로, checked는 검정색으로 처리
label에 모두 border: 1px solid #ddd; 를 주었더니 겹치는 부분 발생.
그리고 checked 된 애한테 검정색으로 색상을 바꿔주었더니 마음대로 되지 않았다.

해결

1. 모든 label에 보더를 준다.

2. 모든 label에 겹치는 만큼을 margin으로 빼준다. margin-top: -1px;
(이렇게 하면 봤을때 맨 위에 빼고 모두 일정한 보더를 가지게 됨)

3. 첫번째 label에 margin-top: 0;
(여기까지 하면 첫번째를 포함해서 모두 일정한 보더를 가지게 됨.)

4. checked 된 애한테 보더 색상 바꿔주면서 position: relative; 추가.
==> 그럼 checked된애가 위로 뜨면서 보더가 위로 올라온다.