웹 개발에서 자주 사용하는 alert() 함수는 브라우저가 기본으로 제공하는 UI이기 때문에 배경색, 글자색, 폰트 등의 스타일을 변경할 수 없습니다. 따라서 경고창(alert box)의 색상을 바꾸고 싶다면 HTML과 CSS로 구성된 커스텀 경고창을 직접 만들어야 합니다.
아래 예제에서는 자바스크립트 라이브러리인 jQuery를 활용해 커스텀 경고창을 구현하고, CSS를 통해 보라색 계열의 배경(#8416f9)과 노란색 텍스트(#FCD116)로 원하는 디자인을 적용하는 방법을 살펴보겠습니다.
커스텀 경고창 구현 예제
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
function functionAlert(msg, myYes) {
var confirmBox = $("#confirm");
confirmBox.find(".message").text(msg);
confirmBox.find(".yes").unbind().click(function() {
confirmBox.hide();
});
confirmBox.find(".yes").click(myYes);
confirmBox.show();
}
</script>
<style>
#confirm {
display: none;
background-color: #8416f9;
color: #FCD116;
border: 1px solid #aaa;
position: fixed;
width: 250px;
left: 50%;
margin-left: -100px;
padding: 6px 8px 8px;
box-sizing: border-box;
text-align: center;
}
#confirm button {
background-color: #48E5DA;
display: inline-block;
border-radius: 5px;
border: 1px solid #aaa;
padding: 5px;
text-align: center;
width: 80px;
cursor: pointer;
}
#confirm .message {
text-align: left;
}
</style>
</head>
<body>
<div id="confirm">
<div class="message">This is a warning message.</div>
<button class="yes">OK</button>
</div>
<input type="button" value="Click Me" onclick="functionAlert();" />
</body>
</html>코드 동작 원리
- functionAlert(msg, myYes) – 표시할 메시지와 확인 버튼 클릭 시 실행할 콜백 함수를 인자로 받아 유연하게 재사용할 수 있습니다.
- #confirm 스타일 – 평소에는
display: none;으로 숨겨져 있다가,show()가 호출되면 화면에 나타납니다.background-color와color속성만 수정하면 원하는 색상으로 즉시 변경할 수 있습니다. - .yes 버튼 처리 –
unbind()로 기존에 등록된 이벤트를 제거한 뒤 새 이벤트를 연결하여, 여러 번 호출해도 이벤트가 중복 실행되지 않도록 합니다. - 화면 중앙 정렬 –
position: fixed;와left: 50%;, 음수margin-left값을 조합해 경고창을 화면 중앙에 고정시킵니다.
마무리
이처럼 기본 alert() 대신 커스텀 모달을 사용하면 색상뿐 아니라 폰트, 크기, 그림자, 애니메이션 효과까지 자유롭게 조절할 수 있습니다. 더 다양한 디자인이 필요하다면 CSS 변수를 활용하거나 SweetAlert2, Bootstrap Modal 같은 검증된 라이브러리를 도입하는 것도 좋은 선택입니다.