Colin's Blog
[javascript] SweetAlert 사용 방법

SweetAlert는 JavaScript에서 사용할 수 있는 유용한 팝업 대화상자 라이브러리입니다. SweetAlert를 사용하면 사용자에게 더 나은 경험을 제공할 수 있습니다. 이번 블로그에서는 SweetAlert를 사용하는 방법을 알아보도록 하겠습니다.

SweetAlert 설치

먼저, SweetAlert를 사용하기 위해 제공되는 CDN 링크를 HTML 파일의 <head> 태그에 추가합니다.

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.1.6/dist/sweetalert2.min.css">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.1.6/dist/sweetalert2.all.min.js"></script>
</head>

위의 코드는 SweetAlert의 스타일시트와 JavaScript 파일을 포함시키는 코드입니다.

SweetAlert 사용 예제

이제 SweetAlert를 사용하여 팝업 대화상자를 표시해보겠습니다. 예를 들어, 사용자가 버튼을 클릭했을 때 SweetAlert를 사용하여 간단한 메시지를 표시하는 예제를 작성해보겠습니다.

const btn = document.getElementById('myButton');

btn.addEventListener('click', () => {
    Swal.fire({
        title: '알림',
        text: '버튼을 클릭했습니다!',
        icon: 'success',
        confirmButtonText: '확인'
    });
});

위의 코드에서는 Swal.fire() 함수를 사용하여 SweetAlert 팝업 대화상자를 생성합니다. title은 대화상자의 제목을, text는 대화상자에 표시할 텍스트를, icon은 대화상자에 표시할 아이콘을, confirmButtonText는 확인 버튼의 텍스트를 설정합니다.

SweetAlert 옵션

SweetAlert는 다양한 옵션을 제공합니다. 아래는 사용할 수 있는 몇 가지 기본 옵션입니다.

SweetAlert에는 더 많은 옵션이 있으니 공식 문서를 참조하시기 바랍니다.

결론

이번 포스트에서는 SweetAlert를 사용하는 방법에 대해 알아보았습니다. SweetAlert를 사용하면 사용자에게 더 흥미로운 경험을 제공할 수 있습니다. SweetAlert의 다양한 옵션을 활용하여 웹 애플리케이션에서 멋진 팝업 대화상자를 만들어보세요!

© 2018 Colin. All rights reserved.