background-image
background-image 속성은 여러 배경 이미지를 추가할 수 있습니다 .
서로 다른 배경 이미지는 쉼표로 구분되며 이미지는 서로 위에 겹쳐서 표시됩니다.
원형 1개, 사각형 4개를 그리기 위해서 5번 선언해 주었고, y축으로 반복할 수 있게 repeat-y를 주었습니다.
background-image:
radial-gradient( circle 50px at 50px 50px, gray 99%, transparent 0 ), /* 원형 */
linear-gradient( lightgray 20px, transparent 0 ), /* 사각1 */
linear-gradient( lightgray 20px, transparent 0 ), /* 사각2 */
linear-gradient( lightgray 20px, transparent 0 ), /* 사각3 */
linear-gradient( lightgray 20px, transparent 0 ); /* 사각4 */
background-repeat: repeat-y;background-position
겹쳐 있는 각 도형의 위치를 x축, y축으로 재지정해줍니다.
background-position:
0 0, /* 원형 x:0, y:0 */
120px 0, /* 사각1 x:120px, y:0 */
120px 40px, /* 사각2 x:120px, y:40px */
120px 80px, /* 사각3 x:120px, y:80px */
120px 120px; /* 사각4 x:120px, y:120px */background-size
background-size:
100px 200px, /* 원형 */
150px 200px, /* 사각1 */
350px 200px, /* 사각2 */
300px 200px, /* 사각3 */
250px 200px; /* 사각4 */animation 레이어 추가
빛이 지나가는 듯한 움직임을 위해 흰색 그라데이션의 이미지와 keyframe animation을 추가하면 효과를 표현할 수 있습니다.
하나의 요소 안에서 이루어지기 때문에 먼저 선언할수록 위쪽으로 쌓이게 되는데요.
지금까지 만든 도형보다 위쪽에 레이어를 선언해주면 됩니다.
background-image:
linear-gradient( 100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80% ), /* animation */
radial-gradient( circle 50px at 50px 50px, gray 99%, transparent 0 ), /* 원형 */
linear-gradient( lightgray 20px, transparent 0 ), /* 사각1 */
linear-gradient( lightgray 20px, transparent 0 ), /* 사각2 */
...
background-size:
50px 200px, /* animation */
100px 200px, /* 원형 */
150px 200px, /* 사각1 */
350px 200px, /* 사각2 */
...:empty 선택자 활용
데이터가 들어오기 전에 빈 태그 상태를 :empty 선택자로 선택할 수 있습니다.
:empty는 자식(텍스트 노드 포함)이 전혀 없는 요소에 적용하는 선택자입니다.
데이터 로딩 이전에 태그를 그리지 않은 상태일 경우에 활용 가능하겠습니다.
.skeleton-screen:empty {}
장점 및 활용범위
단 하나의 태그에서 CSS 만으로 그려질 수 있다는 점에서 코드가 간단하며 변형 및 확장이 용이합니다.
또한 background-image 속성은 렌더링 시, layout 변동 없이 paint, composite 과정만 거치기 때문에 성능적으로도 이점이 있을 것으로 보입니다.
이를 응용하면 CSS를 활용한 패턴 제작 및 로딩아이콘, 차트 등의 다양한 드로잉도 시도해 볼 수 있습니다.
background-image 속성의 브라우저 범위는 IE10 이상으로, 대응 범위를 확인하여 문법을 작성해야 하며 -webkit-, -moz-, -ms- and -o-의 벤더 프리픽스를 필요로 합니다.
