(CSS) Skeleton UI 제작

도입

Skeleton UI로 Loading 컴포넌트를 만들어 본다.

 

3가지의 주요 image를 핸들링하는 요소와 2가지의 animation 요소로 구현한다.

 

image 핸들링 요소

• background-image
• background-position
• background-size

 

animation 핸들링 요소

• background-repeat
• animation

제작 프로세스

1. linear-gradient 로 그라데이션 이미지 구현

background-image는 배경의 이미지를 설정한다. color와는 다른 의미이다.

Skeleton UI에서 hightlight 되는 이미지는 linear-gradient로 구현된다.

 

CSS 그레이디언트 보러가기

 

rgba(255, 255, 255, 0)은 '흰색' 이다.

이 그라데이션이 0.2의 blur 값을 가지고 그 이후 다시 원복된다.

흰색 => 0.2 blur 흰색 => 흰색의 그라데이션이 펼쳐진다.

 

두번째 linear-gradient는 lightgrey 100px로 해서 transparent 0을 주어

그라데이션이 회색 배경위에 비쳐지게 된다.

 

2. background-postion으로 시작점 잡기

 

background-position: x, y

x, y 축의 좌표를 뜻한다.

 

둘다 background-position: 5px 10px이므로 x축으로 5px y축으로 10px 이동

 

 

3. background-size

 

background-size는 앞서 설정했던 position의 시작점을 기준으로

x, y축으로 얼마만큼의 width와 height를 설정한다.

 

빨간색 100 100 사이즈의 사각형(그라데이션 영역)

보라색 97%(97px) 120 사이즈 사각형

 

4. keyfames 설정

 

keyframes의 애니메이션 효과로 position이 이동한다.

 

position 5px 10px --> 100% 10px로 이동한다.

y축은 변함없고 x축이 5px에서 100%(100px)로 이동한다.

 

animation에서 sleleton keyframes가 무한대(infinite)로 실행한다.

 

5. background-repeat: repeat-y

 

no-repeat인 경우 한줄의 효과만 나온다.

 

 

repeat-y로 세로축으로 이미지를 반복구현한다.