돌아가기

선택 가능한 리스트

중요도: 5

파일 관리 프로그램처럼 요소를 선택할 수 있게 해주는 리스트를 만들어봅시다. 요구사항은 다음과 같습니다.

  • 요소를 클릭하면 해당 요소가 선택(.selected 클래스 추가)되고, 나머지 요소들은 선택 해제됩니다.
  • Ctrl키(Mac에서 Cmd키)를 누른 상태에서 요소를 클릭하면 해당 요소는 원래처럼 선택, 선택 해제되지만 다른 요소들의 상태는 변하지 않습니다(중복 요소 선택 기능).

데모:

참고 1: 항목들이 모두 텍스트이며 중첩 태그가 없다고 가정합니다.

참고 2: 텍스트를 클릭할 때 발생하는 브라우저 이벤트를 막습니다.

샌드박스를 열어 정답을 작성해보세요.