소개
HTML <button> 요소는 웹 페이지에서 특정 작업을 수행하는 데 사용할 수 있는 버튼을 생성하는 데 사용됩니다. 이 튜토리얼에서는 HTML 을 사용하여 버튼을 만드는 방법을 배우겠습니다.
참고:
index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단 모서리에 있는 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
HTML 파일 생성
index.html이라는 HTML 파일을 생성합니다. 이 파일에서 기본적인 HTML 구조를 만들 것입니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Creating a Button in HTML</title>
</head>
<body></body>
</html>
버튼 생성
버튼을 생성하려면 HTML <button> 요소를 사용합니다. 버튼 요소의 여는 태그와 닫는 태그 사이에 텍스트, 이미지 또는 멀티미디어 콘텐츠를 추가할 수 있습니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Creating a Button in HTML</title>
</head>
<body>
<button>Click Me!</button>
</body>
</html>
onclick 속성 추가
버튼을 클릭했을 때 JavaScript 함수를 실행하기 위해 버튼 요소에 onclick 속성을 추가할 수 있습니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Creating a Button in HTML</title>
</head>
<body>
<button onclick="alert('Hello World!')">Click Me!</button>
</body>
</html>
CSS 스타일 추가
요구 사항에 따라 CSS 를 사용하여 버튼의 스타일을 지정할 수 있습니다. 여기서는 텍스트 색상, 배경 색상 및 버튼의 패딩을 변경하기 위해 몇 가지 기본적인 CSS 를 추가합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Creating a Button in HTML</title>
<style>
button {
background-color: #4caf50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<button onclick="alert('Hello World!')">Click Me!</button>
</body>
</html>
요약
이 튜토리얼에서는 HTML 을 사용하여 버튼을 만드는 방법을 배웠습니다. 또한 버튼 요소에 JavaScript 함수를 추가하고 버튼에 CSS 스타일을 적용하는 방법도 배웠습니다. 버튼 요소를 마스터하면 웹 페이지에서 작업을 수행하는 버튼을 쉽게 만들 수 있습니다.
