[javascript] SweetAlert의 버튼 색상 설정 옵션

24 Nov 2023

javascript

SweetAlert은 사용자에게 예쁘게 디자인된 경고창을 표시하는 데 사용되는 인기있는 JavaScript 라이브러리입니다. SweetAlert의 버튼은 기본적으로 파란색입니다. 그러나 사용자 정의 버튼 색상을 적용하고 싶다면 어떻게 해야 할까요? 이번 블로그 포스트에서는 SweetAlert의 버튼 색상을 설정하는 옵션에 대해 알아보겠습니다.

`buttonColor` 옵션

SweetAlert에는 buttonColor라는 옵션이 존재합니다. 이 옵션을 사용하면 버튼의 색상을 원하는 색상으로 지정할 수 있습니다. buttonColor 옵션을 사용하려면 SweetAlert 함수를 호출할 때 객체의 buttonColor 속성을 설정하면 됩니다.

다음은 SweetAlert을 사용하여 버튼 색상을 설정하는 예제입니다:

Swal.fire({
  title: '알림',
  text: '버튼 색상을 설정합니다',
  icon: 'info',
  buttonColor: '#FF0000'  // 원하는 색상 코드 입력
});

위의 예제에서는 버튼의 색상을 빨간색(#FF0000)으로 설정하고 있습니다. SweetAlert에서 icon 옵션은 알림창에 표시되는 아이콘을 설정하는 데 사용되며, 여기서는 정보(info) 아이콘을 사용하고 있습니다.

커스텀 CSS 사용

또 다른 방법으로 SweetAlert의 버튼 색상을 설정하는 방법은 커스텀 CSS를 사용하는 것입니다. SweetAlert의 버튼은 swal-button 클래스로 식별됩니다. 따라서 swal-button 클래스에 원하는 색상을 설정하는 CSS 코드를 추가하면 됩니다.

다음은 커스텀 CSS를 사용하여 SweetAlert 버튼 색상을 설정하는 예제입니다:

<style>
.swal-button {
  background-color: #FF0000;
  color: #FFFFFF;
}
</style>

<script>
Swal.fire({
  title: '알림',
  text: '버튼 색상을 설정합니다',
  icon: 'info'
});
</script>

위의 예제에서는 swal-button 클래스에 대한 배경색과 글자색을 설정하여 버튼의 색상을 빨간색으로 변경하고 있습니다.

결론

SweetAlert의 버튼 색상을 설정하는 방법에 대해 알아보았습니다. buttonColor 옵션을 사용하거나 커스텀 CSS를 사용하여 버튼의 색상을 원하는 색상으로 변경할 수 있습니다. 이러한 설정을 통해 SweetAlert을 더욱 예쁘게 디자인할 수 있습니다.

더 많은 SweetAlert 옵션 및 사용법에 대해서는 SweetAlert 공식 문서를 참조하세요.

SweetAlert 공식 문서: https://sweetalert.js.org/

buttonColor 옵션

커스텀 CSS 사용

결론

`buttonColor` 옵션