늘어나는 카드 효과

오늘부터 가장 기본이자 중요한 HTML, CSS, Vanilla JS 만을 사용하여 심플한 프로젝트를 시작한다.

오늘 프로젝트는 클릭시 확장되는 이미지 카드를 작업했다.

✔️ 체크

flex CSS 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성

flex: [flex-glow, flex-shrink, flex-basis]

flex-glow: flex-item요소가 flex-container요소 내부에서 할당 가능한 정도를 선언
flex-basis: flex-item요소의 초기 크기를 지정(flex-basis와 width중 flex-basis가 우선적용)

---

transition CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공
애니메이션이 가능한 속성

.hello {
  opacity: 1;
  transition: opacity 0.3s ease-in 0.5s; // 마지막 0.5는 딜레이를 의미한다.
}