TIL - sweetalert 사용해보기

alert 창 커스텀 (sweetalert)

• 문제점: delete, update 기능 부분에서도 sweetalert 창을 구현하고 싶었다.
  → 기존에 구현하려던 코드에 합치려고 하니, sweetalert에 대한 내용 이해가 부족해서 잘 실행되지 않았는데, 오늘 오전에 성공했다.
  → 먼저 sweetalert 기능 중, 내용을 입력 받는 코드를 가져온다.

swal("내용을 입력하세요", {
  content: "input",
})
.then((value) => {
  swal(`입력한 내용은 ${value}`);
});

→ 이런 형태로 입력을 받아올 수 있는데, 입력 받아온 값이 value 이다.
→ 그 value 변수를 이용해서 다음 코드를 진행하면 된다.

swal("내용을 입력하세요", {
  content: "input",
})
.then((value) => {
  if (value == 비교할 값){
  	  // alert창 커스텀
      swal({
      	title: "성공",
        icon: "success",
        closeOnClickOutside: false
      }).then(function () {
        // 성공할 경우 실행할 코드
      });
  } else {
  	swal({
      	title: "실패",
        icon: "error",
        closeOnClickOutside: false
      }).then(function () {
        // 실패할 경우 실행할 코드
      });
  }
});

→ 이렇게 작성할 수 있다. 기존에 사용하면 alert 창보다 커스텀 된 형태로 나와서 보기가 좋다.
→ 출처: https://sweetalert.js.org/

div에 배경 이미지 넣기

• 문제점: 배경에 이미지를 넣고 배경 사이즈에 맞게 하고싶다.

div {
	backgroud-size : cover;
}