calc() 괄호 안의 사칙연산을 수행한 결과를 속성값으로 사용한다.
position : HTML 요소가 배치되는 방식을 결정하는 속성
top left bottom right : 해당 방향 기준으로 요소의 좌표값을 변경한다.
static(기본값) : 요소를 문서상에 원래 있어야 하는 위치에 배치한다.(top left bottom right 적용 불가능)
relative : 원래 있던 자리를 기준으로 요소의 위치를 조정할 수 있다.(static 기준으로 이동)
absolute : 절대 좌표를 기준으로 요소의 위치를 조정할 수 있다.(relativ 옵션을 가진 부모 박스의 기준으로 절대 좌표를 잡음)
fixed : 스크롤과 무관하게 뷰포트를 기준으로 요소의 위치를 설정할 수 있다.(viewport를 기준으로 함)
sticky : 요소의 원래 위치에 있다가 스크롤이 내려가면 지정한 좌표에 고정됩니다.
z-index : 박스의 순서 설정 가능
auto(default) : 자동으로 정해줌
transition : 전환이 자연스럽게 가능
transition-property: color, width 등의 변경할 속성값
transition-duration: 0.2s : transition이 걸리는 시간 지정
transition-time-function : transition 패턴
transition-delay: 2s : 요청을 받은 후 기다려야하는 시간을 설정
property → duration → time