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를 계속 반복할 수있다.
- 이제 제법 그럴싸하지않은가?? 뭔가좀 허전하니 마지막으로, 애니메이션만 추가해보자.
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
'To be Developer > WEB' 카테고리의 다른 글
| [Trouble Shooting] No naming context bound to this class loader (ZipException) (0) | 2019.05.08 |
|---|---|
| [Jquery] Ajax로 페이징시 선택된 번호 Active (0) | 2017.09.05 |
| [Tomcat7]Ubuntu NamingException (0) | 2017.08.15 |
| [JavaScript]Json to List<Map<>> , List<Map<>> to Json (0) | 2017.08.01 |
| [BootStrap] Js파일 충돌 드디어 고쳤다!!! (jQuery.noConflict()) (1) | 2017.05.18 |
