[브라우저와 자바스크립트] 16. 스타일 다루기

// 스타일 다루기
const today = document.querySelector('#today');
const tomorrow = document.querySelector('#tomorrow');

// style 프로퍼티
today.childten[0].style.textDecoration = 'line-through';
today.childten[0].style.backgroundColor = '#000000';

오늘 할 일 중에서 자바스크립트 공부하기를 완료했다고 가정하고 중간에 줄을 그어봅시다.

그러면 오늘 할 일의 자식 요소들 중에서 0번 인덱스를 먼저 선택한 다음에 style 프로퍼티에 접근하는 겁니다.

그리고 나서 text-decoration을 line-through로 만들어주면 되는데요. 

 

style 프로퍼티를 통해서 CSS 속성을 다룰 때 여러 단어를 이어서 만든 속성은 카멜 표기법을 사용해야 합니다.

만약에 배경 색도 바꾼다면 backgroundColor도 C를 대문자로 작성해 주면 됩니다.

 

그런데 이렇게 style 프로퍼티를 활용하면 몇 가지 문제가 있습니다.

일단 코드를 저장하고 실행해보면 스타일은 잘 적용된 것 같은데 실제로 해당하는 태그를 한번 살펴보면 style 속성에 작성한 스타일이 추가 된 것을 확인할 수 있습니다.

style 프로퍼티를 활용하면  이렇게 태그에 직접적으로 값이 적용되어 버리기 때문에 스타일 우선순위가 높아져 버리는 문제도 있고 심지어 같은 스타일을 다른 여러 태그에 적용해야 될 때는 비슷한 코드를 불필요하게 많이 작성해야 되는 문제도 있습니다. 

그래서 의도된 상황이 아니라면 일반적으로 JavaScript를 활용해서 스타일을 입힐 때 style 프로퍼티를 사용하는 것보다 태그의 클래스를 변경하는 방식이 좀 더 권장되는 방식입니다.

 

JavaScript로 HTML 태그의 클래스를 다루는 방식은 크게 두 가지가 있습니다.

첫 번째는 className 프로퍼티를 활용하는 것입니다.

스타일 시트에 done이라는 클래스 스타일을 미리 만들어 놓고 className 프로퍼티에 새로운 값을 할당해서 코드를 실행해보면 done 클래스에 미리 작성해둔 스타일이 입혀지는 방식입니다.

// elem.className
today.children[1].className = 'done';

그런데 한 가지 문제는 className 프로퍼티로 값을 변경하게 되면 클래스 속성값 전체가 바뀌게 됩니다.

item 클래스는 사라지고 done으로 변경된 것을 볼 수 있는데요.

상황에 따라서는 원래 있던 item 클래스를 그대로 두고 done 클래스를 추가하고 싶을 수 있습니다.

 

그럴 때는 className보다 두 번째 방법인 classList라는 프로퍼티를 활용하는 것이 좋습니다.

// elem.classList: add, remove, toggle
console.log(today.classList);
console.log(today.children[1].classList);

classList는 이렇게 클래스의 속성값을  유사배열로 다루는 프로퍼티인데요. classList를 활용하면 클래스 속성을 하나씩 다룰 수 있는 것 뿐만 아니라 클래스를 좀 더 편하게 다룰 수 있는 add, remove, toggle이라는 메소드도 활용할 수가 있습니다. 메소드 이름만 봐도 각각 어떤 기능인지 알 수 있을 것 같은데요. 하나씩 살펴보면  add는 말 그대로 클래스를 추가하는 겁니다. 

item.classList.add('done');

 

저장하고 실행해보면 내일 할 일의 자식 요소들 중에서 1번 인덱스에  done 클래스가 추가된 것을 확인할 수 있습니다.

참고로 여러 개의 클래스를 넣고 싶을 때는 띄어스기로 넣는게 아니라 쉼표로 구분해서 여러 개의 파라미터로 전달하면 되고 만약 똑같은 이름의 클래스를 중복해서 추가하더라도 코드를 실행해보면 결국 하나만 추가됩니다.

 

그리고 remove는 클래스를 제거하는 메소드라서 이렇게 파라미터로 클래스 이름을 문자열로 전달하면 클래스가 삭제되고 그리고 add와 마찬가지로 여러 개의 파라미터를 전달하게 되면 여러 개 클래스를 삭제할 수도 있습니다.

item.classList.remove('done');

마지막으로 toggle은 있으면 제거하고 없으면 추가하는 메소드입니다. 이렇게 코드를 작성하고 실행해보면 done 클래스가 추가된 걸 확인할 수 있는데요. 참고로 toggle은 하는 add나 remove처럼 여러 개의 파라미터를 전달한다고 해서 여러 개의 클래스를 toggle하지는 않습니다. toggle의 두 번째 파라미터에 따로 특별한 기능이 있기 때문입니다.

item.classList.toggle('done');

boolean 형태의 값을 전달받아서 만약 true를 전달하게 되면 add의 기능만 하고 false를 전달하면 remove의 기능만 하도록 toggle의 기능을 강제하는 역할을 하는 겁니다. 예를 들어서 이 상태로 코드를 실행해보면 remove의 역할만 하기 때문에 done이 추가되지 않은 모습을 확인할 수 있습니다.