웹 개발자로서 웹 페이지의 특정 섹션의 색상을 변경해야 할 필요가있을 수 있습니다. 이를 달성하는 한 가지 방법은 버튼을 사용하여 HTML에서 DIV 요소의 색상을 변경하는 것입니다. 이 기사에서는이 작업을 수행하는 방법을 살펴보고 시작하는 데 도움이되는 샘플 코드를 제공합니다.
먼저 HTML로 작업 할 때 발생할 수있는 전문 용어를 정의해 봅시다.
- 버튼 : 웹 페이지의 클릭 가능한 요소는 클릭하면 작업을 트리거합니다.
-Div : 다른 요소를 함께 그룹화하고 스타일을 적용하는 데 사용되는 HTML의 컨테이너 요소.
- 색상 : 색조, 채도 및 밝기를 결정하는 요소의 시각적 특성.
이제 코드에 뛰어 들어 봅시다. 다음은 DIV 요소의 색상을 변경하는 버튼을 만드는 방법의 예입니다.
<!DOCTYPE html>
<html>
<head>
<title>Button to Change Div Color</title>
<style>
#myDiv {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="myDiv"></div>
<button onclick="changeColor()">Change Color</button>
<script>
function changeColor() {
var div = document.getElementById("myDiv");
div.style.backgroundColor = "blue";
}
</script>
</body>
</html>Preview :
이 코드에서는 먼저 ""MyDiv""의 ID가있는 DIV 요소를 정의하고 CSS를 사용하여 배경색을 빨간색으로 설정합니다. 그런 다음 텍스트 ""색상 변경""으로 버튼 요소와 클릭하면 ""changecolor""함수를 호출하는 onclick 속성을 만듭니다.
"changecolor"함수는 document.getElementById 메서드를 사용하여 ""mydiv""의 ID를 사용하여 div 요소를 선택합니다. 그런 다음 Style.backgroundColor 속성을 사용하여 DIV의 배경색을 파란색으로 설정합니다.
"changecolor"함수에서 Style.backgroundColor 속성의 값을 수정하여 원하는 값으로 색상을 변경하도록이 코드를 사용자 정의 할 수 있습니다.
결론적으로, 버튼을 사용하여 HTML에서 DIV 요소의 색상을 변경하는 것은 웹 페이지에 상호 작용을 추가하는 간단하고 효과적인 방법입니다. 제공된 샘플 코드를 사용하면 자체 프로젝트 에서이 기능을 쉽게 구현할 수 있습니다.
'구글덕후의 HTML' 카테고리의 다른 글
| 선택 안됨 구글덕후의 HTML [6] form양식 샘플 코드 2 (0) | 2023.03.13 |
|---|---|
| 구글덕후의 HTML [5] form양식, label, input (0) | 2023.03.12 |
| 구글덕후의 HTML [4] 심플랜딩페이지 / 구글 사이트 도구 (0) | 2023.03.11 |
| 구글덕후의 HTML [3] 심플랜딩페이지 (0) | 2023.03.07 |
| 구글덕후의 HTML [2] 테이블 (0) | 2023.03.06 |