[Dev_Log] 8/15 (일) 김정빈

## 오늘의 프로젝트에서 배운 점은 무엇인가요?

- **튜닝의 끝은 순정이더라**

error modal창, 혹은 알림창을 좀더 이쁘게 구현하고 싶어서 많은 시도를 해봤다.
그러나 결국 화려한 이펙트보다 딱 수수한 효과가 제일 좋은 것을 다시한번 느꼈고, 아래와 같은 코드를 작성했다.
그리고 여러 UX좋은 페이지를 찾아보며 일요일을 보냈다.

### code

```css
.modal-background {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
width: 100%;
height: 100vh;
background-color: rgba(2, 7, 21, 0.6);
animation: fadeIn 0.5s;
}

.modal-box {
max-width: 500px;
width: 50%;
height: 300px;
border-radius: 3px;
background-color: white;
box-shadow: 2px 4px 8px rgba(2, 7, 21, 0.3);
animation: scaleUp 0.5s;
}

@keyframes scaleUp {
0% {
/* 모달 콘텐츠를 하단에 위치시킴 */
transform: scale(0.8) translateY(50px);
opacity: 0;
}
100% {
/* 모달 콘텐츠를 본래 위치로 돌려놓음 */
transform: scale(1) translateY(0);
opacity: 1;
}
}

@keyframes fadeIn {
0% {
background: transparent;
}
100% {
background: rgba(2, 7, 21, 0.6);
}
}

```