HTML button 버튼 만들기

이 포스트에서는 HTML과 자바스크립트로 버튼 요소를 만드는 과정을 단계별로 알아보겠습니다.

다음의 실용적인 예제와 함께 시작해 보겠습니다.

Table of Contents

HTML로 버튼 만들기

자바스크립트를 만지기 전에 기본적인 HTML을 사용하여 간단히 만들어 보겠습니다.

HTML에서는 다음의 예제와 같이 <button> 태그를 사용하면 됩니다:

<button>Click me!</button>

위의 코드를 HTML 파일에 추가하고 웹 브라우저에서 열면 “Click me!”라는 텍스트가 있는 간단한 버튼 요소가 표시됩니다.

하지만 아직 기능은 추가되지 않았습니다. 여기에 기능을 넣으려면 자바스크립트를 사용해야 합니다.

자바스크립트로 기능 추가하기

HTML 요소에 기능을 추가하려면 자바스크립트를 사용해야 합니다.

먼저 script.js라는 새 파일을 만들고 HTML 파일에 연결해 보겠습니다.

다음과 같이 <script> 태그를 사용하여 자바스크립트 파일을 연결합니다:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript Button Example</title>
</head>

<body>
  <button>Click me!</button>

  <script src="script.js"></script>
</body>

</html>

이제 자바스크립트 파일이 HTML에 연결되었으므로 버튼 요소에 이벤트 리스너를 추가하여 기능을 추가할 수 있습니다.

이벤트 리스너는 클릭과 같은 특정 이벤트를 “listen” 하다가 이벤트가 발생하면 특정 작업을 수행하는 함수입니다.

이제 script.js 파일에 클릭 시 호출될 함수를 작성해 보겠습니다:

function onButtonClick() {
  alert('Button clicked!');
}

이 함수는 호출되면 alert 팝업에 “Button clicked!” 메시지를 출력합니다.

다음으로, 버튼 클릭 시 onButtonClick() 함수가 호출되도록 이벤트 리스너를 추가해야 합니다.

이를 위해 다음과 같이 querySelector() 메소드를 사용하여 요소를 선택합니다:

const button = document.querySelector('button');

이제 button 이라는 변수에 HTML 요소를 참조했습니다. 여기에 이벤트 리스너를 추가해야합니다.

addEventListener() 메소드는 두 개의 매개변수를 받는데, 첫 번째는 listen할 이벤트 타입(이 경우 click)이고 두 번째는 이벤트 발생 시 호출할 함수입니다.

script.js 파일의 전체 코드는 다음과 같습니다:

function onButtonClick() {
  alert('Button clicked!');
}

const button = document.querySelector('button');

button.addEventListener('click', onButtonClick);

이제 브라우저에서 HTML 파일을 열고 버튼 요소를 클릭하면 위와 같은 화면을 볼 수 있습니다.

자바스크립트만 사용하여 버튼 만들기

이전 예제에서는 HTML을 사용하여 요소를 만들고 자바스크립트를 사용하여 기능을 추가했습니다.

하지만 HTML을 사용하지 않고 자바스크립트만을 사용할 수도 있습니다.

이를 위해 지정된 타입의 새 요소를 만드는 createElement() 메소드를 사용합니다.

script.js 파일에 다음의 코드를 추가하여 새로운 요소를 페이지에 추가해 보겠습니다:

const newButton = document.createElement('button');

newButton.textContent = 'Click me!';

document.body.appendChild(newButton);

예제 코드의 각 줄의 기능은 다음과 같습니다:

document.createElement(‘button’) 으로 새로운 요소를 생성합니다.
textContent 속성을 사용하여 요소의 텍스트 내용을 “Click me!”로 설정합니다.
appendChild() 메소드를 사용하여 HTML document의 body에 요소를 추가합니다.

HTML 파일을 실행하면 두 개의 버튼 요소가 표시됩니다. 하지만 아직 두 번째 요소에는 기능이 추가되지 않았습니다.

앞의 예제와 마찬가지로 새롭게 추가한 요소에 이벤트 리스너를 추가해 보겠습니다:

newButton.addEventListener('click', () => {
  alert('New button clicked!');
});

script.js 파일의 전체 코드는 다음과 같습니다:

function onButtonClick() {
  alert('Button clicked!');
}

const button = document.querySelector('button');

button.addEventListener('click', onButtonClick);

const newButton = document.createElement('button');

newButton.textContent = 'Click me!';

document.body.appendChild(newButton);

newButton.addEventListener('click', () => {
  alert('New button clicked!');
});

이제 두 번째 요소를 클릭해도 팝업 메시지가 표시되는 것을 확인할 수 있습니다.

정리

이 포스트에서는 HTML과 자바스크립트를 모두 사용하여 버튼 요소를 만드는 방법을 알아봤습니다.

또한 이벤트 리스너를 사용하여 각 요소에 기능을 추가하는 방법을 알아보았습니다.

자바스크립트 튜토리얼

HTML로 버튼 만들기

자바스크립트로 기능 추가하기

자바스크립트만 사용하여 버튼 만들기

정리

관련 글