반응형
아래는 버튼 클릭으로 글자를 변경하는 간단한 HTML, CSS 및 JavaScript 코드입니다. 이 코드는 초보자도 이해하기 쉽도록 주석이 추가되어 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>버튼으로 글자 변경</title>
<style>
/* 스타일 지정 */
#text {
font-size: 24px;
}
</style>
</head>
<body>
<h1>버튼으로 글자 변경</h1>
<!-- 글자 표시 영역 -->
<p>현재 글자: <span id="text">안녕하세요</span></p>
<!-- 버튼 클릭 시 글자 변경 -->
<button onclick="changeText()">글자 변경</button>
<script>
// 글자 변경 함수
function changeText() {
var textElement = document.getElementById("text");
textElement.textContent = "반갑습니다!";
}
</script>
</body>
</html>
반응형
'HTML 예제' 카테고리의 다른 글
| 배경 색상 변경 버튼 (0) | 2023.12.07 |
|---|---|
| 사용자 입력 받기 (0) | 2023.12.07 |
| 이미지 슬라이드 쇼 (0) | 2023.12.07 |
| 간단한 타이머 (0) | 2023.12.07 |
| 간단한 계산기 (0) | 2023.12.07 |
