JavaScript로 클래스 추가하기: className과 classList.add() 완벽 가이드

HTML 요소에 클래스(class) 속성을 추가하면 정적인 웹 페이지에 생동감을 불어넣는 동적인 사용자 경험을 만들 수 있습니다. 특정 요소에 클래스가 추가되면 해당 요소는 그 클래스 이름에 연결된 스타일을 그대로 적용받게 됩니다.

예를 들어 사용자가 버튼을 클릭하는 상황을 생각해 보세요. 버튼이 클릭되었을 때 CSS 스타일시트에 정의된 대로 페이지의 특정 영역이 바뀌기를 원한다면, 해당 스타일과 연결된 클래스 이름을 요소에 할당하면 됩니다. 그러면 버튼 클릭 후 요소의 모양이 자동으로 변경됩니다.

인터랙티브한 경험은 프론트엔드 프로그래밍의 핵심입니다. 이 가이드에서는 라이브러리 없이 순수 JavaScript(바닐라 JS)만으로 선택한 요소에 클래스 이름을 추가하는 두 가지 방법을 살펴봅니다. 글을 끝까지 읽고 나면 여러분의 프로젝트에서 바로 활용할 수 있을 것입니다.

JavaScript로 클래스 추가하는 기본 원리

JavaScript에서 클래스 이름을 추가하는 방법은 크게 두 가지입니다. 먼저 원하는 HTML 요소를 선택하고, 이어서 className 속성 또는 add() 메서드 중 하나를 사용해 클래스를 추가합니다. 각각의 문법과 사용법은 다음 섹션에서 자세히 다룹니다.

여기서는 별도의 라이브러리 없이 순수 JavaScript만 사용한다는 점을 기억하세요. 일반적인 패턴은 클래스를 추가하는 로직을 함수로 감싸고, 그 함수를 이벤트 핸들러에 전달하는 것입니다. 이렇게 하면 특정 이벤트(예: 클릭)가 발생했을 때만 클래스 추가 함수가 실행됩니다.

또 하나 알아두면 좋은 점은 HTML 요소는 여러 개의 클래스 이름을 가질 수 있다는 사실입니다. 따라서 이미 다른 클래스나 id를 가진 요소에도 새로운 클래스를 자유롭게 추가할 수 있습니다. 다만 프로젝트 내에서 어떤 클래스가 어떤 스타일과 연결되어 있는지 항상 염두에 두고, 스타일을 적용하고 싶은 요소에 알맞은 클래스 이름을 추가해야 합니다.

클래스 이름을 추가하는 JavaScript 문법

이제 요소에 클래스 이름을 추가하는 두 가지 방법을 살펴보겠습니다. 앞서 언급했듯이 클래스 추가 로직을 함수로 감싸는 것이 일반적이며, 완성된 함수는 HTML의 onClick 속성 안에서 호출할 수 있습니다.

첫 번째 방법은 className 속성을 이용하는 것입니다. 로직은 간단합니다. 요소를 선택한 뒤 선택된 요소에 .className을 호출하고, 거기에 클래스 이름을 연결(concatenate)하면 됩니다.

먼저 HTML부터 시작해 보겠습니다:

<div id="div">
Hello World
</div>
<button>
Add Class
</button>

여기에는 id가 "div"인 <div>가 있고, 그 아래에 버튼이 배치되어 있습니다. 이 버튼을 클릭하면 클래스 이름이 추가됩니다. 이번에는 CSS 클래스 예제를 확인해 보겠습니다.

.background {
  background-color: blue;
  color: white;
}

CSS 파일에는 "background"라는 클래스가 정의되어 있습니다. 파란색 배경과 흰색 텍스트가 적용되죠. 우리의 목표는 id가 "div"인 <div>에 "background" 클래스를 추가하는 것입니다.

JavaScript 함수로 <div>를 선택할 수 있습니다:

const addClass = () => {
  const element = document.getElementById('div');
  element.className += "background"
}

addClass라는 이름의 함수는 id가 "div"인 <div>를 선택하여 element 변수에 저장합니다. 그다음 변수에 className 속성을 호출하고 클래스 이름 "background"를 연결합니다. 참고로 JavaScript에서 연결 연산자(+)는 문자열을 덧붙이는 작업입니다. 즉, 클래스 이름을 연결하면 해당 클래스가 요소에 추가되고, 기존에 정의되어 있던 클래스도 그대로 유지됩니다.

아직 끝난 것이 아닙니다! 만든 addClass 함수를 실제로 어딘가에서 호출해야 합니다. 버튼이 클릭되었을 때 <div>에 클래스가 추가되도록 만들어 보겠습니다.

<div id="div">
Hello World
</div>
<button onClick="addClass()">
Add Class
</button>

JavaScript의 onClick 속성을 사용하면 버튼이 클릭된 후 함수를 호출할 수 있습니다. 직접 버튼을 눌러 결과를 확인해 보세요.

정리하면, CSS 파일에서 스타일링과 연결된 "background" 클래스 이름을 추가했습니다. 요소를 찾아 클래스를 추가하는 JavaScript 함수를 만든 뒤, 버튼을 클릭하면 해당 클래스의 스타일이 <div>에 적용됩니다.

JavaScript add() 메서드

위와 동일한 예제를 사용해 두 번째 방법을 살펴보겠습니다. 이번에는 JavaScript의 add() 메서드를 사용합니다. 앞선 예제와 달리 classList 속성을 통해 add()를 호출한다는 점이 차이입니다.

addClass() 함수는 이제 다음과 같습니다:

const addClass = () => {
  const element = document.getElementById('div');
  element.classList.add("background")
}

여전히 id로 <div>를 가져와 변수에 저장합니다. 그런 다음 변수에 classList 속성을 호출하고 이어서 add() 메서드를 실행합니다. 클래스 이름 "background"를 인수로 전달하면 됩니다.

이제 <div>에는 "background" 클래스가 추가되었습니다.

두 가지 서로 다른 방식으로 같은 결과를 얻었습니다. 어떤 방법을 선택할지는 여러분의 몫이지만, 두 번째 방법이 더 널리 권장되는 모범 사례(best practice)로 인정받고 있습니다. add()를 사용하는 것이 문자열 연결 방식보다 오류 발생 가능성이 낮기 때문입니다.

마무리

이 가이드에서는 요소에 클래스 이름을 추가하는 방법을 배웠습니다. CSS 파일에 스타일이 정의된 클래스가 있을 때, 특정 HTML 요소에 그 클래스 이름을 추가하면 해당 요소가 CSS에 정의된 스타일을 그대로 상속받습니다.

페이지의 요소 모양을 동적으로 변경하면 사용자에게 인터랙티브한 경험을 제공할 수 있습니다. 인터랙티브한 애플리케이션은 사용자에게 자연스럽고 매력적으로 느껴지며, 앱을 계속 탐색하고 싶게 만드는 동력이 됩니다.