카
카카오엔터테인먼트FE
January 19, 20231회
Scroll Snap API를 통해 이미지 캐러셀 완성하기
간단 소개
Scroll-Snap API를 사용하여 이미지 캐러셀을 구현하고, 스크롤 스냅 효과를 적용하는 방법을 설명합니다.
AI Summary
- Scroll-Snap API 소개
- Scroll Snap API는 스크롤 스냅 위치를 선언하여 제어된 스크롤 환경을 제공합니다.
- 터치 스와이프나 마우스 휠 스크롤 시 스크롤 종료 위치가 정확하지 않을 때 유용합니다.
- 스냅은 스크롤 컨테이너의 스크롤을 제어하여 스냅 포트가 자식 요소에 위치하도록 합니다.
- 이미지 캐러셀 구현 및 API 적용
- HTML과 CSS를 사용하여 기본적인 이미지 캐러셀 UI를 구현합니다.
- 스크롤 컨테이너에
scroll-snap-type속성을 지정하여 scroll-snap-container로 만듭니다. scroll-snap-axis로 스크롤 축을,scroll-snap-strictness로 스냅 발생 여부를 결정합니다.- 자식 요소에
scroll-snap-align속성을 지정하여 스냅 위치를 정렬합니다 (start, center, end).
- 결과 및 활용
- Scroll-Snap API를 통해 자바스크립트 없이 스크롤 보정 효과를 구현할 수 있습니다.
- 페이지 스크롤, 드롭다운 등 다양한 UI에서 제어된 스크롤 경험을 제공할 수 있습니다.
Next Feeds
react-query로 데이터 처리하기 - 파트너스 레거시 코드 리팩토링(2) api 로직, react-query
파트너스 레거시 코드 리팩토링을 통해 API 로직을 분리하고 React-Query를 도입하여 데이터 처리 효율성을 개선했습니다.
react-query리팩토링ReduxAPIhooks
2023. 1. 18.
카카오헤어샵
리디에서 Kafka를 사용하는 법
리디는 Kafka를 이벤트 스트리밍 플랫폼으로 활용하여 실시간 랭킹, 애널리틱스, 작업 큐 등 다양한 서비스를 개선하고 있습니다.
KafkaR-Bus이벤트 스트리밍실시간 랭킹애널리틱스
2023. 1. 17.
리디
CTO가 커리어를 걸고 비트 레벨까지 내려가서 DB를 해킹했던 이야기
CTO가 비트 레벨까지 파고들어 DB를 해킹, 36시간 만에 서비스 장애를 극복한 데브시스터즈의 기술 이야기.
CockroachDB데이터베이스 해킹장애 복구Event SourcingPebble
2023. 1. 17.
데브시스터즈
Service Discovery DR 구성 3부 - eurekube-operator의 Zone Failover를 위한 Spring Cloud LoadBalancer 탐구
eurekube-operator의 Zone Failover 구현을 위해 Spring Cloud LoadBalancer를 활용하고 Chaos Test로 검증하는 과정을 설명합니다.
Spring CloudLoadBalancereurekube-operatorZone FailoverService Discovery
2023. 1. 15.
11번가
Now is a good time to multiply your Design team capacity
효율적인 디자인 팀 구성 및 관리를 통해 팀 역량을 강화하고 개인의 성장을 도모하는 전략을 제시합니다.
디자인팀역량강화리더십온보딩디자인 시스템
2023. 1. 12.
버즈빌
9가지 프로그래밍 언어로 배우는 개념: 4편 - 하이 레벨 언어와 동적 타입 언어
하이 레벨/동적 타입 언어의 특징과 장단점을 분석하고, 타입 호환성, 다형성, 리플렉션 등의 개념을 다양한 언어 예시와 함께 설명합니다.
하이 레벨 언어동적 타입 언어레퍼런스 타입덕 타이핑리플렉션
2023. 1. 12.
데브시스터즈