html
html 코드는 크게 3개의 요소로 이루어집니다.
loading.css
#loading
#loading의 역활은 loading 전체화면입니다. width, height
너비(width)와 높이(height)를 각각 100vw 100vh로 설정하여 화면 전체가 해당되게 합니다. display
display를 flexible하게 만듭니다. 기본 축(justify-content)과 교차 축(align-items) z-index
z-index 속성을 32로 하여 현재 레이어 층이 32층이며 가장 최상위 층이라고 설정합니다. 최상위 층이라는 것은 곧 이 loading 창 위에 아무것도 없다는 것입니다. position
position을 fixed로 하여 요소를 일반적인 흐름에서 제거하고, 공간 또한 배정하지 않게 한 후 top: 0을 통해 전체 화면의 최상단에 위치하게 합니다. animation
또한 애니메이션 지연(animation-delay)을 0.7초로 하여 애니메이션이 0.7초 뒤에 실행하도록 합니다. hideLoadingScreen animation
@keyframes 규칙을 생성합니다. 애니메이션 이름(animation-name)을 #loading-circle
#loading-circle 원에 관한 요소입니다. position
position을 relative로 설정하여 #loading-empty 의 기준이 되는 조상은 #loading-circle 인 것이라고 지정합니다. width, height
border
마찬가지로 border의 굵기 또한 상대적인 척도인
rem을 사용합니다. 색상은 dataTheme.css의 display
display는 flexible 속성을 주고 justify-content을 animation
loadingCircle animation
@keyframes 규칙을 생성합니다. 애니메이션
이름(animation-name)을 #loading-empty
width, height
너비(width)와 높이(height)를 1rem, 2rem으로 여유롭게 설정하여 원 상단의 일부분을 가리게 합니다. position
position을 background-color
|