2일차

코멘트 삭제 기능 추가

단, 자신이 쓴 코멘트에 해당하는 글만 삭제가 가능 하도록 구현.

비밀번호를 입력시키고 코멘트 DB 저장 시 같이 저장시킴

pwd = prompt();
=> alert()과 비슷한 형식으로 상단에 input 가능한 창이 뜸

POST 과정을 통해 값을 넘겨줌
formData.append('cmtpwd_give', pwd)

이후 app.py에서
doc{}안에 추가하여 DB에 저장

삭제 버튼 클릭 시 마찬가지로 비밀번호 동일 여부를 확인 한 후 코멘트 삭제.

---

hover와 transition기능 추가

타이틀 배너에 마우스 오버 시, 다른 이미지가 보이도록 구현

.mytitle {
            width: 100%;
            height: 250px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('url주소');
            background-position: center;
            background-size: cover;

            color: white;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            transition: all 750ms linear;
        }
.mytitle:hover {
            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('바꿀url주소');
        }

위 경우, 이미지 자체는 hover 시에 변화하지만
background-image에서 linear-gradient을 사용할 경우 해당 이미지는 transition이 작동하지 않음.

해결 방법으로 mytitle 배너 밑에 바꿀 이미지를 미리 추가하고 투명도를 transition을 통하여 조정

.bmytitle {
            width: 100%;
            height: 250px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('바꿀이미지url');
            background-position: center;
            background-size: cover;

            color: white;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }


        .mytitle {
            width: 100%;
            height: 250px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('기존이미지url');
            background-position: center;
            background-size: cover;

            color: white;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            transition: all 750ms linear;
            opacity: 1;
        }

        .mytitle:hover {
            opacity: 0;
        }

이러면 hover 시에 transition 값에 따라서 opacity값이 1->0으로 linear 방식으로 750ms에 거쳐서 변화.

즉 뒤에 있던 bmytitle이미지가 드러남.

---

메모)

.a는 x축과 y의 해당 값의 거리만큼 이동
.b는 x축은 고정 y축만 150px 이동

.a{
	transform: translate(100px, 150px);
}

.b{
	transform: translateX(150px);
}

.a의 각도가 60도만큼 회전

.a{
	transform: rotate(60deg);
}

모든 변화에 대해서 linear값으로 750ms에 거쳐서 변화

.a{
	transition: all 750ms linear;
}

사용 가능한 변화 목록
ease
linear
ease-in
ease-out
ease-in-out
step-start
step-end