[javascript] SweetAlert의 화면 가운데 정렬 기능

24 Nov 2023

SweetAlert은 사용자에게 더 나은 경험을 제공하기 위해 만들어진 JavaScript 팝업 창 라이브러리입니다. SweetAlert을 사용하면 더욱 효과적이고 사용자 친화적인 팝업 창을 만들 수 있습니다.

흔히 SweetAlert을 사용할 때 팝업 창을 화면 가운데에 정렬하고 싶은 경우가 있습니다. 이를 위해 SweetAlert 라이브러리는 몇 가지 기능을 제공합니다.

1. SweetAlert2의 경우

SweetAlert2는 SweetAlert의 업그레이드 버전으로, 더욱 강력하고 다양한 기능을 제공합니다. 이 라이브러리를 사용하여 팝업 창을 화면 가운데에 정렬하기 위해서는 다음과 같이 코드를 작성할 수 있습니다.

Swal.fire({
  title: '제목',
  text: '내용',
  position: 'center',
});

position 옵션을 ‘center’로 설정하면 팝업 창이 화면 가운데에 정렬됩니다.

SweetAlert의 경우는 조금 다른 방식으로 화면 가운데 정렬 기능을 구현할 수 있습니다. 아래와 같은 코드를 사용하면 됩니다.

swal({
  title: '제목',
  text: '내용',
  customClass: 'sweet-center',
});

위의 코드에서 customClass 속성에 ‘sweet-center’라는 클래스를 추가하고, 해당 클래스에 CSS 스타일을 작성함으로써 팝업 창을 가운데 정렬할 수 있습니다.

.sweet-center {
  margin-top: -150px !important;
}

CSS에서 margin-top 속성을 사용하여 팝업 창을 위로 이동시켜 화면 가운데로 정렬합니다. 이 때, margin-top 값을 팝업 창의 높이의 절반인 ‘-150px’로 설정해야 합니다.

SweetAlert의 경우에는 SweetAlert2와는 다른 방식으로 화면 가운데 정렬을 구현할 수 있지만, 비슷한 결과를 얻을 수 있습니다.

위의 코드를 사용하여 SweetAlert 팝업 창을 화면 가운데에 정렬할 수 있습니다. SweetAlert의 다양한 기능을 활용하여 사용자에게 멋진 경험을 제공해보세요!