코딩/Java Script
SweetAlert2 이용하여 HTML alert 창 꾸미기
코딩왕 코주부
2022. 2. 19. 15:11
반응형
안녕하세요 코봉이입니다.
javascript 를 사용하여 alert 창을 띄우면 기본 style이 아래와 같이 심심한 모양이죠.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
alert("hello")
</script>
</body>
</html>
하지만, SweetAlert2.js를 연결하여 이용하면 더욱 더 예쁜 alert 창을 만날 수 있습니다.
아래 코드를 이용하면 위 캡쳐 사진처럼 Style이 더 예쁜 alert 창을 만나볼 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>
<body>
<script>
Swal.fire(
'alert 창 테스트!',
'이 style 마음에 드시나요?',
'warning'
)
</script>
</body>
</html>
추가 사용 방법에 대한 설명이나 예제는 아래 SweetAlert2 공식 홈페이지를 참고하시기 바랍니다.
반응형