CSS는 웹 페이지의 디자인과 스타일을 제어하기 위해 사용되는 언어입니다. JavaScript를 사용하여 동적으로 CSS를 조작하고, HTML 요소에 클래스를 추가, 제거하거나 변경하여 웹 페이지의 스타일을 다르게 표현할 수 있습니다.

1. 스타일링을 위한 HTML 요소 선택

JavaScript에서 특정 HTML 요소를 선택하는 방법에는 여러 가지가 있습니다. 가장 일반적인 방법은 document.querySelector() 메서드를 사용하는 것입니다. 이 메서드는 CSS 선택자를 이용하여 원하는 요소를 선택할 수 있습니다. 예를 들어, id가 “my-element”인 요소를 선택하는 방법은 다음과 같습니다.

const element = document.querySelector("#my-element");

2. CSS 스타일 변경

선택한 HTML 요소의 스타일을 변경하기 위해서는 style 속성에 접근하여 원하는 스타일을 설정하면 됩니다. 예를 들어, 배경색을 빨간색으로 변경하는 코드는 다음과 같습니다.

element.style.backgroundColor = "red";

3. CSS 클래스 조작

CSS 클래스를 조작하여 웹 페이지의 스타일을 다르게 표현할 수도 있습니다. classList 속성을 사용하여 HTML 요소의 클래스를 조작할 수 있습니다. 아래는 클래스를 추가, 제거, 토글하는 방법을 보여주는 예시입니다.

// 클래스 추가
element.classList.add("new-class");

// 클래스 제거
element.classList.remove("old-class");

// 클래스 토글
element.classList.toggle("active-class");

4. 참고 자료

• MDN Web Docs - CSS
• MDN Web Docs - document.querySelector()
• MDN Web Docs - Element.style
• MDN Web Docs - Element.classList