transition
-
CSS Transform 알아보기(2) - translate백수의 개발/웹 2020. 4. 7. 19:04
CSS Transform - translate 알아보기 오늘은 CSS Transform의 속성 중 하나인 translate에 대해 알아보자. 기본적으로 translate는 위치를 이동하는 것이라고 생각하면 된다. translate는 아래와 같이 총 4가지의 종류로 사용할 수 있다. 한번 이 translate가 어떻게 적용되는지 간단하게 알아보자. 우리가 보는 웹 페이지는 기본적이로 2d이지만 원근법을 바탕으로 3d의 효과를 줄 수 있다. 아래처럼 3차원의 기본 개념을 바탕으로 translate를 통해 좌표를 이동한다고 생각하면된다. translate(x, y) .element { transform: translate(50px, 30px); } 기본적으로 설정 된 현재 위치로 부터 x, y축으로 특정 거리..
-
CSS Transform 알아보기(1) - 기본개념백수의 개발/웹 2020. 4. 6. 19:01
CSS Transform 개념 알아보기 웹 페이지를 보다보면 마우스를 올리거나, 클릭하거나, 스크롤을 움직이다 보면 페이지 내 요소들이 스르륵~ 샤라락~ 휘리릭~ 하는 모습들을 볼 수 있다. 그런 효과들의 대다수에는 transform 속성이 숨어있다.(모든 것이 그렇지는 않지만... transform + transition를 활용한다.) 그렇다면 오늘 CSS의 속성 중 하나인 Transform에 대해 알아보자. Transform은 말 그대로 변환이다. 우리는 특정 도형(엘리먼트)를 원하는 모양으로 변형시키기 이 transform을 사용한다. 이 transform을 통해 위와 같은 직사각형 도형의 위치를 이동시키거나, 회전시키거나, 비틀거나, 원근법 등 다양한 효과를 줄 수 있다. transform은 크게..
-
CSS 애니메이션 모음 AniCollection백수의 개발/개발을 하면서... 2020. 4. 5. 15:15
CSS 애니메이션 모음 AniCollection 오늘은 CSS를 통해 다양한 효과를 줄 수 있는 오픈소스 AniCollection에 대해 알아보자. 요즘에는 예전처럼 완전 정적인 페이지보다는 조금 더 인터렉티브하고 역동적인 페이지들을 많이 볼 수 있다. 어떤 부분을 클릭하거나, 마우스를 올리거나, 페이지가 로딩될 때 등 다양한 움직임들이 있다. 예전에는 이러한 움직임들을 구현하기 위해서는 Javascript를 통해 하나하나 움직임을 조종?했다면 이제는 CSS만으로도 충분히 가능하다. CSS를 통해 다양한 동적인 움직임을 구현하는 것이 처음에는 그렇게 쉽지만은 않을 것이다. 그래서 AniCollection이라는 오픈소스를 보며 실제로 적용해보고 분석해보며 적용해보자. AniCollection은 여기서 살펴..