SweetAlert는 사용자 친화적인 경고 및 확인 창을 구현하기 위한 JavaScript 라이브러리입니다. SweetAlert를 사용하여 간편하고 다양한 스타일의 확인 창을 생성할 수 있습니다.

SweetAlert 라이브러리 추가

SweetAlert를 사용하려면 우선 SweetAlert 라이브러리를 HTML 페이지에 추가해야 합니다. 다음의 스크립트 태그를 HTML 파일에 추가하면 됩니다.

<script src="https://cdn.jsdelivr.net/npm/sweetalert@2"></script>

SweetAlert을 사용하여 확인 창 만들기

SweetAlert를 사용하면 아래와 같이 간단한 코드로 확인 창을 생성할 수 있습니다.

Swal.fire({
  title: '알림',
  text: '이 작업을 진행하시겠습니까?',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: '확인',
  cancelButtonText: '취소',
}).then((result) => {
  if (result.value) {
    // 확인 버튼이 클릭된 경우 처리할 로직 작성
  }
});

위의 코드는 SweetAlert로 경고 아이콘이 포함된 확인 창을 생성하며, 사용자가 “확인”을 클릭하면 처리할 로직을 작성할 수 있습니다.

SweetAlert 확인 창 스타일 수정

SweetAlert의 확인 창은 다양한 스타일을 적용할 수 있습니다. 예를 들어, icon 속성을 변경하여 아이콘 스타일을 변경할 수 있습니다.

Swal.fire({
  title: '알림',
  text: '이 작업을 진행하시겠습니까?',
  icon: 'success', // 성공 아이콘으로 변경
  showCancelButton: true,
  confirmButtonText: '확인',
  cancelButtonText: '취소',
}).then((result) => {
  if (result.value) {
    // 확인 버튼이 클릭된 경우 처리할 로직 작성
  }
});

SweetAlert의 다양한 사용법과 스타일은 공식 문서를 참고하시기 바랍니다.

SweetAlert를 사용하면 사용자 친화적인 확인 창을 간단하게 구현할 수 있습니다. 다양한 스타일을 적용하여 사용자 경험을 개선할 수 있습니다.