자바스크립트 기초 (9) - HTML,CSS 수정하기

자바스크립트를 사용하여 HTML 및 CSS를 수정하는 것은 동적인 웹 페이지를 만들고 상호작용성을 추가하는 데 매우 유용합니다.

아래에서는 자바스크립트를 사용하여 HTML 요소를 조작하고 CSS 스타일을 변경하는 방법에 대해 설명하겠습니다.

 

1. HTML 요소 선택하기 :

자바스크립트로 HTML 요소를 수정하기 전에 해당 요소를 선택해야 합니다.

일반적으로 document.querySelector() 또는 document.getElementById()와 같은 DOM 메서드를 사용하여 선택할 수 있습니다.

예를 들어, 아이디가 "myElement"인 요소를 선택하는 방법은 다음과 같습니다.

- const element = document.getElementById("myElement");

 

2. HTML 내용 수정하기 :

선택한 HTML 요소의 내용을 변경하려면 innerHTML 속성을 사용할 수 있습니다.

예를 들어, 선택한 요소의 내용을 다른 내용으로 변경하는 방법은 다음과 같습니다.

- element.innerHTML = "새로운 내용";

 

3.CSS 스타일 변경하기

자바스크립트를 사용하여 선택한 HTML 요소의 CSS 스타일을 변경할 수 있습니다.

style 속성을 사용하여 스타일 속성을 직접 수정하거나 classList 속성을 사용하여 클래스를 추가하거나 제거할 수 있습니다.

예를 들어, 선택한 요소의 배경색을 빨간색으로 변경하고 폰트 크기를 20픽셀로 변경하는 방법은 다음과 같습니다.

- element.style.backgroundColor = "red;

- element.style.fontSize = "20px";

 

또는 클래스를 추가하거나 제거하여 CSS 클래스를 적용하거나 제거할 수 있습니다.

"highlight" 클래스를 추가하는 방법은 다음과 같습니다.

- element.classList.add("highlight");

 

"highlight" 클래스를 제거하는 방법은 다음과 같습니다.

- element.classList.remove("highlight");

 

 

4. 이벤트 처리하기

자바스크립트를 사용하여 HTML 요소에 이벤트 처리기를 추가할 수도 있습니다.

이벤트 처리기를 사용하면 요소에 대한 상호작용 및 동적 동작을 정의할 수 있습니다.

예를 들어, 버튼 클릭 이벤트에 대한 처리기를 추가하는 방법은 다음과 같습니다.

const button = document.getElementById("myButton");
button.addEventListener("click", function() {
  // 버튼이 클릭되었을 때 실행할 코드 작성
});

이벤트 처리가 함수 내에서 HTML이나 CSS를 수정하거나 다른 작업을 수행할 수 있습니다.