[CSS] 스켈레톤 스크린

https://cdn.dribbble.com/users/28445/screenshots/3500450/trellis1-01.jpg

 

여러가지 방법이 있지만, 가장 쉽게 스켈레톤 스크린은,

<div></div> 안에 데이터가 불러오는동안 없을경우 :empty css 를이용하면 

간단히 작업할 수 있습니다.

 

스켈레톤 스크린(스플래시 스크린)은 스크린이 로드 중임을 나타낼 때 빈 스크린(우리 컨트롤) 및 스피너와 비교할 때 지속 시간이 짧다고 인식되지만 많이 그렇지는 않습니다

스켈레톤 화면은 점진적 콘텐츠 로드를 막지 않아야 합니다(실제 콘텐츠는 데이터가 사용 가능할 때 즉시 스켈레톤 개체를 대체해야합니다). 오늘날 사용되는 스켈레톤 스크린의 대부분은 스플래시 스크린이며, 루크 브로 블 스키 (Luke Wroblewski)가 묘사 한 원래 방식의 스켈레톤 스크린이 아닙니다 .[출처] 스켈레톤 스크린에 대해 알아야 할 모든 것|작성자 YEOJUING

 

See the Pen skeleton_screen (스켈레톤 스크린) by jeongahlee (@jeongahlee) on CodePen.