트랜지션
-
고급 CSS 정리이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 6. 05:10
지금까지 (1)트랜지션, (2) 트랜스포메이션, (3) 애니메이션, (4) 미디어쿼리를 배웠습니다. (1) 트랜지션, Transition: 하나의 state에서 다른 state로 넘어갈 때 나타나는 효과, 예를 들어, hover(마우스 커서가 박스 위에 있을 때)하면 변화가 일어나게 할 수 있습니다.(2) 트랜스포메이션, Transformation: element의 모양을 변형하게 하는 효과, 예를 들어, 뒤집거나, 비틀거나(skew), 크기를 키우거나, 줄일 수 있습니다.그리고 트랜지션-트랜스포메이션을 합쳐서 사용해 보았습니다. 즉, 트랜지션하는 순간에, 모양새가 변형되는것(트랜스포메이션)되는 것으로, hover할 때 회전시킬 수 있습니다. (3) 애니메이션, anmation: @keyframes을 만..
-
트랜지션, transition이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 2. 05:00
이번시간에는 트랜지션, transition: 이동 후 변화를 다채롭게 보여주는 효과에 대해 알아보도록 하겠습니다 먼저, span을 만들어, Text라고 쓴 후, 배경색은 초록색으로 설정하겠습니다. 그런 다음, 박스의 states, 상태가 hover 될 때, 배경색을 파란색으로 바꾸도록 하겠습니다. 마우스 커서를 Text상자로 가져가면, 배경색이 초록색에서 파란색으로 변경되는 것을 확인할 수 있습니다. 그렇다면 이번에는 글자색을 흰색으로 설정하고, 배경색을 빨간색으로 변하도록 코드를 고쳐 보겠습니다. 위와 같이 배경색이 초록색으로 빨간색으로 변화될 때, 아직까지 트랜지션, transition효과를 적용하지 않아서, 변하는 동안 어떤 애니메이션, animation도 나타나지 않았습니다. 여기서 트랜지션, t..