라디오버튼 클릭시 원하는 배경색으로 바꾸기 - 마크다운 포스팅
목표
이 포스팅은 라디오버튼을 클릭하면 원하는 배경색으로 바꾸는 방법에 대해서 소개합니다.
단계 1: HTML 구조 만들기
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>배경색 변경하기</h2>
<input type="radio" name="color" value="red">빨강
<input type="radio" name="color" value="blue">파랑
<input type="radio" name="color" value="green">초록
</body>
</html>단계 2: CSS 작성하기
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2>배경색 변경하기</h2>
<input type="radio" name="color" value="red">빨강
<input type="radio" name="color" value="blue">파랑
<input type="radio" name="color" value="green">초록
</body>
</html>단계 3: JavaScript 작성하기
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f2f2f2;
}
</style>
<script>
function changeBackground() {
var color = document.querySelector('input[name="color"]:checked').value;
document.body.style.backgroundColor = color;
}
</script>
</head>
<body>
<h2>배경색 변경하기</h2>
<input type="radio" name="color" value="red" onclick="changeBackground()">빨강
<input type="radio" name="color" value="blue" onclick="changeBackground()">파랑
<input type="radio" name="color" value="green" onclick="changeBackground()">초록
</body>
</html>마무리
위의 코드를 이용하면 라디오버튼을 클릭하면 배경색을 원하는 색상으로 변경할 수 있습니다. 이를 통해 사용자에게 보다 편리한 웹 경험을 제공할 수 있습니다.
댓글