강의 목표CSS Animation에 대해 학습하고 실습을 진행합니다. 강의 내용 정리강의시간에 학습한 내용을 정리합니다.  실습 - Tailwind 이동 애니메이션구현 팁애니메이션에 해당하는 svg코드를 찾기svg요소를 회전시킴회전은 tailwind spin animation을 사용내 접근방식 및 코드hero highlight 애니메이션의 구성부터 살펴봄 → 선으로 된 두개의 원이 시계/반시계로 회전하는 방식svg태그는 복붙하여 사용하고 컨테이너에 담은다음 애니메이션을 설정하기로 함HeroHighlightAnimation.tsxfunction HighlightImage() { return ( ..

강의 목표Tailwind CSS의 기초에 대해 학습하고 실습을 진행합니다. 강의 내용 정리강의시간에 학습한 내용을 정리합니다. 개발환경 세팅하기npx create-next-app@latest 추천 익스텐션Tailwind CSS IntelliSense 실습하기 - 그라디언트 아이콘그라디언트 아이콘(drop shadow는 제외) 태그를 이용하고 너비, 높이를 적당히 지정할 것원 형태로 만들 것background-image 속성을 이용해서 그라디언트를 처리내 코드export default function Home() { return ( {/* 그라디언트 실습코드 */} );}TailwindCSS > background-image > Linear..

강의 목표Tailwind CSS의 기초에 대해 학습하고 실습을 진행합니다. 강의 내용 정리강의시간에 학습한 내용을 정리합니다. TailwindCSS의 특징CSS 속성을 타이핑하지 않아도 된다.CSS 속성에 어떤 값을 사용할지 크게 고민하지 않아도 된다.CSS 클래스 이름을 짓느라 고민하지 않아도 된다.더 이상 사용하지 않는 CSS 클래스들을 정리하는데 시간을 쓰지 않아도 된다.→ 더 빨리 구현할 수 있고, 더 적은 시간으로 유지 보수할 수 있다. Utility First 접근법의 정의어떤 스타일을 구현할 때 유틸리티 클래스들을 최대한 이용해 구현한다.모든 CSS 들을 속성들에 대해서 유틸리티 클래스들이 촘촘하게 정의되어있다.웬만한 경우에는 이 유틸리티 클래스들을 조합하는 것 만으로도 원하는 스타일을 구현..