이 포스팅은 PC로 작성되었습니다.
모바일로 보시는 분들에게는 가끔
줄 바꿈이 어색하게 보일 수 있습니다.
지난 포스트
CSS 트랜스폼 중심축 바꾸기
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 트랜스폼 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들
gogogameboy.tistory.com
오늘 공부할 내용은 트랜지션 transition입니다.
생뚱맞게 이미 이전의 생활코딩 CSS 강의 영상에서 3번이나 등장했던 transition이 이제서야 나오네요.
복습하는 마음으로 다시 공부해보겠습니다.
transition
위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.
transform의 효과는 엘리먼트의 display가 block이거나 inline-block일 때만 작동하기 때문에 display: inline-block; 을 넣어줍니다.
transition-property: all;
transition-duration: 0.3s; 이라는 긴 코드 대신에 축약해서 transition: all 0.3s; 라고 쓸 수도 있습니다.
지금까지 사용했던 a:hover{ } 는 마우스 커서를 올려놓았을 때에 반응하지만, a:active{ } 는 클릭을 해야 반응합니다.
transform의 효과 중에서 translate는 이동을 하는 효과입니다.
X축과 Y축으로 각각 20px씩 이동하기 위해서 transform: translate(20px, 20px); 라고 넣었습니다.
다음 포스트
CSS 트랜지션으로 좀 더 역동적이고 고급스러운 느낌 주기
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 gogogameboy.tistory.com/109 지난 포스트에 이어서 이번에도 트랜지션의 다른
gogogameboy.tistory.com
이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서
빨간 하트♥로 만들어주세요.
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS에 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.
'front-end > css' 카테고리의 다른 글
| CSS, link와 import (0) | 2021.01.13 |
|---|---|
| CSS 트랜지션으로 좀 더 역동적이고 고급스러운 느낌 주기 (0) | 2021.01.13 |
| CSS 트랜스폼 중심축 바꾸기 (0) | 2021.01.12 |
| CSS 트랜스폼 (0) | 2021.01.11 |
| CSS 믹스 블렌드 모드 (0) | 2021.01.10 |
댓글