이 글은 인프런의 "HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)" 강좌를 들으며 정리한 내용이다.

position - relative와 absolute

부모 요소는 relative position을, 자식 요소는 absolute position을 설정해야함. 그래야 자식 요소가 부모 요소를 바탕으로 인식하지 않음.

.loading {
  /*border: 1px solid red;*/
  width: 30px;
  height: 30px;
  position: relative;//부모 요소
}
.loading span {
  position: absolute;//자식 요소
  width: 10px;
  height: 10px;
  background-color: gray;
  top: 0;
  left: 0;
  animation: loading 1.5s infinite;
}

사각형 안에 들어오게 하는 법

left : calc(100% - ?px)

사각형에서 left : 100%는 왼쪽 모서리 기준으로 이동하게 됨. 따라서 사각형의 가로길이만큼 제외해줘야 함.

keyframes에서 호환성

처음부터 끝까지 요소를 동일하게 맞춰야 함.

@keyframes loading {
  0% {
    top: 0;
    left: 0;
  }
  25% {
    top: 0;
    /*right: 0;*/ //오류
    left: calc(100% - 10px);
    background-color: dodgerblue;
  }
  50% {
    /*bottom: 0;*/ //오류
    top: calc(100% - 10px);
    left: calc(100% - 10px);
    background-color: orange;
  }
  75% {
    top: calc(100% - 10px);
    left: 0;
    background-color: yellowgreen;
  }
  100% {
    top: 0;
    left: 0;
  }