DOM(Document Object Model) – DOM 조작 – 2 – 스타일의 조작

작성자 wooah

DOM(Document Object Model) – DOM 조작 – 2 – 스타일의 조작

스타일 조작이란?

DOM(Document Object Model)을 통해 HTML 요소의 스타일을 동적으로 변경하는 것을 말합니다. 스타일 조작을 통해 요소의 색상, 크기, 위치 등을 변경할 수 있어 웹 페이지를 더 동적이고 시각적으로 풍부하게 만들 수 있습니다.

스타일 조작하기

스타일 조작은 style 속성을 사용하여 HTML 요소에 직접 스타일을 적용하거나, 자바스크립트를 사용하여 동적으로 스타일을 변경하는 방법이 있습니다.

1. style 속성을 사용한 스타일 조작

HTML 요소의 style 속성을 직접 수정하여 스타일을 변경할 수 있습니다. 예를 들어, 다음과 같은 HTML 요소가 있다고 가정해봅시다.

<p id="myParagraph">안녕하세요!</p>

이 경우, 자바스크립트를 사용하여 myParagraph ID를 가진 요소의 스타일을 변경할 수 있습니다. 예를 들어, 다음과 같이 스타일 속성을 직접 수정할 수 있습니다.

const paragraph = document.getElementById('myParagraph');
paragraph.style.color = 'red';
paragraph.style.fontSize = '20px';
paragraph.style.marginTop = '10px';

위의 코드는 myParagraph ID를 가진 <p> 요소의 텍스트 색상을 빨간색으로, 글꼴 크기를 20픽셀로, 위쪽 여백을 10픽셀로 변경합니다.

2. classList를 사용한 스타일 조작

여러 요소에 동일한 스타일을 적용해야 할 경우, classList를 사용하여 CSS 클래스를 추가하거나 제거할 수 있습니다. CSS 클래스는 미리 정의된 스타일 규칙을 포함하고 있으며, 해당 클래스를 요소에 적용하면 스타일이 적용됩니다.

예를 들어, 다음과 같은 CSS 클래스가 있다고 가정해봅시다.

.highlight {
  color: yellow;
  background-color: blue;
}

이 경우, 자바스크립트를 사용하여 클래스를 추가하거나 제거할 수 있습니다. 예를 들어, 다음과 같이 클래스를 추가하는 방법입니다.

const element = document.getElementById('myElement');
element.classList.add('highlight');

위의 코드는 myElement ID를 가진 요소에 highlight 클래스를 추가하여 해당 요소에 노란색 글꼴과 파란색 배경을 적용합니다.

3. CSS 스타일 시트 조작

DOM을 사용하여 동적으로 CSS 스타일 시트를 생성하고 조작할 수도 있습니다. 예를 들어, style 태그를 생성하고 innerHTML 속성을 사용하여 CSS 규칙을 동적으로 추가할 수 있습니다.

const styleSheet = document.createElement('style');
styleSheet.innerHTML = `
  p {
    color: red;
    font-size: 20px;
    margin-top: 10px;
  }
`;
document.head.appendChild(styleSheet);

위의 코드는 <style> 요소를 생성하고, 이를 통해 <p> 요소의 스타일을 동적으로 변경합니다. 생성한 <style> 요소를 <head> 요소에 추가하여 스타일이 적용됩니다.

예시

예를 들어, 다음과 같은 HTML 코드가 있다고 가정해봅시다.

<button id="myButton">클릭하세요!</button>

이 경우, 자바스크립트를 사용하여 버튼의 스타일을 동적으로 변경하는 예시를 살펴보겠습니다.

const button = document.getElementById('myButton');

// 버튼에 마우스가 올라갔을 때 스타일 변경
button.addEventListener('mouseenter', () => {
  button.style.backgroundColor = 'blue';
  button.style.color = 'white';
});

// 버튼에서 마우스가 떠났을 때 스타일 초기화
button.addEventListener('mouseleave', () => {
  button.style.backgroundColor = '';
  button.style.color = '';
});

// 버튼을 클릭했을 때 스타일 변경 및 텍스트 변경
button.addEventListener('click', () => {
  button.style.backgroundColor = 'green';
  button.style.border = 'none';
  button.textContent = '클릭되었습니다!';
});

위의 예시에서는 버튼에 마우스를 올리면 배경색과 글꼴 색상이 변경되며, 마우스를 떠나면 스타일이 초기화됩니다. 또한 버튼을 클릭하면 배경색과 테두리가 변경되고 텍스트가 ‘클릭되었습니다!’로 변경됩니다.

스타일 조작 주의사항

  1. 스타일을 변경할 때, HTML 요소의 style 속성을 직접 조작하는 것은 가능하지만, 가능한 한 CSS 클래스를 사용하여 스타일을 적용하는 것이 좋습니다. 이렇게 하면 스타일을 중앙에서 관리할 수 있고, 코드의 가독성과 유지보수성이 향상됩니다.
  2. 스타일을 동적으로 변경할 때, 요소의 스타일을 직접 수정하는 것보다는 classList를 사용하여 CSS 클래스를 추가하거나 제거하는 것이 유연하고 효율적입니다.
  3. 스타일 조작 시 DOM 요소의 계층 구조를 고려해야 합니다. 스타일이 적용되는 요소의 부모, 자식, 형제 요소들에 영향을 줄 수 있으므로 주의해야 합니다.
  4. CSS 스타일 시트를 동적으로 조작할 때, 너무 많은 스타일 규칙을 추가하면 성능에 영향을 줄 수 있으므로 필요한 규칙만 추가하는 것이 좋습니다.

자바스크립트를 사용하여 DOM을 조작하여 웹 페이지의 스타일을 동적으로 변경하는 것은 매우 유용한 기능입니다. 다양한 스타일 조작 방법을 익히고 적절히 활용하면 웹 페이지를 더 흥미롭고 상호작용적으로 만들 수 있습니다. 스타일 조작을 할 때는 유지보수성과 성능에 주의하며, 최적의 방법을 선택하여 사용하시기 바랍니다.

답글 남기기