offset

• https://developer.mozilla.org/en-US/docs/Web/CSS/offset
• https://www.w3schools.com/cssref/css_pr_offset-path.php
• 활용 예시
• CSS/SVG의 path를 사용해서 요소의 위치를 변경 시킬 수 있다.
• offset-distance 를 0%~100%로 변경시키면 애니메이션 처럼 동작한다.
• offset:{offset-path} {offset-distance} {offset-rotate};
offset: path("M 0 0 L 300 100 L 200 300 z") 0% auto;
• offset-path : 위치 경로
  path("{위치 경로}") 는 SVG의 <path d="{위치 경로}"> 값과 같다.
  MDN에서는 url(),ray(),basic-shape 들이 지원 된다고 적혀있는데, 현재 지원 안된다!
  즉, 현재로는 path()만 지원된다.
• offset-distance : 경로의 동작 거리. 100%면 완료. px 단위도 사용 가능
• offset-rotate : 요소의 회전값.
  auto : 기본 값이며 경로에 맞춰서 요소가 회전한다.
  90deg : 요소는 무조건 90도 회전된 상태로 움직인다.
  auto 90deg : 요소는 90도 회전 후 경로에 맞춰서 요소가 회전한다.
  reverse : auto 180deg 와 같다.
• offset-anchor : 이동하는 요소 의 상자 내부 지점을 지정
  auto : 요소의 중앙을 기준으로 경로에 맞춰 이동
  top,right,left,bottom,center 등을 사용할 수 있다.
  현재 크롬에서 지원안됨!(2023-02-16. ver 110.0.5481.100)
• offset-position : 이동하는 요소의 초기위치 지정
  현재 크롬에서 지원안됨!(2023-02-16. ver 110.0.5481.100)
• (test on chrome 109.0.5414.122)