귀하는 로그인되어 있지 않습니다. 이대로 편집하면 귀하의 IP 주소가 편집 기록에 남게 됩니다.스팸 방지 검사입니다. 이것을 입력하지 마세요!== 개요 == SweetAlert2는 JavaScript로 만들어진 팝업 박스 대체 라이브러리입니다. 사용자 친화적인 디자인과 반응성을 갖추고 있으며, 사용자가 쉽게 커스터마이징 할 수 있습니다. WAI-ARIA를 준수하여 접근성이 좋으며, 별도의 의존성이 없습니다. == 설치 방법 == === NPM을 통한 설치 === <syntaxhighlight lang='bash'> npm install sweetalert2 </syntaxhighlight> === CDN을 통한 설치 === HTML 파일 내에 다음 코드를 추가하면 CDN을 통해 SweetAlert2를 사용할 수 있습니다. <syntaxhighlight lang='html'> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> </syntaxhighlight> == 사용법 == === 기본 사용법 === JavaScript 코드 내에서 다음과 같이 사용할 수 있습니다. <syntaxhighlight lang='javascript'> Swal.fire('안녕하세요!') </syntaxhighlight> === 옵션 사용 예제 === <syntaxhighlight lang='javascript'> Swal.fire({ title: '에러!', text: '무언가 잘못되었어요!', icon: 'error', confirmButtonText: '확인' }) </syntaxhighlight> === 이미지와 함께 사용 === <syntaxhighlight lang='javascript'> Swal.fire({ title: 'Sweet!', text: 'Modal with a custom image.', imageUrl: 'https://example.com/image.png', imageWidth: 400, imageHeight: 200, imageAlt: 'Custom image' }) </syntaxhighlight> === 타이머 사용 === <syntaxhighlight lang='javascript'> let timerInterval Swal.fire({ title: '자동으로 닫혀요!', html: 'I will close in <b></b> milliseconds.', timer: 2000, timerProgressBar: true, willOpen: () => { Swal.showLoading() timerInterval = setInterval(() => { const content = Swal.getHtmlContainer() if (content) { const b = content.querySelector('b') if (b) { b.textContent = Swal.getTimerLeft() } } }, 100) }, willClose: () => { clearInterval(timerInterval) } }).then((result) => { if (result.dismiss === Swal.DismissReason.timer) { console.log('I was closed by the timer') } }) </syntaxhighlight> === 체인 팝업 === <syntaxhighlight lang='javascript'> Swal.mixin({ input: 'text', confirmButtonText: '다음 →', showCancelButton: true, progressSteps: ['1', '2', '3'] }).queue([ { title: '질문 1', text: '첫 번째 질문' }, '두 번째 질문', '세 번째 질문' ]).then((result) => { if (result.value) { const answers = JSON.stringify(result.value) Swal.fire({ title: '완료!', html: '답변: <pre><code>' + answers + '</code></pre>', confirmButtonText: '멋져!' }) } }) </syntaxhighlight> == 사용 가능한 아이콘 == * <code>success</code> * <code>error</code> * <code>warning</code> * <code>info</code> * <code>question</code> == 주의 사항 == 특정 도메인<ref> <code>.ru</code>, <code>.su</code>, <code>.by</code>, <code>.рф</code></ref><ref>[[러시아-우크라이나 전쟁]]의 영향으로 러시아 관련 도메인에 사용 시 정상 작동이 안된다.</ref>에서 사용 시 주의가 필요하다. 해당 도메인에서 사용하면 웹사이트 탐색이 차단되고 우크라이나의 국가가 재생된다. == 라이선스 == MIT 라이선스를 사용중이다. == 유사 라이브러리 == * [https://getbootstrap.com/docs/5.0/components/modal Bootstrap Modal] * [https://jqueryui.com/dialog jQuery UI Dialog] * [http://github.hubspot.com/vex/docs/welcome Vex] * [https://izimodal.marcelodolza.com iziModal] == 외부 링크 == * {{깃허브/저장소|sweetalert2|sweetalert2}} * {{공식 홈페이지|https://sweetalert2.github.io}} == 각주 == <!--분류--> [[분류:자바스크립트 라이브러리]] [[분류:웹 개발]] 편집 요약 가온 위키에서의 모든 기여는 크리에이티브 커먼즈 저작자표시-동일조건변경허락 라이선스로 배포된다는 점을 유의해 주세요(자세한 내용에 대해서는 가온 위키:저작권 문서를 읽어주세요). 만약 여기에 동의하지 않는다면 문서를 저장하지 말아 주세요. 또한, 직접 작성했거나 퍼블릭 도메인과 같은 자유 문서에서 가져왔다는 것을 보증해야 합니다. 저작권이 있는 내용을 허가 없이 저장하지 마세요! 취소 편집 도움말 (새 창에서 열림) 이 문서에서 사용한 틀: 틀:공식 홈페이지 (편집) 틀:깃허브/저장소 (편집)