아래를 다 가리는 loading indicator

전체화면 덮는 역할

.loading-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;   전체화면 다 차지하고 위치 고정되도록
  width: 100%;
  height: 100%;   
  background-color: #0002; 색깔 회색으로, #0002보고 당황하지 말자 #NNNNNN형식에서 줄인듯

 

.modal {
  position: fixed; 전체화면 다 차지하고 위치고정되도록
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); 아래를 흐리게 만드는 역할
  display: flex; 
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

여기에 z-index 가장 큰 값 주면 그 위에 뭐가 더 덮일일이 없음, 뭐가 더 덮이면 정상동작안하게 되므로