JavaScript에서 클래스를 사용한 스타일링

style 속성을 통해 요소를 스타일링하는 것은 때로는 편리하지만, 대부분의 경우 최선의 아이디어는 아닙니다. 문제는 스타일이 JavaScript 파일 전체에 흩어져 있어 변경하기 어렵다는 점입니다. JavaScript 코드를 뒤지지 않고도 쉽게 변경할 수 있도록 CSS 파일에서 스타일을 지정하는 것이 훨씬 편리합니다.

예를 들어, 특정 메시지를 출력하는 요소가 있다고 가정해 봅시다. 메시지는 "좋은" 메시지일 수도 있고 초록색으로 표시되며, "나쁜" 메시지일 수도 있고 빨간색으로 표시됩니다. 이러한 경우 가장 좋은 해결책은 해당 CSS 클래스를 만드는 것입니다:

.success {
	color: green;
}
.error {
	color: red;
}

이제 "좋은" 메시지를 출력할 때 해당 요소에 "좋은" 클래스를 부여합니다:

elem.textContent = 'good';
elem.classList.add('success');

그리고 "나쁜" 메시지를 출력할 때는 해당 요소에 "나쁜" 클래스를 부여합니다:

elem.textContent = 'bad';
elem.classList.add('error');

숫자가 포함된 단락이 주어집니다. 이 단락들을 반복문으로 순회하고, 짝수를 포함하는 단락은 빨간색으로, 홀수를 포함하는 단락은 초록색으로 색칠하세요.