@2023/10/05 안녕하세요 lika-7입니다이번시간에는 flex-shrink와 flex-grow에 대해 설명하겠습니다 flex-shrink란flex-shrink는 CSS Flexbox 레이아웃에서 사용되는 속성 중 하나로, 플렉스 아이템(flex item)이 부모 컨테이너 내에서 축소(Shrink)될 수 있는 정도를 지정합니다. 이 속성은 플렉스 컨테이너(flex container) 내에서 공간 부족 시 어떻게 아이템들을 축소시킬지를 제어하는 데 사용됩니다.코드.flex-container { display: flex; } .flex-item { flex-shrink: 2; /* 아이템은 다른 아이템보다 2배로 많이 축소됨 */ }이렇게 설정된 아이템은 부모 컨테이너의 공간이 부족할 때 더 많이 축소..

@2023/10/04 안녕하세요 lika-7입니다이번시간에는 로딩 애니메이션을 만들겠습니다코드.the-loader{ width: 30px; height: 30px; margin: 30px auto; border: 4px solid red; border-top-color: transparent; border-radius: 50%; animation: loader 1s infinite linear; } @keyframes loader{ 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} }css로 border 속성으로 정사각형을 그림정사각형의 top은 투명 처리border-radius로 정사각형을 원으로 만듬@keyframes 로 시간 진행률을 ..