[SweetAlert] alert 창을 예쁘게

기존의 딱딱한 alert창을 예쁘게 바꿔서 사용해보기로 했다.

 

원래 사용법

SweetAlert2

 

원래 사용법대로 하다가 파일 불러오는? 것 부터 잘안되서 아래 사용법 정리를 참고하여 적용

[JAVASCRIPT] SweetAlert2 사용 방법(alert 창 꾸미기)

 

html에 다음 코드를 넣으면 바로 적용된다.

버전이 현재 것 하고 다른 것 같은데 안바꿔도 만족이라서 그냥 진행했다.

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>

 

사용법을 살펴보면 알겠지만 예시로 이렇게 나와있었다.

Swal.fire({
  title: 'Error!',
  text: 'Do you want to continue',
  icon: 'error',
  width: 650, // 추가로 입력한 옵션
  confirmButtonText: 'Cool'
})

해당 항목들을 원하는 대로 바꿔주면 된다.

(옵션은 홈페이지에서 확인)

 

 

alert창을 이용해서 햄버거의 정보를 출력해봤다.