Next/css2 애니메이션 시간에 따라 CSS 속성이 자동으로 변하도록 만드는 것 transitionanimation트리거상태 변화 필요 (hover)자동 재생반복 xo제어단순 복잡용도버튼/호버로딩, 배경, 장식 1. @keyframes무엇이 어떻게 움직이는가@keyframes 이름 { 시점 { CSS 속성 }}@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transfrom: translateY(-20px); }} %는 전체 시간 기준from은 0% 에서, to는 100%예제에서는 시작과 끝은 원래 위치. 중간은 위로 20px 이동.2. animation얼마나, 어떻게 재생되는가animation: float 6s ease-in-out infinite;animati.. 2025. 12. 21. 폰트 적용하기 기본적으로 구글 폰트를 사용하려면 구글 폰트 api에 연결하면 된다. Selection Embed Code - Google Fonts Google FontsMaking the web more beautiful, fast, and open through great typographyfonts.google.com여기에 들어가서 원하는 폰트를 연결하면 된다..nanum-gothic-regular { font-family: "Nanum Gothic", sans-serif; font-weight: 400; font-style: normal;} 보통 이런 식으로 작성하라고 주어진다.하지만, Next.js에서는 폰트 작성 방법이 다른다.Tailwind CSS v4는 CSS 변수 기반으로 작동한다.그래서 --fo.. 2025. 12. 21. 이전 1 다음