11. 로딩

유튜브, 구글링을 통해 로딩바를 만들어보았다.

본인은 rbg를 너무 좋아하기 때문에 rgb를 이용해서 만들어 보았다.

 

 

animation에서 ring을 쓴 것

 

animation에서 spin을 쓴 것

 

animation에서 loading을 쓴 것

 

 

만들면서 새로 배우게 된 css 속성들

animation : 속성의 이름 그대로 애니메이션을 css로 할 때 사용한다.

 

linear-gradient : 두 개 이상의 색이 직선을 따라 점진적으로 변화하는 이미지를 생성한다.

                         사용법은 linear-gradient (방향 또는 각도, 색상 그리고 정지점, 색상 그리고 정지점)

                         방향 또는 각도라고 했었는데 아무것도 입력하지 않으면 to bottom, 즉 , 아래를 향해서 변화한다.

                         왼쪽에서 오른쪽으로 가고싶으면   to right, 혹은 90deg라고 한다.

                         아래에서 위쪽으로 가고싶으면 to top 혹은 180deg라고 한다.

 

@keyframes : 애니메이션을 재생할 각 프레임의 스타일을 정의하는 것이다.

from 속성이나 0%속성에 설정한 스타일에서 출발해서 to 속성이나 100% 속성에 설정한 스타일로 점차 바뀌면서 

애니메이션이 재생된다.

 

@keyframes은 애니메이션을 적용할 요소의 animation-name을 정의해야한다.

 

@keyframes example {
}

 

이런 식으로 @keyframes를 example이라는 name을 가진 애니메이션 요소에 적용한다는 뜻이다.

 

@keyframes example {

                                        hue-rotate(각도)
}

 

hue-rotate(각도)에서

hue는 색조,생각을 변경한다는 뜻이다.

rotate는 회전.

각도는 위에서 배운 0deg~360deg를 사용한다.

hue-rotate (180deg); 는 색조의 회전을 180deg만큼 적용한다는 뜻,