HTML의 window alert() 메서드는 HTML 문서에서 지정한 메시지와 확인(OK) 버튼이 함께 표시되는 알림 창(Alert Box)을 띄우는 데 사용됩니다. 사용자에게 중요한 정보를 전달하거나 간단한 안내 메시지를 보여줄 때 유용하게 활용할 수 있습니다.
문법(Syntax)
alert() 메서드의 기본 문법은 다음과 같습니다.
alert(“메시지”);
괄호 안에 전달된 문자열이 알림 창에 그대로 표시되며, 사용자가 확인 버튼을 누를 때까지 창이 유지됩니다.
예제(Example)
다음은 HTML window alert() 메서드를 활용한 예제입니다. 버튼을 클릭하면 알림 창이 나타나도록 구성했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
height: 100vh;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
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;
}
</style>
</head>
<body>
<h1>HTML Window alert() Method</h1>
<button class='btn' onclick="add()">Click me to open an alert box</button>
<script>
function add() {
alert("Hello! I'm an alert box");
}
</script>
</body>
</html>출력 결과(Output)
위 코드를 실행하면 그라데이션 배경 화면과 함께 버튼이 표시됩니다.
“Click me to open an alert box” 버튼을 클릭하면 아래와 같이 알림 창이 열립니다.
참고로 alert() 메서드는 브라우저마다 표시되는 디자인이 조금씩 다를 수 있으며, 모달(Modal) 방식으로 동작하기 때문에 사용자가 확인 버튼을 누르기 전까지는 페이지의 다른 작업이 일시적으로 차단된다는 점을 기억해 두면 좋습니다.