티스토리 뷰

반응형

개요

 

체크박스들이 있는데,

하나를 클릭하고, 쉬프트를 누른 나머지 하나를 클릭하면,

마지막으로 클릭했던 체크박스와 지금 쉬프트를 누른채 클릭한 체크박스 사이의

모든 체크박스가 체크 되도록 한다.

 

index-START.html

 

오랜만에 .css div 레이아웃을 둘러보자.

 

1) 전체 div inbox class 이다.

- max-width: 전체 폭이 450 px

- margin: 상하좌우중에서 위쪽만 50px, 나머지는 자동설정

- box-shadow: 그림자의 x, y offset blur ( 수록 블러커짐), 그리고 rgba

 

2) 각각의 체크박스 리스트는 .item 이다.

 

3) input:checked+p

- input:checked 바로 뒤에 오는 p 이다.

- 완료되었다는 느낌의 background 취소선을 넣어준다.

 

 

 

 

 

input-FINISHED.html

 

자바스크립트 부분은 스마트하다.

 

1) 모든 체크박스에 'click' 대한 이벤트 리스너를 달아준다.

 

2) 기본척으로 'click' 하면 checked 된다.

 

3) 그와는 별개로 handleCheck() 실행되는데

-  (만약) 이전의 click 으로 다른 곳에 checked box 있다면

-  지금 click 과의 사이의 모든 checkbox.checked true 만들어준다.

 

 

 


반응형

'javascript30' 카테고리의 다른 글

12 - Key Sequence Detection  (0) 2019.03.15
11 - Custom Video Player  (0) 2019.03.14
10 - Hold Shift and Check Checkboxes  (0) 2019.03.12
09 - Dev Tools Domination  (0) 2019.03.11
08 - Fun with HTML5 Canvas  (0) 2019.03.11
07 - Array Cardio Day 2  (0) 2019.03.09
댓글
댓글쓰기 폼