Recent Posts
Recent Comments
Archives
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
Tags
- 모던자바스크립트
- 스파르타코딩클럽
- useRouter
- 내일배움캠프
- nextjs
- 자주 까먹는
- 구글 로그인
- React
- Next
- deep dive
- 코드카타
- git
- 리터럴
- 프로젝트 셋팅
- 셋팅
- js
- 오블완
- 모던 자바스크립트
- array정적메서드
- vercel
- vscode
- 티스토리챌린지
- domain
- 코테
- 코딩테스트
- CORS
- 소셜 로그인
- error
- 프로그래머스
- 초기셋팅
- Today
- Total
목록CLS (1)
도록
CLS(Cumulative Layout Shift)
정의: 예상치 못한 레이아웃 이동을 일컫는 것으로, 이로 인한 나쁜 사용자 경험까지 포함하고 있다.이미지 등을 로딩하는 시간 차이로 인해 특정 요소의 위치가 변하면서, 사용자가 원하지 않았던 이벤트가 발생한다.예를 들면 쇼핑하러가기 버튼을 클릭하려고 했는데 갑자기 상단에 로고가 그려지면서 키워드 검색을 눌러진 것으로 인식한다던지 등이다. 해결책이미지, 비디오 요소에 항상 크기 속성을 포함하거나, Aspect Ratio Boxes 같은 방법으로 공간을 미리 확보하기사용자 상호작용에 대한 응답이 아닐 때는 컨텐츠를 삽입하지 않기레이아웃 변경을 트리거하는 속성 대신 transform 애니메이션을 사용하기출처 : https://velog.io/@sunohvoiin/pl2u9xiz
Today I Learned
2024. 6. 21. 16:11