[TIL] 레이아웃 시프트 현상

서론

css를 줄 때, 클릭했을 때 효과를 다르게 주려고 버튼에 border를 추가하는 과정에서 다른 레이아웃에 영역에 top이랑 left, right도 같이 움직이는 현상을 발견했다.
튜터님의 도움을 받아 원인을 분석해 보니 레이아웃 시프트 현상이 나타난다는 것이였다.

레이아웃 시프트(layout Shift)란?

레이아웃 시프트(Layout Shift)는 웹 페이지의 렌더링 중에 사용자가 볼 수 있는 콘텐츠의 위치가 변경되는 것을 말한다. 이는 사용자가 페이지를 로드하는 동안 콘텐츠가 초기에 한 위치에 있고, 나중에 다른 위치로 이동할 때 발생한다. 레이아웃 시프트는 사용자 경험에 부정적인 영향을 미칠 수 있으며, 특히 페이지가 로드될 때 콘텐츠가 자주 이동하는 경우 사용자를 혼란스럽게 할 수 있다.

원인

현상이 일어나는 이유는 다음과 같을 수 있다.

• 크기가 없는 이미지
• 크기가 없는 광고, 삽입, iframe
• 크기가 없는 광고, 삽입, iframe과 같이 동적으로 삽입된 콘텐츠
• 웹 글꼴

결론

태그들에 witdh과 heigh 크기를 지정해주면 크기가 고정 되기 때문에 밀림 현상이 일어나지 않는다.