버튼 클릭하면 문구가 바뀌는 JavaScript 기초 배우기

“버튼을 눌렀을 때 문구가 바뀌는 웹페이지를 만들고 싶으신가요?”
이번 글에서는 JavaScript를 이용해 클릭 시 문구가 바뀌는 가장 기본적인 예제를 소개합니다.
프론트엔드 개발의 핵심인 동적인 기능을 처음 접하는 분들께 딱 좋은 내용이에요!

✔ JavaScript란?

JavaScript는 웹페이지에 동적인 기능을 추가하는 프로그래밍 언어입니다.
HTML과 CSS가 웹페이지의 구조와 디자인을 담당한다면, JavaScript는 동작과 반응을 담당합니다.

✔ 실습: 버튼 클릭 시 문구가 바뀌는 웹페이지 만들기

아래 코드를 복사해서 메모장에 붙여넣고 button-test.html로 저장하세요.
브라우저에서 열면 버튼을 클릭했을 때 문장이 바뀌는 걸 확인할 수 있습니다!

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 기초 예제</title>
  <style>
    body { font-family: Arial; text-align: center; padding: 50px; }
    #text { font-size: 24px; margin-bottom: 20px; }
    button { padding: 10px 20px; font-size: 18px; cursor: pointer; }
  </style>
</head>
<body>
  <div id="text">안녕하세요!</div>
  <button onclick="changeText()">문구 바꾸기</button>

  <script>
    function changeText() {
      document.getElementById("text").innerText = "반갑습니다!";
    }
  </script>
</body>
</html>

✅ Tip: onclick="함수명()" 형식은 버튼을 눌렀을 때 JavaScript 함수를 실행하는 방식입니다.

✔ 코드 설명

코드	설명
`document.getElementById("text")`	HTML 요소 중 ID가 text인 부분을 선택합니다.
`.innerText = "반갑습니다!"`	선택된 부분의 내용을 바꿉니다.

이처럼 HTML 요소를 JavaScript로 제어하면, 동적인 웹페이지를 만들 수 있습니다!

✔ 추천 응용 예제

문구를 여러 개로 바꿔보기
랜덤 문장 출력하기
버튼 클릭 횟수 세기

let count = 0;
function countClick() {
  count++;
  document.getElementById("text").innerText = count + "번 클릭했어요!";
}

✔ 함께 보면 좋은 JavaScript 학습 자료

📌 작은 기능부터 시작해보세요

이처럼 JavaScript는 생각보다 쉽게 배울 수 있습니다.
단순한 문장 변경부터 시작해서 점점 더 인터랙티브한 웹페이지를 만들 수 있어요.
한 걸음씩 천천히 연습해보세요 😊

✔ 요약

JavaScript는 웹페이지를 동적으로 만들어주는 언어입니다.
버튼 클릭 이벤트를 통해 텍스트 변경이 가능합니다.
간단한 실습으로 자바스크립트 기초를 익힐 수 있습니다.

💬 JavaScript 기초 실습, 어렵지 않죠?
더 해보고 싶은 기능이 있다면 댓글로 남겨주세요. 다음 글에서 함께 만들어볼게요!

버튼 클릭하면 문구가 바뀌는 JavaScript 기초 배우기