▶ JavaScript HTML DOM

JavaScript DOM CSS

JavaScript DOM CSS: CSS 스타일 조작

JavaScript DOM CSS는 HTML 문서의 스타일을 동적으로 조작하는 방법을 제공합니다. JavaScript를 사용하여 CSS 스타일을 변경하면 웹 페이지의 디자인을 실시간으로 업데이트할 수 있으며, 사용자 인터랙션에 반응하여 다양한 시각적 효과를 만들 수 있습니다. 이 가이드는 JavaScript를 사용하여 DOM 요소의 CSS 스타일을 선택하고 수정하는 방법에 대해 설명합니다.

1. DOM 요소의 CSS 접근

JavaScript를 사용하여 DOM 요소의 CSS 스타일에 접근하려면 style 프로퍼티를 사용합니다. 이 프로퍼티를 통해 인라인 스타일을 설정하거나 변경할 수 있습니다.

1.1. 인라인 스타일 수정

<p id="myParagraph">This is a paragraph.</p>

<script>
  const paragraph = document.getElementById('myParagraph');
  paragraph.style.color = 'blue';  // 텍스트 색상 변경
  paragraph.style.fontSize = '20px'; // 글자 크기 변경
</script>

위의 코드는  요소의 텍스트 색상을 파란색으로, 글자 크기를 20픽셀로 변경합니다.

1.2. 여러 스타일 변경

여러 CSS 속성을 한 번에 변경할 수 있습니다.

paragraph.style.cssText = 'color: red; font-size: 18px; background-color: yellow;';

Text 속성을 사용하면 여러 스타일을 한 줄로 작성할 수 있습니다.

2. 클래스와 CSS 스타일 조작

JavaScript를 사용하여 DOM 요소에 CSS 클래스를 추가하거나 제거할 수 있습니다. 이를 통해 미리 정의된 스타일을 손쉽게 적용할 수 있습니다.

2.1. `classList` 프로퍼티

classList 프로퍼티는 클래스의 추가, 삭제 및 토글을 쉽게 할 수 있게 해줍니다.

2.1.1. 클래스 추가

<button id="toggleButton">Toggle Class</button>
<p id="myParagraph">This is a paragraph.</p>

<style>
  .highlight {
      background-color: yellow;
      font-weight: bold;
  }
</style>

<script>
  const button = document.getElementById('toggleButton');
  const paragraph = document.getElementById('myParagraph');

  button.addEventListener('click', () => {
      paragraph.classList.add('highlight');  // highlight 클래스 추가
  });
</script>

버튼을 클릭하면  요소에 highlight 클래스가 추가되어 스타일이 적용됩니다.

2.1.2. 클래스 제거

paragraph.classList.remove('highlight');  // highlight 클래스 제거

이 코드는 highlight 클래스를 제거하여 스타일을 초기화합니다.

2.1.3. 클래스 토글

button.addEventListener('click', () => {
    paragraph.classList.toggle('highlight');  // highlight 클래스 토글
});

위의 코드는 버튼을 클릭할 때마다 highlight 클래스가 추가되거나 제거됩니다.

3. CSS 속성 읽기

JavaScript를 사용하여 DOM 요소의 CSS 스타일 속성을 읽을 수도 있습니다. 이 경우 getComputedStyle() 메서드를 사용합니다.

3.1. `getComputedStyle()`

이 메서드는 요소의 최종 스타일을 반환합니다. 이는 CSS 파일, 인라인 스타일, 브라우저의 기본 스타일을 모두 포함합니다.

<p id="myParagraph">This is a paragraph.</p>

<script>
  const paragraph = document.getElementById('myParagraph');
  const computedStyle = getComputedStyle(paragraph);

  console.log(computedStyle.color);  // 현재 텍스트 색상 출력
  console.log(computedStyle.fontSize); // 현재 글자 크기 출력
</script>

*getComputedStyle()*를 사용하면 요소의 CSS 속성 값을 정확하게 확인할 수 있습니다.

4. CSS 애니메이션과 전환

JavaScript를 사용하여 CSS 애니메이션과 전환 효과를 제어할 수 있습니다. 이를 통해 사용자에게 더 나은 시각적 경험을 제공할 수 있습니다.

4.1. CSS 전환

CSS 전환은 속성이 변경될 때 애니메이션 효과를 추가하는 방법입니다. transition 속성을 사용하여 설정합니다.

<style>
  #myParagraph {
      transition: all 0.5s ease;
  }
  .highlight {
      background-color: yellow;
      font-size: 20px;
  }
</style>

<p id="myParagraph">This is a paragraph.</p>

<script>
  const paragraph = document.getElementById('myParagraph');

  paragraph.addEventListener('mouseenter', () => {
      paragraph.classList.add('highlight');  // 마우스 오버 시 클래스 추가
  });

  paragraph.addEventListener('mouseleave', () => {
      paragraph.classList.remove('highlight');  // 마우스 나갈 시 클래스 제거
  });
</script>

이 코드는  요소에 마우스를 올리면 highlight 클래스가 추가되고, 마우스를 떼면 제거되어 부드러운 전환 효과가 나타납니다.

4.2. CSS 애니메이션

CSS 애니메이션을 통해 요소의 스타일을 순차적으로 변경할 수 있습니다. @keyframes를 사용하여 애니메이션의 동작을 정의합니다.

<style>
  @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
  }

  #myParagraph {
      animation: fadeIn 2s;  /* 2초 동안 fadeIn 애니메이션 적용 */
  }
</style>

<p id="myParagraph">This is a paragraph with fade-in effect.</p>

이 코드는 페이지 로드 시  요소가 페이드 인되는 효과를 적용합니다.

5. CSS와 JavaScript의 통합 활용

JavaScript를 사용하여 CSS 스타일을 조작하는 것은 사용자 인터페이스를 동적으로 업데이트하는 데 중요한 역할을 합니다. 다음은 JavaScript와 CSS를 통합하여 사용자의 상호작용에 반응하는 동적 예시입니다.

5.1. 사용자 상호작용 기반 스타일 변경

<button id="changeStyleButton">Change Style</button>
<p id="myParagraph">This is a paragraph.</p>

<script>
  const button = document.getElementById('changeStyleButton');
  const paragraph = document.getElementById('myParagraph');

  button.addEventListener('click', () => {
      paragraph.style.color = 'green';          // 글자 색상 변경
      paragraph.style.backgroundColor = 'lightgray'; // 배경색 변경
      paragraph.style.fontSize = '25px';        // 글자 크기 변경
  });
</script>

버튼을 클릭하면  요소의 스타일이 변경됩니다.

요약

JavaScript DOM CSS는 HTML 요소의 스타일을 동적으로 조작하는 데 중요한 역할을 합니다. JavaScript를 사용하여 CSS 스타일을 읽고, 변경하며, 애니메이션과 전환 효과를 적용함으로써 더욱 상호작용적이고 매력적인 웹 페이지를 만들 수 있습니다.

DOM 요소 선택 및 스타일 조작: style 프로퍼티를 사용하여 요소의 인라인 스타일을 변경하고, classList를 사용하여 클래스를 추가하거나 제거합니다.
CSS 속성 읽기: getComputedStyle()를 사용하여 요소의 현재 스타일을 읽을 수 있습니다.
전환 및 애니메이션: CSS 전환과 애니메이션을 통해 요소의 스타일 변경을 부드럽게 처리할 수 있습니다.
사용자 상호작용 처리: 이벤트 리스너를 추가하여 사용자의 상호작용에 따라 스타일을 동적으로 변경할 수 있습니다.

JavaScript와 CSS를 결합하여 동적이고 매력적인 웹 애플리케이션을 구현할 수 있습니다.

코딩 스쿨 JavaScript