Transform
-
[CSS] transform: translate 활용 예제(1) :: 마이구미HTML, CSS 2022. 9. 17. 23:25
이 글은 CSS 속성 중 transform: translate 를 활용한 예제를 살펴본다. translate 사용 사례의 하나를 설명한다. 속성의 설명보다는 이 속성을 활용하여 어떻게 적용할 수 있는지에 대한 아이디어라고 생각하면된다. MDN - https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateX 활용 예제 - https://codesandbox.io/s/horizontal-scroll-list-wddzp4 사실 어떻게 보면 translate 를 활용한 예시는 크게 도움이 되지 않을 수 있다. 하지만 이 글을 남기게 된 이유는 UX 적으로도 남기고 싶은 내용이 있어서다. 끝까지 읽어보길 바란다. CSS transfo..
-
translate() vs positioning 비교 :: 마이구미HTML, CSS 2017. 10. 24. 21:06
이 글은 css의 translate()와 top/left 와 같은 positioning을 비교한다. 지금까지 요소를 이동시킬 때, 두가지 방식을 활용하고 있다. 두가지 방식은 성격자체가 다르기 때문에, 차이점을 분명히 인지해야한다. 결론부터 말하고자 한다면, 이동에 있어서는, translate()를 사용하는 것이 효율적이다. 참고한 글을 통해 예제를 확인할 수 있다. Why moving elements with translate is better than position abs top/left? transform 속성의 경우에는 좌표 공간을 변형하여 다른 요소에 영향을 미치지 않고 위치를 변경하는 것이고, position의 경우에는 말 그대로, 위치시킨다는 의미로 생각하면 된다. 차이점은 다음 그림을 통..