아래는 배경 색상을 변경할 수 있는 버튼이 있는 HTML 코드입니다. 이 코드는 초보자도 이해하기 쉽도록 주석이 추가되어 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>배경 색상 변경 버튼</title>
<style>
/* 스타일 지정 */
body {
text-align: center;
}
#content {
margin-top: 50px;
}
</style>
</head>
<body>
<h1>배경 색상 변경 버튼</h1>
<!-- 배경 색상 변경 버튼 -->
<button onclick="changeBackgroundColor()">배경 색상 변경</button>
<!-- 내용 표시 영역 -->
<div id="content">
<p>이곳에 내용을 입력하세요.</p>
</div>
<script>
// 배경 색상 변경 함수
function changeBackgroundColor() {
// 랜덤한 색상 생성
var randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
// body 요소의 배경 색상 변경
document.body.style.backgroundColor = randomColor;
}
</script>
</body>
</html>
'HTML 예제' 카테고리의 다른 글
| 화면 알림 뛰우기 (0) | 2023.12.07 |
|---|---|
| 간단한 로그인 폼 (0) | 2023.12.07 |
| 사용자 입력 받기 (0) | 2023.12.07 |
| 버튼 클릭으로 글자 변경 (0) | 2023.12.07 |
| 이미지 슬라이드 쇼 (0) | 2023.12.07 |
