CSS 버튼 그림자 애니메이션 예제
3번째 버튼에 마우스를 올렸을 때 부드럽게 그림자가 진해진다. .navigation { display: grid; grid-template-columns: repeat(4, 1fr); } .item { border-radius: 50%; box-shadow: 0 10px 35px rgba(0, 0, 0, 0.05), 0 6px 6px rgba(0, 0, 0, 0.1); display: flex; height: 50px; width: 50px; cursor: pointer; /* 마우스 포인터를 올렸을 때 손가락으로 바뀜 */ transition: box-shadow 0.1s linear; } .item:hover { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 6px..
CSS 그리드 안의 배경 사진 예제
body { /* 모바일 기본 설정 */ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } .grid { overflow: scroll; display: grid; /* 반응형 */ grid-auto-columns: minmax(200px, 1fr); grid-auto-flow: column; gap: 20px; } .food { height: 150px; border-radius: 10px; } .food:first-child { /* 그라데이션으로 명암을 조절 */ background-image: lin..
