[지식루프 IT공부] classList란?

🔍 classList란?

classList는 JavaScript에서 HTML 요소의 클래스를 조작할 수 있도록 해주는 속성입니다.
즉, HTML 요소의 class 속성을 쉽게 추가, 제거, 토글할 수 있도록 해주는 객체입니다.

---

📌 classList의 주요 메서드

 

이걸 왜 쓰는 것일까? 

 

CSS에 미리 특정 상황이 되었을 때의 양식변화를 작성한 후, 

JS에서 클래스를 조건에 따라 추가했다가 삭제를 함으로써, 화면상의 이미지를 움직이게 하는 효과를 낼 수 있습니다. 

 

아래는 마우스를 클릭함에 따라 깃발이 위로 올라갔다가 내려가게 하는 JS 예시입니다. 

 

아래는 css 파일입니다. 

 

 

이런식으로 하면 .up 상태가 될 때 이미지가 움직이고, 아닐 때에는 다시 원래자리로 복귀하여, 마우스 클릭시마다 깃발이 움직이는 효과를 만들 수 있습니다. 

 

너무나도 신기방기하더라구요. 

 

도움이 되셨길 바라며 빠이~!