브라우저에서 기본으로 제공되는 alert() 함수는 운영체제와 브라우저가 직접 렌더링하는 네이티브 다이얼로그이기 때문에, CSS나 JavaScript로 버튼의 색상·크기·폰트 등을 변경할 수 없습니다.
알림창의 디자인을 마음대로 꾸미고 싶다면 커스텀 알림창(사용자 정의 alert 박스)을 직접 만들어야 합니다. HTML과 CSS로 알림창 UI를 구성하고, jQuery 또는 순수 JavaScript로 표시·숨김 동작을 제어하면 원하는 스타일을 자유롭게 적용할 수 있습니다.
커스텀 알림창 구현 예제
아래 예제는 jQuery를 활용하여 검은 배경에 노란색 텍스트가 들어간 알림창과, 흰색 둥근 모서리의 세련된 확인 버튼을 구현한 코드입니다.
<!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: #000000;
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: #FFFFFF;
display: inline-block;
border-radius: 12px;
border: 4px solid #aaa;
padding: 5px;
text-align: center;
width: 60px;
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()를 통해 화면 중앙에 나타납니다.
- .yes 버튼: unbind()로 기존에 등록된 이벤트를 모두 제거한 뒤 새 클릭 이벤트를 연결하여, 알림창을 닫고 지정된 콜백을 실행합니다.
디자인 커스터마이징 팁
CSS에서 border-radius, background-color, padding 값만 조절해도 버튼과 알림창의 느낌이 크게 달라집니다. 그림자 효과(box-shadow)나 부드러운 전환 애니메이션(transition)을 추가하면 더욱 완성도 높은 UI를 만들 수 있습니다.
여러 페이지에서 반복적으로 사용할 계획이라면 이 알림창을 재사용 가능한 모달 컴포넌트로 분리하거나, SweetAlert2처럼 스타일링이 잘 갖춰진 전용 알림 라이브러리를 도입하는 것도 좋은 선택입니다.