정의된 경로를 따라 요소에게 애니메이션을 적용하는 데 필요한 관련 속성을 한번에 작성할 수 있도록 하는 속기 속성이다.
[ <'offset-position'>? [ <'offset-path'> [ <'offset-distance'> || <'offset-rotate'> ]? ]? ]![ / <'offset-anchor'> ]?
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
offset-anchor 속성에 사용되는 타입이다.
현재 유저 에이전트(user agent)별로 확인이 필요하다.
auto | <position>박스형의 요소에 대한 상대적인 2차원 좌표 값을 나타낸다.
[left | center | right] || [top | center | bottom]
다음과 같이 값이 지정될 수 있다.
right
center top[left | center | right | <length-percentage>] [top | center | bottom | <length-percentage>] ?
다음과 같이 지정될 수 있다.
right 10%
15% 100px
20%[[left | right] <length-percentage>] && [[top | bottom] <length-percentage>]]
x, y축 위치 값이 순서와 관계없이 모두 작성되어야 하며 각 방향별로 center를 제외한 키워드와 공백 후 실제 <length-percentage> 타입의 값을 지정한다.
top 10% right -10px<length>와 <percentage> 타입을 나타낸다.
<length> | <percentage>숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.
<length>
아래의 모든 단위를 사용할 수 있는지 확인해야 할 수도 있다.
1cm(센티미터)는 96px를 2.54로 나눈 값을 나타낸다.
1in(인치)는 2.54cm, 96px과 동일한 값을 나타낸다.
1cm의 1/10 값을 나타낸다.
1in의 1/16 값을 나타낸다.
1in의 1/72 값을 나타낸다.
스크린의 기본 단위이다. 1in의 1/96 값을 나타낸다.
1cm의 1/40을 나타낸다.
보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다.
400grad(그라디안)은 완전한 원을 만든다.
2π(라디안)이 완전한 원을 만든다.
1turn(턴)이 완전한 원을 만든다.
대상 요소의 폰트의 대문자 높이를 상대 단위의 기준으로 사용한다.
글꼴 크기에 대한 0(ZERO, U+0030) 문자의 너비를 상대적인 기준으로 하는 단위이다.
대상 요소의 폰트 크기를 상대 단위의 기준으로 사용한다.
대상 요소의 폰트의 x-height를 상대 기준으로 사용한다.
한국, 중국, 일본 문자(CJK)의 일반적인 어드밴스 메저(advance measure)를 나타낸다. 상대적인 기준이 되는 값은 표의 문자 '水'의 너비 또는 높이이다.
요소의 line-height 속성의 값을 상대 단위의 기준으로 사용한다.
html 요소(:root)의 폰트 크기를 상대 기준으로 사용한다.
html 요소(:root)의 line-height 속성 값을 상대 단위의 기준으로 사용한다.
1초당 발생한 진동수를 나타낸다.
1000Hz를 나타낸다.
그리드 컨테이너 내에서 남은 공간에 대한 차지하는 비율 값을 나타낸다.
html 요소의 블록축 방향으로 뷰포트 길이의 1%를 나타낸다.
뷰포트 높이를 상대적으로 1% 높이를 갖는다.
html 요소의 인라인 축 방향으로 뷰포트 길이의 1%를 나타낸다.
vw 또는 vh 중 큰 값을 나타낸다.
vw 또는 vh 중 작은 값을 나타낸다.
뷰포트 너비를 상대적으로 1% 폭을 갖는다.
1cm당 점(dot)의 수를 나타낸다.
1in당 점(dot)의 수를 나타낸다.
1픽셀(pixel)당 점(dot)의 수를 나타낸다.
1초를 1000으로 나눈 밀리초(milliseconds)를 나타낸다.
초를 나타낸다.
어떠한 기준으로 부터 백분율로 표현한다.
기준 위치를 아래쪽으로 한다.
중앙을 기준으로 한다.
기준 위치를 좌측으로 한다.
기준 위치를 우측으로 한다.
기준 위치를 상단으로 한다.
다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.
CSS 속성에 따라 정해진 값으로 처리한다. 속성에 따라 auto가 갖는 값의 의미는 다르므로 반드시 해당 속성에서의 값이 의미하는 내용을 확인해야 한다.
<length> | <percentage><length>와 <percentage> 타입을 나타낸다.
<length> | <percentage>offset-path 속성에 사용되는 타입이다.
path() 함수를 제외한 다른 값 유형은 아직 대부분 동작하지 않는다. 유저 에이전트(user agent) 지원 여부를 확인해야 한다.
none | path() | <url> | [ <basic-shape> || <geometry-box> ]
clip-path, shape-outside, offset-path 속성에 사용되는 형태를 나타낸다.
inset() | rect() | circle() | ellipse() | polygon() | path()
모든 함수를 표시하지 않을 수도 있다.
모든 속성을 표시하지 않을 수도 있다.
요소의 클리핑 범위를 설정한다.
요소가 따라가야할 모션 경로를 지정하고 부모 컨테이너 또는 SVG 좌표 시스템 내에서 요소의 위치를 정의한다.
인접 인라인 콘텐츠를 형태에 따라 감싸는 처리를 한다.
<basic-shape>과 함께 지정하면 <basic-shape>에 대한 참조 박스를 제공한다.
자체적으로 지정된 경우 모서리 모양을 포함하여 지정된 박스의 가장자리를 클리핑 경로로 사용한다.
<shape-box> | fill-box | stroke-box | view-box
CSS 박스 모델에서 박스의 가장자리를 참조하는 키워드를 쉐입(shape)에게 사용하는 경우를 나타낸다.
<box> | margin-box테두리가 있다면 테두리 영역까지의 범위를 정의한다. SVG 컨텍스트에서는 stroke-box와 동일한 값으로 사용된다.
실제로 콘텐츠가 보여지는 범위를 정의한다. SVG 컨텍스트에서는 fill-box와 동일한 값으로 사용된다.
바깥쪽 여백 가장자리까지의 범위를 정의한다. SVG 컨텍스트에서는 stroke-box와 동일한 값으로 사용된다.
내부 여백이 있다면 테두리를 뺀 내부 여백 포함을 나타내는 범위를 정의한다. SVG 컨텍스트에서는 fill-box와 동일한 값으로 사용된다.
오브젝트 바운딩 박스(object bounding box)를 참조 박스로 사용한다. 웹브라우저에 따라서 SVG 컨텍스트에서만 적용될 수도 있다.
스트로크 바운딩 박스(stroke bounding box)를 참조 박스로 사용한다. 웹브라우저에 따라서 SVG 컨텍스트에서만 적용될 수도 있다.
가장 가까운 SVG 뷰포트를 참조 박스로 사용한다.
오브젝트 바운딩 박스(object bounding box)를 참조 박스로 사용한다. 웹브라우저에 따라서 SVG 컨텍스트에서만 적용될 수도 있다.
스트로크 바운딩 박스(stroke bounding box)를 참조 박스로 사용한다. 웹브라우저에 따라서 SVG 컨텍스트에서만 적용될 수도 있다.
가장 가까운 SVG 뷰포트를 참조 박스로 사용한다.
이미지나 글꼴 등 리소스를 가리키는 문자열을 나타낸다.
<url()> | <src()>src() 함수의 매개변수를 나타낸다.
src( <string> <url-modifier>* )따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
모든 속성을 표시하지 않을 수도 있다.
글꼴을 지정한다.
가상 요소로 생성할 콘텐츠를 설정한다.
인용 부호의 유형을 설정한다.
URL의 의미나 해석을 어떻게든 변경하는 타입이다.
url() 함수의 매개변수를 나타낸다.
url( <string> <url-modifier>* ) | <url-token>
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
URL의 의미나 해석을 어떻게든 변경하는 타입이다.
모든 함수를 표시하지 않을 수도 있다.
모든 속성을 표시하지 않을 수도 있다.
선택자를 갖는 요소에 배경 이미지를 설정한다.
요소의 클리핑 범위를 설정한다.
모든 함수를 표시하지 않을 수도 있다.
다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.
어떠한 값도 설정하지 않음을 나타낸다.
auto | <position>박스형의 요소에 대한 상대적인 2차원 좌표 값을 나타낸다.
[left | center | right] || [top | center | bottom]
다음과 같이 값이 지정될 수 있다.
right
center top[left | center | right | <length-percentage>] [top | center | bottom | <length-percentage>] ?
다음과 같이 지정될 수 있다.
right 10%
15% 100px
20%[[left | right] <length-percentage>] && [[top | bottom] <length-percentage>]]
x, y축 위치 값이 순서와 관계없이 모두 작성되어야 하며 각 방향별로 center를 제외한 키워드와 공백 후 실제 <length-percentage> 타입의 값을 지정한다.
top 10% right -10px가장 가까운 앞쪽 요소가 position 속성 값이 static이거나 relative을 가지면서 블록 레벨인 경우 아래쪽에, 인라인 레벨인 경우 오른쪽에 위치한다.
[ auto | reverse ] || <angle>
0~360도 범위의 각도 값을 deg(도), grad(그레이드), rad(라디안), turn(턴) 단위로 표현한다.
<angle> 데이터 타입은 <number> 타입의 값 다음에 사용 가능한 단위를 붙여 구성한다. 숫자와 단위 사이에 공백은 허용하지 않는다. 0인 경우에는 단위를 붙이지 않아도 된다.
선택적으로 +, - 부호를 사용하여 양수와 음수 값을 구분하여 설정할 수 있다. 양수의 경우는 시계 방향, 음수의 경우에는 시계 반대 방향의 회전을 의미한다.
offset-path 지정된 경로의 방향 각도에 따라 요소의 방향도 자동으로 회전된다.
offset-path 지정된 경로의 방향 각도에 180도를 더한 만큼 요소 회전된다.
모든 속성을 표시하지 않을 수도 있다.
offset-path 속성으로 지정된 경로 상에서 움직이는 요소의 내부 기준 위치를 설정한다.
offset-path 따라 박스의 위치를 지정한다.
요소가 따라가야할 모션 경로를 지정하고 부모 컨테이너 또는 SVG 좌표 시스템 내에서 요소의 위치를 정의한다.
offset-path의 초기 위치를 정의한다.
offset-path로 지정된 경로에 배치될 때 요소의 방향을 설정한다.
offset: path("M100,0 A50,50 0 1,1 100,200 A100,100 0 1,1 100,0") auto 45deg;| Modules | ||
|---|---|---|
| Module Name | Status | Summary |
| Motion Path Module Level 1 | Last review date: 2023-2-11 | |