JavaScript로 CSS 클래스를 사용한 스타일링

이전 수업에서 우리는 style 속성을 변경하여 요소의 CSS 스타일을 변경하는 방법을 배웠습니다. 대부분의 경우 이 방법은 좋은 아이디어가 아닙니다. 문제는 CSS 스타일을 JavaScript 코드 전체에 흩뿌려 놓으면, 나중에 사이트 디자인을 변경하기가 어려워진다는 점입니다. 왜냐하면 스타일이 하드코딩된 부분을 찾아내기 위해 JavaScript 코드를 뒤져야 하기 때문입니다.

유지보수 측면에서 더 편리한 방법은 요소에 CSS 클래스를 추가하거나 제거하여 원하는 방식으로 스타일을 적용하는 것입니다.

예제를 통해 살펴보겠습니다. 여러 개의 문단이 있다고 가정해 봅시다:

<p>text1</p>
<p>text2</p>
<p>text3</p>

어떤 문단을 클릭하든 그 문단이 어떤 색상으로 변하도록 만들어 봅시다. 예를 들어 녹색으로요. 이를 위해 CSS 파일에 문단을 색칠하는 특별한 클래스를 만듭니다:

.colored {
	color: green;
}

클래스를 사용하는 장점은 이제 원하는 색상을 쉽게 변경할 수 있다는 것입니다. 이를 위해서는 JavaScript 코드를 뒤지지 않고, CSS 파일만 수정하면 됩니다. 특히, JavaScript 코드를 작성한 사람이 당신이고, 나중에 스타일링을 다른 사람(아마도 CSS만 다룰 줄 아는 덜 숙련된 사람)이 할 경우에 매우 편리합니다.

자, 이제 클래스를 도입한 후에는 어떤 문단을 클릭하든 해당 문단에 클래스를 추가하기만 하면 색상을 변경할 수 있습니다:

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.classList.add('colored'); // 문단에 클래스 추가
	});
}

제가 클래스 이름으로 원하는 색상을 명시적으로 나타내는 green이라는 단어 대신 colored라는 단어를 선택한 이유를 설명해 보세요.

문단이 주어집니다. '취소선', '굵게', '빨간색으로' 버튼이 주어집니다. 각 버튼을 누를 때마다 주어진 동작(예: 빨간색이 되기)이 문단에 발생하도록 하세요.