media queries 함수로 시작하기 맥스 너비가 400px 이하이면 켜짐 min-width and max-width 같이 주기 여러개 동시에 주기 아래처럼 하면 작동안됨 가장 밑에 것만 작동됨 아래처럼 해야 연속으로 작동 가로이면 작동 세로는 portrait 가로는 landscape min-device-width CSS media MDN @media @media CSS @규칙은 스타일 시트의 일부를 하나 이상의 미디어 쿼리 결과에 따라 적용할 때 사용할 수 있습니다. developer.mozilla.org @media print @media screen 은 화면용 @media print 는 출력용

keyframes 만들기(함수 만드듯이) img에 키프레임 넣어주기 infinite 3개 이상 넣기 rotate와 translate 추가 자연스럽게 되돌아오게 하기 5단계로 border-radius 추가 2단계일때는 from -to 3단계 이상일 때는 0% ~ 100% css 애니메이션 사이트 Animista Animista is a place where you can play with a collection of ready to use CSS animations, tweak them and download only those you will actually use. animista.net cf) opacity를 같이 사용하면 더 좋음

박스 모델을 원으로 만들기 border-radius: 50%; rotate 회전시키기 transform: rotateY("num"deg) 그밖의 transformation rotateY, rotateZ scaleX scaleY(12) scale(2, 2) = 2배 transflateX(-60px) skewY 3가지 동시에 쓰기 transformation은 박스 엘리먼트를 변형시키지 않는다. 응용 hover 일때 transition 추가 (root에 넣어야함, 여기에 root는 hover가 아니라, img) 복수로 이펙트 주기 더 많은 transform은 transform mdn 검색

transition 사용법 transition: (셀렉트) (걸리는 시간) (변화하는형태) 대부분 셀렉트는 all로 지정 복수개를 셀렉트할 때는 " , " 로 연결 all로 모든 것을 선택 border-radius, text-color, font-size 등에도 적용 가능 여러가지 애니메이션 애니메이션 체크 홈페이지 Ceaser - CSS Easing Animation Tool - Matthew Lein Choose an easing type and test it out with a few effects. If you don’t quite like the easing, grab a handle and fix it. When you’re happy, snag your code and off you go. ..