[강의정리]자바스크립트로 스타일 적용하기

스타일은 CSS로 적용되지만, HTML/CSS/JS파일 어디든 작성이 가능하다. 때문에, 기본값을 정해놓고 상황에 따라 다른 적용방식을 선택할 필요가 있다. 권장할 만한 방법 중 하나는 내용은 HTML, 스타일은 CSS파일에, 동작은 Js파일에 나눠 작성하는 것이다. 이렇게 작성하면 미래의 나 혹은 팀원들이 코드를 분리해서 읽기 편리하다.

스타일 적용 클래스

자바스크립트를 활용하여 문서에 동적인 스타일을 적용시키는 기교 중 하나가 적용될 스타일을 미리 CSS에 작성한 뒤 해당 스타일의 선택자를 특정 클래스로 작성하고, 이벤트가 발생했을 때 원하는 요소에 해당 클래스를 부여하는 방식이다.

많이 사용되는 것이 .hidden과 같이 요소를 숨기는 스타일 적용이다.

HTML)HTML태그.classList.contains()

인자값과 같은 클래스가 해당 HTML태그에 있는지 확인하여 Boolean값을 반환

HTML)HTML태그.classList.remove()

인자값의 클래스를 해당 HTML태그에 있는지 확인하여, 있으면 제거

HTML)HTML태그.classList.add()

인자값의 클래스를 해당 HTML태그에 있는지 확인하여, 없으면 추가

HTML)HTML태그.classList.toggle()

인자값의 클래스를 해당 HTML태그에 있는지 확인하여, 있으면 제거하고 없으면 추가

마무리

반년만에 만난 네가 참 어색하구나