CSS로 문제를 해결하기 위해 간단한 예제들을 기록합니다.
비율이 유지되는 반응형 엘리먼트 (Responsive Element)
aspect-ratio를 이용하면 부모의 크기가 달라지더라도 자식의 비율을 유지한채 크기를 변경 할 수 있다.
can i use를 볼 때 아직 사용하기는 이른 것 같다.
반응형 이미지 (Responsive Image)
반응형에서는 부모의 크기가 달라진다.
부모의 크기가 달라졌을 때 이미지의 비율이 유지되면서 확대 축소 시키는 방법을 다룬다.
(width, height)
스크롤의 움직임에 반응하는 애니메이션 (Scroll Responsive Animation)
자동 스크롤 애니메이션 (Auto Scroll Animation)
스크롤이 필요한 캐러셀에 사용한다.
일반적으로는 transform을 써야한다.
글자가 점점점이 될 때를 자바스크립트로 아는 방법 (Text Ellipsis Detection)
element의 offsetWidth와 scrollWidth를 비교해서 구한다.
Intersection Observer를 이용한 스크롤 이벤트 (Intersection Observer Scroll Event)
Flex Item에 Ellipsis를 넣는 방법 (Flex Item Ellipsis)