HTML onclick 속성은 사용자가 HTML 문서 내의 특정 요소를 마우스로 클릭했을 때 지정된 스크립트(주로 JavaScript 코드)를 실행하는 이벤트 속성입니다. 버튼, 이미지, 텍스트 등 거의 모든 HTML 요소에 적용할 수 있으며, 웹 페이지에서 클릭 기반 인터랙션을 구현할 때 가장 널리 사용되는 이벤트 핸들러 중 하나입니다.
구문(Syntax)
onclick 속성의 기본적인 작성 방법은 다음과 같습니다.
<tagname onclick="script"></tagname>
속성값에는 클릭 시 실행할 JavaScript 코드를 문자열 형태로 지정합니다. 일반적으로 미리 정의해 둔 함수를 호출하는 방식으로 사용합니다.
예제
다음은 onclick 이벤트 속성을 활용한 실전 예제입니다. 버튼을 클릭하면 화면에 메시지가 표시되도록 구현했습니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
color: #000;
height: 100vh;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
text-align: center;
padding: 20px;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
.show {
font-size: 1.2rem;
}
</style>
</head>
<body>
<h1>HTML onclick Event Attribute Demo</h1>
<button class="btn" onclick='clickFn()'>Click me</button>
<div class="show"></div>
<script>
function clickFn() {
var msg = document.querySelector('.show');
msg.innerHTML = "";
msg.innerHTML = "Hey! you clicked me";
}
</script>
</body>
</html>
코드 설명
- <button> 요소: onclick='clickFn()' 속성을 지정하여, 버튼을 클릭하면 clickFn() 함수가 자동으로 호출됩니다.
- clickFn() 함수: document.querySelector('.show')로 메시지를 표시할 영역을 선택한 뒤, innerHTML 속성을 이용해 클릭 안내 문구를 출력합니다.
- .btn / .show 클래스: CSS를 통해 버튼과 메시지 영역의 디자인을 각각 정의하고 있습니다.
출력 결과
페이지가 처음 로드되면 아래와 같은 초기 화면이 나타납니다.
여기서 "Click me" 버튼을 클릭하면 마우스 클릭 이벤트가 발생하고, 다음과 같이 메시지가 화면에 표시됩니다.
참고 사항
위 예제처럼 HTML 태그 안에 직접 이벤트를 작성하는 인라인 방식은 간단하지만, 규모가 커질수록 코드 관리가 어려워질 수 있습니다. 실무에서는 addEventListener('click', 함수) 방식을 함께 활용하면 HTML과 JavaScript를 분리해 유지보수성을 높일 수 있습니다.