반응형
HTML 버튼 구성 방법과 클릭 구현 방법
기본 버튼 태그 작성부터 클릭 이벤트 처리까지 한눈에 이해하는 실전 가이드
버튼 태그 구성 방법
HTML에서는 <button> 태그를 이용해 간단하게 버튼을 만들 수 있습니다. 버튼의 용도에 따라 type="button", type="submit" 등을 설정할 수 있습니다.
기본 버튼 예시: <button type="button">클릭하세요</button>
버튼 디자인 스타일링
버튼은 CSS를 이용해 디자인을 자유롭게 변경할 수 있습니다. 배경색, 텍스트 색상, 패딩 등 다양한 요소를 적용하여 사용자에게 직관적인 인터페이스를 제공합니다.
CSS 스타일 예시:
button { background-color: #3498db; color: white; border: none; padding: 0.8rem 1.2rem; border-radius: 4px; cursor: pointer; font-size: 1rem; transition: background 0.3s ease; }
button:hover { background-color: #2980b9; } 클릭 이벤트 구성 방법
JavaScript를 통해 버튼 클릭 시 원하는 기능을 구현할 수 있습니다. addEventListener 메서드를 사용하여 클릭 이벤트를 쉽게 처리할 수 있습니다.
클릭 이벤트 예시:
<button id="myButton">클릭하세요</button> document.getElementById('myButton').addEventListener('click', function() { alert('버튼이 클릭되었습니다!'); });
반응형