오늘부터 가장 기본이자 중요한 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는 딜레이를 의미한다.
}