[CSS] Skeleton Screen 을 만들어보자

Skeleton Screen ?

최근 웹페이지를 들어가면 로딩중에 저런 화면을 많이 본적이 있을 것이다.

유투브, 페이스북에서도 로딩중에 많이 사용 하는 화면인데 일명 "Skeleton Screen" 이라고 부른다.

 

CSS linear-gradient를 통한 Skeleton Screen

linear-gradient() CSS 함수는 두 개 이상의 색이 직선을 따라 점진적으로 변화하는 이미지를 생성한다. 함수의 결과는 <image>의 특별한 종류인 <gradient>자료형이다.

<gradient>는 <image>의 한 종류로서 <image>를 사용하는 곳에만 적용할 수 있다. 따라서 linear-gradient()를 background-color 등 <color> 자료형을 받는 속성에는 사용할 수 없다.

ex1) 사용법 linear-gradient([driection], #color1, #color2) (2개 이상의 색상은필수이다.) (driection 에는 top, left, right deg 등 다양한 인자를 사용 가능하다.)

.example-element {
  width:300;
  height:400;
  background: linear-gradient(0, blue, black);
}

 

정 중앙을 기준으로 두개의 색이 그라데이션됨

 

- direction 부분에 degree를 줘서 각도만큼 비틀수도 있다. ingredient는 축을기준으로 무수한 선을 긋는 개념이기때문에, 각도를 준다면 다음처럼 축을 기준으로 휘어진 선이 휘게된다.

 

ex2) 축을 45도만큼 휘게 사용

.example-element {
  width:300;
  height:400;
  background: linear-gradient(45deg, blue, black);
}

정사각형이 아니므로 정확한 대각선은 아닐수도..

 

CSS linear-gradient 을 활용하여 게시글을 표현해보자.

ex3) linear-gradient 를 이용해서 글 한줄 한줄을 표현해보자.

.example-element {
  width:300;
  height:400;

  background-image:
    linear-gradient(lightgrey 15px, transparent 0),
    linear-gradient(lightgrey 15px, transparent 0),
    linear-gradient(lightgrey 15px, transparent 0);
}

 

- 오잉? 근데 3분명히 3줄을 추가했는데 한줄만 나온다? 왜그럴까??? -> 현재 3줄의 좌표가 겹쳐있기때문이다.

background-position: [x 위치, y 위치] 를 추가해서 각각 ingredient의 좌표를 달리해보자.

 

.example-element {
  width:300;
  height:400;

  background-image:
    linear-gradient(lightgrey 15px, transparent 0),
    linear-gradient(lightgrey 15px, transparent 0),
    linear-gradient(lightgrey 15px, transparent 0);
  
  background-position:
  /* 좌측에서 5px만큼 y축으로 5px(선굵기-간격[15px-20px])씩 띄움 */
    5px 10px,
    5px 30px,
    5px 50px;
  background-size:
  /* gradient 기준으로 width height 만한 사각형을 만든다고 생각 하자*/
    100px 100px,
    150px 100px, 
    150px 100px;  
  background-repeat: repeat-y;
}

- 또한 나는 background-size 라는 속성을 주었는데, 사용법은 width 값과 height 값을주면된다. 이 값은 gradient 자체의 width와 height가 아닌 gradient 부터 시작하는 사각형을 준다고 생각하면 된다. 이를 명시하는 이유는 background-repeat: repeat-y; 라는 속성을 주면 y축으로 gradient를 계속 반복할 수있다.

 

width heigth 값은 gradient 선의 속성이 아님을 유의하자

 

 

- 이제 제법 그럴싸하지않은가?? 뭔가좀 허전하니 마지막으로, 애니메이션만 추가해보자.

See the Pen example by EdgarHan (@EdgarHan) on CodePen.

 

 

 

 

 

 

출처

https://developer.mozilla.org/ko/docs/Web/CSS/linear-gradient

https://wit.nts-corp.com/2018/11/19/5371