HTML CSS (30) 썸네일형 리스트형 클론코딩5 main ㅇㅋ 여기까지 완성 클론 코딩 4 main 이거 만들어봅시다 일단 태그들은 완성 클론 코딩3 nav https://fonts.google.com/?subset=korean¬o.script=Kore 구글 폰트를 쓰자 클론코딩2 nav https://palettes.shecodes.io/ Coding Workshops for WomenSheCodes teaches coding skills to women.www.shecodes.iocss 색깔 고르는 사이트 https://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSSCSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this wa.. 클론코딩1 nav 이것부터 만들어보자 일단 css 적용하기전 상황이다 알아두면 좋은 내용 CSS 요소에 에니메이션 효과 주기 2가지 방법이 있다고함 아무런 이벤트를 주지 않아도 요소가 지정시간 만큼 애니메이션이 이루어 지게 됨 이것도 잘 안쓸거 같은데 .. 0 에서 300픽셀 만큼 움직여라~~그리고 컨테이너에 이름 몇초 어떤 스피드로 할것인지 오른쪽으로 300px 움직여지는거 확인함 계속 반복하고 싶으면시간 함수 뒤에 infinite 쓰면 됨 무한의 이런 뜻인가봄 animation: my-animation 3s ease-in-out infinite; 계속 움직여지는거 확인 근데 애니매이션이끝나면 즉각 바로 돌아가서 다시 시작하는게 마음에 안든다고함 (난 괜찮은데...) 이렇게 바꿔주면 왓다리 갓다리 하는거 확인 함쓸려나.. 안쓸거 같은데 이건 여기로 바뀜 다음은 홈페이지 만들어보자!.. CSS transform 주로 애니메이션 효과를 위해 사용함이것도 쓸까.. 내가.. 코드 정리좀 하고 만들었다 transform: translateX(400px); 오 오른쪽으로 400px 이동함 transform: translateY(400px); 밑으로 이동되는거 확인함 그럼 XY 한번에 줄수도 있겠네 transform: translate(400px, 400px); scale 을 쓰게 되면 요소 자체를 키울수 있음 transform: scale(2); 커졌다 0.5도 소수점도 가능하다고함 scaleX 를 스면 엑스 축 길이가 0.5 배가됨 transform: .. CSS 트랜지션 무언가를 변화하는데 시간을줄수 있는 기능 일단 코드 정리좀 하고 span 태그에다가 transition을 적어줌 결과는? 여기서 3초 뒤에 이렇게 바뀌는걸 알수 있다최초의 css 상태에서 transition 을 적어줌 변화하는 모든 요소에다가 적어줄려면 all 적으면 된다고 함 똑같이 변하는걸 확인함 중요한것은 변화하는 부분에다가 트렌지션을 적는게 아닌 변화하기전 상태 즉 아무런 상태가 없는 요소에다가 적어줌 그럼 ease in out 이건 뭐냐https://cubic-bezier.com/#.17,.67,.83,.67 cubic-bezier.com cubic-bezier.com여기 보면 알수 있다 트렌지션 타이밍펑션이라고 해서 속도변화를 어떻게 할것이 결정하게 해줌 복사해서붙여넣어서 되는거.. 이전 1 2 3 4 다음
