CSS 셰이프 모듈 레벨 1

1. 소개

이 섹션은 규범적이지 않습니다.

셰이프는 CSS 값으로 사용할 수 있는 임의의 기하학적 형태를 정의합니다. 이 명세서는 요소의 float area 기하를 제어하는 속성을 정의합니다. shape-outside 속성은 셰이프 값을 사용하여 플로트의 float area를 정의합니다.

참고: CSS Shapes의 향후 레벨에서는 플로트 이외의 요소에서도 셰이프를 사용할 수 있게 됩니다. 다른 CSS 모듈에서도 셰이프를 사용할 수 있으며, 예를 들어 CSS Masking [CSS-MASKING] 및 CSS Exclusions [CSS3-EXCLUSIONS]과 같이 사용할 수 있습니다.

참고: 사용자 에이전트가 CSS Shapes와 CSS Exclusions를 모두 구현한 경우, shape-outside 속성이 exclusion의 제외 영역을 정의합니다.

참고: CSS Shapes의 향후 레벨에서는 shape-inside 속성이 정의되어, 해당 요소 내에서 콘텐츠를 감싸는 셰이프를 지정할 수 있게 됩니다.

1.1. 모듈 상호작용

이 모듈은 [CSS2] 챕터 9에서 정의된 플로트 기능을 확장합니다.

1.2. 값

이 명세서는 CSS 속성 정의 규칙을 [CSS2]에서 따르며, 값 정의 문법을 [CSS-VALUES-3]에서 사용합니다. 이 명세서에서 정의되지 않은 값 타입은 CSS Values & Units [CSS-VALUES-3]에서 정의됩니다. 다른 CSS 모듈과의 조합으로 인해 이러한 값 타입의 정의가 확장될 수도 있습니다.

각 속성 정의에 명시된 값 이외에도, 이 명세서에서 정의된 모든 속성은 CSS-전역 키워드도 값으로 허용합니다. 가독성을 위해 별도로 반복하지 않았습니다.

1.3. 용어

감싸기

이 명세서에서는 감싸기라는 용어를 float area의 양 옆으로 콘텐츠가 흐르는 것을 의미합니다. 이는 [CSS2] 챕터 9에서 정의되어 있습니다. 콘텐츠는 왼쪽 플로트 박스의 오른쪽에서 감싸기가 되고, 오른쪽 플로트 박스의 왼쪽에서 감싸기가 됩니다. 이러한 감싸기의 결과로 플로트 옆에 있는 라인 박스는 float area와의 교차를 피하기 위해 필요에 따라 짧아집니다.

float area

플로트 요소 주위로 콘텐츠를 감싸기 위해 사용되는 영역입니다. 플로트 동작 규칙은 float area의 양쪽을 기준으로 콘텐츠 흐름을 결정합니다. 기본적으로 float area는 플로트 요소의 margin box입니다(이 값은 float area가 margin-box 값으로 생성된 경우와 다를 수 있는데, 이때는 border-radius 곡률도 포함됩니다). 이 명세서의 shape-outside와 shape-margin 속성을 사용하면 임의의 비직사각형 float area를 정의할 수 있습니다.

방향에 구애받지 않는 크기 박스의 방향에 구애받지 않는 크기는 박스의 대각선 길이를 sqrt(2)로 나눈 값과 같습니다.

참고: 이 방식은 박스의 크기 중 어느 한쪽(너비나 높이)이 특별히 우세하지 않고, 박스 크기의 백분율이 필요한 경우에 SVG 등에서 너비와 높이를 평균 내는 방법입니다. 정사각형 박스의 경우 너비와 높이가 동일하므로 이 값이 너비/높이와 같습니다.

2. 박스 모델 및 플로트 동작과의 관계

플로트 외부에 인라인 흐름 콘텐츠를 감싸기 하는 경계는 셰이프를 사용하여 정의할 수 있지만, 실제 박스 모델은 변경되지 않습니다. 요소에 마진, 테두리 또는 패딩이 지정되어 있다면, [CSS3BOX] 모듈에 따라 계산 및 렌더링됩니다. 또한 플로트의 위치 지정과 쌓임(stacking)은 셰이프로 float area를 정의해도 영향을 받지 않습니다.

셰이프를 이용해 float area를 정의하면, 셰이프는 플로트의 margin box로 잘려집니다. 즉, 셰이프는 float area를 줄일 수만 있고, 늘릴 수는 없습니다. 축소된 float area는 플로트의 영향을 받는 일부 라인 박스에 아무런 영향을 주지 않을 수 있습니다. 셰이프가 영역을 감싸지 않는 경우에도, 셰이프의 가장자리는 float area 정의에 사용됩니다.

셰이프로 정의된 float area는 모든 방향에서 일반 float area를 축소할 수 있지만, 그렇다고 해서 콘텐츠가 플로트의 양쪽을 감싸는 것은 아닙니다. shape-outside가 지정된 왼쪽 플로트는 여전히 오른쪽에서만 감싸기가 가능하며, 오른쪽 플로트는 왼쪽에서만 감싸기가 가능합니다.

<img class="left" src="hand.svg"/>
<img class="right" src="hand.svg"/>
<p>
  Sometimes a web page’s text content appears to be
  funneling your attention towards a spot on the page
  to drive you to follow a particular link. Sometimes
  you don’t notice.
</p>

<style type="text/css">
  .left {
    shape-outside: polygon(0 0, 100% 100%, 0 100%);
    float: left;
    width: 40%;
    height: 12ex;
    transform: scaleX(-1);
  }

  .right {
    shape-outside: polygon(100% 0, 100% 100%, 0 100%);
    float: right;
    width: 40%;
    height: 12ex;
  }

  p {
    text-align: center;
  }
</style>

shape-outside: polygon(0 0, 500% 500%, 0 500%);

shape-outside: inset(0% 50% 0% 50%);

shape-outside: inset(0% 150% 50% 0%);

shape-outside: inset(50% 0% 0% 50%);
shape-margin: 0px;

shape-outside: polygon(50px 0px, 100px 100px, 0px 100px);

.float-left {
  shape-outside: polygon(0% 50%, 50% 100%, 0 100%);
  float: left;
  width: 100px;
  height: 100px;
  margin-top: 20px;
}

3. 기본 셰이프

<basic-shape> 타입은 기본 셰이프 함수로 지정할 수 있습니다. 이 구문을 사용하여 셰이프를 정의할 때, reference box는 <basic-shape> 값을 사용하는 각 속성에 의해 정의됩니다. 셰이프의 좌표계는 reference box의 좌상단을 기준으로 하며, x축은 오른쪽으로, y축은 아래쪽으로 펼쳐집니다. 퍼센트로 표현된 모든 길이는 reference box의 실제 크기에서 계산됩니다.

3.1. 지원되는 셰이프

<basic-shape> 함수는 다음과 같습니다:

<inset()> = inset(
  <length-percentage>{1,4}
  [ round <'border-radius'> ]?
)

<xywh()> = xywh(
  <length-percentage>{2} <length-percentage [0,∞]>{2}
  [ round <'border-radius'> ]?
)

<rect()> = rect(
  [ <length-percentage> | auto ]{4}
  [ round <'border-radius'> ]?
)

<basic-shape-rect> = <inset()> | <rect()> | <xywh()>

<circle()> = circle(
  <radial-size>?
  [ at <position> ]?
)

<ellipse()> = ellipse(
  <radial-size>?
  [ at <position> ]?
)

<polygon()> = polygon(
  <'fill-rule'>? 
  [ round <length> ]? ,
  [<length-percentage> <length-percentage>]#
)

<path()> = path(
  <'fill-rule'>? ,
  <string>
)

<shape()> = shape(
  <'fill-rule'>?
  from <position>
  <shape-command>#
)

inset()

inset은 reference box의 각 가장자리로부터의 inset 값으로 사각형을 정의합니다.

네 개 미만의 <length-percentage> 값이 제공되면, 생략된 값은 margin 축약형과 동일한 방식으로 기본값이 지정됩니다: 두 번째 또는 세 번째 값이 생략된 경우 첫 번째 값으로, 네 번째 값이 생략된 경우 두 번째 값으로 처리됩니다.

네 개의 <length-percentage> 값은 각각 사각형의 위, 오른쪽, 아래, 왼쪽 가장자리 위치를 reference box의 해당 가장자리에서의 inset 값으로 정의합니다.

각 방향의 inset 합이 사용된 치수보다 크면 (예: 왼쪽과 오른쪽 inset이 각각 75%인 경우) CSS Backgrounds 3 § 4.5 곡선 겹침 규칙을 사용하여 inset 효과가 100%가 되도록 비례적으로 축소합니다.

예를 들어, inset(75% 0 50% 0)을 지정하면 위+아래 가장자리 합이 reference box의 높이의 125%가 됩니다. 이 값들은 합이 100%가 되도록 비례적으로 축소되어, inset(60% 0 40% 0)과 동일하게 됩니다.

선택적인 <'border-radius'> 인자는 border-radius 축약 구문을 사용하여 사각형 모서리를 둥글게 만듭니다.

테스트

• inset-function-computed.html (실시간 테스트) (소스)
• inset-function-invalid.html (실시간 테스트) (소스)
• inset-function-valid.html (실시간 테스트) (소스)

xywh()

xywh는 reference box의 위와 왼쪽 가장자리로부터의 오프셋과 너비, 높이로 사각형을 정의합니다.

네 개의 <length-percentage> 값은 각각, reference box의 왼쪽에서의 inset, reference box의 위쪽에서의 inset, 사각형의 너비, 사각형의 높이를 의미합니다.

참고: 이 구문은 SVG의 viewBox 속성에서 영감을 받은 것입니다.

선택적인 <'border-radius'> 인자는 border-radius 축약 구문을 사용하여 사각형 모서리를 둥글게 만듭니다.

테스트

• xywh-function-computed.html (실시간 테스트) (소스)
• xywh-function-invalid.html (실시간 테스트) (소스)
• xywh-function-valid.html (실시간 테스트) (소스)

rect() =

rect는 reference box의 위와 왼쪽 가장자리로부터의 inset 값으로 사각형을 정의합니다.

네 개의 <length-percentage> 값은 각각 위, 오른쪽, 아래, 왼쪽 가장자리 위치를 첫 번째와 세 번째 값은 reference box의 위쪽에서, 두 번째와 네 번째 값은 reference box의 왼쪽에서의 inset 값으로 정의합니다.

auto 값은 박스의 해당 가장자리가 reference box의 해당 가장자리에 일치하게 하며, 첫 번째(위) 또는 네 번째(왼쪽) 값에서는 0%와, 두 번째(오른쪽) 또는 세 번째(아래) 값에서는 100%와 동일합니다.

두 번째(오른쪽)와 세 번째(아래) 값은 네 번째(왼쪽)와 두 번째(위) 값에 의해 바닥(floor) 처리됩니다.

예를 들어, rect(10px 0 0 20px)을 지정하면 아래쪽 가장자리가 위쪽 가장자리보다 높고, 오른쪽 가장자리가 왼쪽 가장자리보다 왼쪽에 위치하므로, 둘 다 교차하지 않도록 보정되어, rect(10px 20px 10px 20px)과 동일하게 처리됩니다.

참고: 이 구문은 rect() 함수(오직 clip 속성에서만 사용됨)와 비슷하지만, 완전히 동일하지는 않습니다.

선택적인 <'border-radius'> 인자는 border-radius 축약 구문을 사용하여 사각형 모서리를 둥글게 만듭니다.)

테스트

• rect-function-computed.html (실시간 테스트) (소스)
• rect-function-invalid.html (실시간 테스트) (소스)
• rect-function-valid.html (실시간 테스트) (소스)

circle()

• <radial-size> 인자는 원의 반지름을 정의합니다. gradient box를 참조하는 대신, 값은 reference box 기준으로 해석됩니다.

• 두 개의 <length-percentage> 값은 유효하지 않습니다.

  <position> 인자는 원의 중심을 정의합니다. 별도로 지정하지 않으면, 생략 시 center가 기본값입니다.

테스트

• circle-function-computed.html (실시간 테스트) (소스)
• circle-function-invalid.html (실시간 테스트) (소스)
• circle-function-valid.html (실시간 테스트) (소스)

ellipse()

• <radial-size> 인자는 타원의 수평 및 수직 반지름을 정의합니다. gradient box를 참조하는 대신, 값은 reference box 기준으로 해석됩니다.

• <position> 인자는 타원의 중심을 정의합니다. 별도로 지정하지 않으면, 생략 시 center가 기본값입니다.

테스트

• ellipse-function-computed.html (실시간 테스트) (소스)
• ellipse-function-invalid.html (실시간 테스트) (소스)
• ellipse-function-valid.html (실시간 테스트) (소스)

polygon()

• <'fill-rule'>은 내부를 결정할 때 사용하는 채우기 규칙을 지정합니다. 생략 시 nonzero가 기본값입니다.

• 선택적으로 round 키워드 뒤에 <length>를 지정하면 다각형 꼭짓점마다 라운딩을 정의합니다. 이 길이는 각 꼭짓점을 기준으로 더 작은 각의 이등분선 위에 중심이 위치하고, 두 변과 접하는 원의 반지름입니다.

  

  어떤 선분의 절반 이상을 라운딩하지 않도록, 각 꼭짓점의 라운딩은 개별적으로 클램프(clamp) 처리되어야 하며, 반지름은 각 꼭짓점 선분에서 tan(angle/2) segment / 2 중 더 작은 값보다 커질 수 없습니다.

  

• 각 <length-percentage> 쌍은 다각형의 꼭짓점을 지정하며, reference box의 왼쪽과 위쪽 가장자리로부터의 수평 및 수직 오프셋입니다.

UA는 마지막 꼭짓점과 첫 번째 꼭짓점을 연결하여 다각형을 닫아야 합니다.

테스트

• polygon-function-computed.html (실시간 테스트) (소스)
• polygon-function-invalid.html (실시간 테스트) (소스)
• polygon-function-valid.html (실시간 테스트) (소스)

path()

• <'fill-rule'>은 내부를 결정할 때 사용하는 채우기 규칙을 지정합니다. 생략 시 nonzero가 기본값이며, 함수가 SVG 셰이프 등에서 fill-rule 속성이 의미가 있는 컨텍스트인 경우에는 생략 값이 해당 속성의 계산값을 사용합니다.

• <string>은 SVG Path 데이터 문자열을 나타냅니다. Path 데이터 문자열이 SVG 1.1의 문법 및 파싱 규칙을 따르지 않거나, 문법을 따르더라도 빈 경로를 정의하는 경우, 전체 path()가 invalid가 됩니다.

  초기 위치는 path 문자열에서 첫 번째 “move to” 인자에 의해 정의됩니다. 초기 방향은 SVG 1.1을 따릅니다.

UA는 path를 암묵적으로 closepath 명령("z" 또는 "Z")으로 닫아야 하며, 문자열에 명시되어 있지 않더라도 닫힌 루프가 필요한 속성(예: shape-outside 및 clip-path)에서는 반드시 닫아야 합니다.

테스트

• path-function-computed.html (실시간 테스트) (소스)
• path-function-invalid.html (실시간 테스트) (소스)
• path-function-valid.html (실시간 테스트) (소스)

shape()

shape() 함수 참고.

테스트

3.1.1. shape() 함수

path() 함수는 SVG 경로 문법을 재사용하여 보다 전문화된 도형 함수보다 임의의 도형을 정의할 수 있게 해주지만, 경로를 하나의 문자열로 작성해야 하며 (예를 들어 var()로 경로를 부분적으로 구성하는 것과 호환되지 않음), SVG에서 유래한 여러 제한점도 함께 물려받게 됩니다. 예를 들어, 암묵적으로 px 단위만 허용하는 것 등이 있습니다.

shape() 함수는 path()에서 사용하는 명령과 대략적으로 동등한 명령 집합을 사용하지만, 보다 표준적인 CSS 문법으로 작성하며, 추가 단위 및 수학 함수 등 전체 CSS 기능을 사용할 수 있습니다. shape()에서 사용되는 명령들은 렌더링 시 동적으로 경로 세그먼트로 변환됩니다. 예를 들어, 렌더된 clip-path를 계산할 때입니다.

이런 점에서 shape()는 path()의 상위 집합입니다. path()는 쉽게 shape()로 변환할 수 있지만, shape()를 다시 path()나 SVG로 변환하려면 CSS 환경(예: 현재 CSS 사용자 정의 변수 값, em 단위의 현재 폰트 크기 등)에 대한 정보가 필요합니다.

<'fill-rule'>은 path()에서 동일한 인자와 동일하게 해석됩니다.

나머지 인자들은 함수가 나타내는 SVG 경로와 동일한 경로 데이터 명령의 목록을 정의합니다.

from <coordinate-pair>는 첫 번째 shape-command의 시작점을 나타냅니다. 경로 데이터 명령 목록에 초기 절대 moveto를 추가합니다.

일련의 <shape-command>들은 추가 경로 데이터 명령을 나타냅니다. 각 명령의 시작점은 이전 명령의 끝점입니다.

<shape-command> = <move-command> | <line-command> | close |
                  <horizontal-line-command> | <vertical-line-command> |
                  <curve-command> | <smooth-command> | <arc-command>

<move-command> = move <command-end-point>
<line-command> = line <command-end-point>
<horizontal-line-command> = hline
        [ to [ <length-percentage> | left | center | right | x-start | x-end ]
        | by <length-percentage> ]
<vertical-line-command> = vline
        [ to [ <length-percentage> | top | center | bottom | y-start | y-end ]
        | by <length-percentage> ]
<curve-command> = curve
        [ [ to <position> with <control-point> [ / <control-point> ]? ]
        | [ by <coordinate-pair> with <relative-control-point> [ / <relative-control-point> ]? ] ]
<smooth-command> = smooth
        [ [ to <position> [ with <control-point> ]? ]
        | [ by <coordinate-pair> [ with <relative-control-point> ]? ] ]
<arc-command> = arc <command-end-point>
            [ [ of <length-percentage>{1,2} ]
              && <arc-sweep>? && <arc-size>? && [rotate <angle>]? ]

<command-end-point> = [ to <position> | by <coordinate-pair> ]
<control-point> = [ <position> | <relative-control-point> ]
<relative-control-point> = <coordinate-pair> [ from [ start | end | origin ] ]?
<coordinate-pair> = <length-percentage>{2}
<arc-sweep> = cw | ccw
<arc-size> = large | small

<coordinate-pair> = <length-percentage>{2}

좌표 쌍을 정의하며, 각각 지정된 기준점에서 오른쪽 및 아래쪽으로의 오프셋을 나타냅니다. 백분율은 reference box의 너비 또는 높이를 기준으로 각각 계산됩니다.

<command-end-point> = [ to <position> | by <coordinate-pair> ]

모든 명령은 "절대" 또는 "상대" 좌표로 지정할 수 있으며, by 또는 to 구성요소에 따라 결정됩니다. to는 해당 명령 내의 <coordinate-pair>들이 reference box의 좌상단 기준으로 상대적임을 나타내며, by는 <coordinate-pair>들이 명령의 시작점을 기준으로 상대적임을 나타냅니다.

<relative-control-point>는 곡선 제어점에 대해 by와 to가 어떻게 해석되는지 정의하며, <horizontal-line-command>와 <vertical-line-command>는 각각 수평 및 수직선에 대해 by와 to가 어떻게 해석되는지 정의합니다.

to가 사용될 때, 좌표는 <position>으로도 지정할 수 있으며, <coordinate-pair> 대신 사용할 수 있습니다.

참고: 두 경우 모두 <percentage> 값은 <coordinate-pair> 내에서 항상 reference box의 크기를 기준으로 계산됩니다.

<move-command> = move <command-end-point>

moveto 명령을 경로 데이터 명령 목록에 추가하며, 끝점은 <coordinate-pair>로 지정됩니다.

이 명령은 아무 것도 그리지 않고, 다음 명령을 위해 "펜을 이동"만 합니다.

참고: 이것은 close 명령을 위한 새로운 서브패스를 시작합니다.

<line-command> = line <command-end-point>

lineto 명령을 경로 데이터 명령 목록에 추가하며, 끝점은 <coordinate-pair>로 지정됩니다.

이 명령은 시작점에서 끝점까지 직선을 그립니다.

<horizontal-line-command> = hline [ to [ <length-percentage> | left | center | right | x-start | x-end ] | by <length-percentage> ]

수평 lineto 명령을 경로 데이터 명령 목록에 추가합니다.

이는 line 명령과 동일하며, <length-percentage>는 <coordinate-pair>의 수평 성분으로 지정됩니다. <position>의 수평 성분을 <length-percentage> 대신 지정하면 (left, center, right, x-start, x-end), 해당 <position>까지 직선을 그리며, <position>의 수직 성분은 시작점과 동일하게 유지됩니다.

<vertical-line-command> = vline [ to [ <length-percentage> | top | center | bottom | y-start | y-end ] | by <length-percentage> ]

수직 lineto 명령을 경로 데이터 명령 목록에 추가합니다.

이는 line 명령과 동일하며, <length-percentage>는 <coordinate-pair>의 수직 성분으로 지정됩니다. <position>의 수직 성분을 지정하면 (top, center, bottom, y-start, y-end) <length-percentage> 대신 사용하면, 해당 <position>까지 직선을 그리며, <position>의 수평 성분은 시작점과 동일하게 유지됩니다.

<curve-command> = curve [ [ to <position> with <control-point> [ / <control-point> ]? ] | [ by <coordinate-pair> with <relative-control-point> [ / <relative-control-point> ]? ] ]

베지어 곡선 명령을 경로 데이터 명령 목록에 추가하며, 끝점은 <position> (to 키워드 뒤), 또는 <coordinate-pair> (by 키워드 뒤)로 지정됩니다.

with 구성요소는 곡선의 제어점을 지정합니다: 하나의 <control-point> 또는 <relative-control-point>가 제공되면 이차 곡선을 지정하며, 두 개의 <control-point> 또는 <relative-control-point>이 제공되면 삼차 곡선을 지정합니다.

<smooth-command> = smooth [ [ to <position> [with <control-point> ]? ] | [ by <coordinate-pair> [ with <relative-control-point> ]? ] ]

부드러운 베지어 곡선 명령을 경로 데이터 명령 목록에 추가하며, 끝점은 <position> (to 키워드 뒤) 또는 <coordinate-pair> (by 키워드 뒤)로 지정됩니다. with 구성요소는 곡선의 제어점을 지정합니다: 생략되면 부드러운 이차 곡선을, 제공되면 부드러운 삼차 곡선을 지정합니다.

참고: smooth 명령은 curve 명령과 동일하며, 첫 번째 제어점은 이전 곡선의 두 번째 제어점을 시작점을 중심으로 반사시킨 위치로 자동 지정합니다. 또는 이전 경로 데이터 명령이 곡선이 아니면 시작점이 됩니다. 이 방식은 이전 명령과 G1 연속성을 보장하여, 곡선이 이전 명령에서 부드럽게 이어지는 것처럼 보이게 하며, 갑작스러운 방향 변화를 방지합니다.

<control-point> = [ <position> | <relative-control-point> ]

이차 또는 삼차 베지어 곡선에 제어점을 제공합니다.

<relative-control-point> = <coordinate-pair> [ from [ start | end | origin ] ]?

이차 또는 삼차 베지어 곡선에 제어점을 제공합니다. from 키워드 뒤에 start, end, origin이 지정되면, 주어진 <coordinate-pair>는 각각 명령의 시작점, 명령의 끝점, reference box 기준으로 상대적입니다. 해당 구성요소가 제공되지 않으면 <coordinate-pair>는 세그먼트의 시작점을 기준으로 상대적입니다.

<arc-command> = arc <command-end-point> [of <length-percentage>{1,2}] && <arc-sweep>? && <arc-size>? && rotate <angle>? ]

타원 호 명령을 경로 데이터 명령 목록에 추가하며, 끝점은 <command-end-point>로 지정됩니다.

of 구성요소는 호가 그려질 타원의 크기를 지정합니다. 첫 번째 <length-percentage>는 타원의 수평 반지름을, 두 번째는 수직 반지름을 나타냅니다. <coordinate-pair>와 마찬가지로, <percentage> 값은 reference box의 너비 또는 높이에 맞춰 계산됩니다.

하나의 <length-percentage>만 제공되는 경우, 두 반지름 모두 해당 값이 사용됩니다. 이때 <percentage> 값은 direction-agnostic size를 기준으로 계산되며, reference box의 크기와 유사합니다 (circle() 함수 참고).

SVG에서는 타원 반지름의 오류 처리가 있습니다:

• 끝점이 시작점과 동일한 경우, 명령은 아무 것도 하지 않습니다.

• 반지름 중 하나가 0이면, 명령은 끝점까지 <line-command>와 동일합니다.

• 반지름 중 하나가 음수이면, 절대값이 사용됩니다.

• 반지름이 회전된 <angle> 이후 시작점과 끝점을 모두 교차하도록 충분히 크지 않으면, 타원이 교차할 수 있을 때까지 균일하게 확대됩니다.

지정된 반지름에 의해 묘사된 타원은 기본적으로 축에 정렬되어 있지만, <angle>을 지정하여 회전할 수 있습니다. rotate() 변환 함수와 비슷하게, 양수 각도는 시계 방향 회전을, 음수 각도는 반시계 방향 회전을 의미합니다. 생략 시 기본값은 0deg입니다.

끝점, 반지름, 각도가 함께 주어지면, 보통 두 개의 타원과 각 타원에서 두 방향으로 그릴 수 있으므로 총 네 개의 호가 가능합니다. <arc-sweep>와 <arc-size> 구성요소가 원하는 호를 지정합니다:

• <arc-sweep>은 cw 또는 ccw일 수 있으며, 각각 중심에서 타원을 따라 시계 방향 또는 반시계 방향으로 그려지는 호를 지정합니다. 생략 시 기본값은 ccw입니다.

  참고: SVG arc 명령에서 cw는 sweep flag 값 1에, ccw는 값 0에 해당합니다.

• <arc-size>는 large 또는 small일 수 있으며, 두 개의 가능 호 중 더 크거나 더 작은 호를 각각 선택합니다. 생략 시 기본값은 small입니다.

  참고: SVG arc 명령에서 large는 large flag 값 1에, small은 값 0에 해당합니다.

  참고: 시작점과 끝점이 타원의 정확히 반대쪽에 있을 경우, 두 개의 호 모두 크기가 같고, 타원도 하나뿐입니다. 이 경우 <arc-sweep>가 두 개의 호 중 어느 것을 선택할지 구분하며, <arc-size>는 영향이 없습니다.

close

closepath 명령을 경로 데이터 명령 목록에 추가합니다.

참고: 이는 line 명령과 유사하며, 끝점이 서브패스의 시작점으로 지정됩니다. 원시 shape를 지정할 때는 동일하지만, 경로에 테두리를 적용할 경우, close 명령의 끝점이 서브패스 시작점과 부드럽게 연결되어, 선의 연결과 끝부분의 렌더링 방식에 영향을 줍니다.

3.1.1.1. shape()를 사용하여 반응형, 매개변수화된 말풍선 만들기

.bubble { clip-path: path("m 5 0 H 95 Q 100 0 100 5 V 92 Q 100 97 95 97 H 70 l -2 3 l -2 -3 H 5 Q 0 97 0 92 V 5 Q 0 0 5 0") };

.bubble { clip-path: shape(  from 5% 0%,
              hline to 95%,
              curve to 100% 5% with 100% 0%,
              vline to 92%,
              curve to 95% 97% with 100% 97%,
              hline to 70%,
              line by -2% 3%,
              line by -2% -3%,
              hline to 5%,
              curve to 0% 92% with 0% 97%,
              vline to 5%,
              curve to 5% 0% with 0% 0%); }

.bubble { clip-path: shape(  from 5px 0%,
              hline to calc(100% - 5px),
              curve to 100% 5px with 100% 0%,
              vline to calc(100% - 8px),
              curve to calc(100% - 5px) calc(100% - 3px) with 100% calc(100% - 3px),
              hline to 70%,
              line by -2px 3px,
              line by -2px -3px,
              hline to 5px,
              curve to 0% calc(100% - 8px) with 0% calc(100% - 3px),
              vline to 5px,
              curve to 5px 0% with 0% 0%); }

.bubble { clip-path: shape(from 5px 0,
              hline to calc(100% - 5px),
              curve to right 5px with right top,
              vline to calc(100% - 8px),
              curve to calc(100% - 5px) calc(100% - 3px) with right calc(100% - 3px),
              hline to 70%,
              line by -2px 3px,
              line by -2px -3px,
              hline to 5px,
              curve to left calc(100% - 8px) with left calc(100% - 3px),
              vline to 5px,
              curve to 5px top with left top); }

:root {
  --radius: 5px;
  --arrow-length: 3px;
  --arrow-half-width: 2px;
  --arrow-position: 70%;
  --arrow-bottom-offset: calc(100% - var(--radius) - var(--arrow-length));
}

.bubble {
  animation: bubble 100ms;
  clip-path: shape(from var(---radius) top,
    hline to calc(100% - var(---radius)),
    curve to right var(---radius) with right top,
    vline to var(---arrow-bottom-offset),
    curve to calc(100% - var(---radius)) calc(100% - var(---arrow-length))
              with right calc(100% - var(---arrow-length)),
    hline to var(---arrow-position),
    line by var(---arrow-half-width) var(---arrow-length),
    line by var(---arrow-half-width) calc(0px - var(---arrow-length)),
    hline to var(---radius),
    curve to left var(---arrow-bottom-offset) with left calc(100% - var(---arrow-length)),
    vline to var(---radius),
    curve to var(---radius) top with left top); }

3.1.1.2. shape() 함수의 보간(Interpolation)

shape()와 path() 함수는 경로 데이터 명령 목록의 길이가 같고, 명령의 순서가 같으며, path() 함수의 첫 번째 명령이 shape() 함수의 초기 <coordinate-pair>와 보간될 때, 서로 보간(interpolated)될 수 있습니다.

참고: path() 함수의 첫 번째 명령은 반드시 move 명령입니다. 자세한 내용은 moveTo를 참조하세요.

시작 값과 끝 값이 모두 path() 함수일 경우, 보간 결과는 path() 함수가 됩니다. 그렇지 않은 경우에는 shape() 함수가 됩니다. 두 경우 모두, 보간 결과는 동일한 경로 데이터 명령 목록을 나타내야 하며, 각 명령의 수치 성분은 시작 목록과 끝 목록의 대응 성분 간에서 보간됩니다.

이때, 명령은 같은 명령어 키워드를 사용하고, 동일한 <by-to> 키워드를 사용할 때 "같은 것"으로 간주합니다. curve와 smooth의 경우, 제어점의 개수도 같아야 합니다.

arc 명령에서 시작과 끝의 <arc-sweep>이 다르면, 보간 결과는 0과 1 사이의 진행 값에 대해 항상 cw를 사용합니다. <arc-size> 키워드가 다르면, 보간 결과는 0과 1 사이의 진행 값에 대해 항상 large를 사용합니다.

참고: arc 키워드의 보간 규칙은 기존 SVG path 보간 규칙과 일치하도록 설계되었습니다.

3.2. 기본 도형의 계산된 값

<basic-shape> 함수의 값은 아래 예외를 제외하고 명시된 대로 계산됩니다:

• 생략된 값은 포함되며 기본값으로 계산됩니다.
• <position> 값은 circle() 또는 ellipse()에서 좌상단 원점 기준의 오프셋 쌍(수평, 수직)으로 계산되며, 각각 <length-percentage>로 표시됩니다.
• <'border-radius'> 값은 <basic-shape-rect> 함수에서 8개의 <length-percentage> 값으로 확장된 목록으로 계산됩니다.
• 모든 <basic-shape-rect> 함수는 동등한 inset() 함수로 계산됩니다.

  참고: rect(t r b l)일 경우, 동등한 함수는 inset(t calc(100% - r) calc(100% - b) l)입니다. xywh(x y w h)일 경우, 동등한 함수는 inset(y calc(100% - x - w) calc(100% - y - h) x)입니다.

3.3. 기본 도형의 직렬화

<basic-shape> 함수들을 직렬화하려면, 각 함수의 별도 문법에 따라 직렬화하며, 문법에 작성된 순서대로 직렬화합니다. 공백으로 구분된 토큰은 하나의 공백으로 연결하고, 직렬화된 쉼표 뒤에는 하나의 공백을 붙입니다. 계산된 값을 직렬화할 때, 구성 값들은 계산된 값이며, 의미에 변화가 없다면 생략할 수 있습니다.

3.4. 기본 도형의 보간

한 기본 도형에서 다른 도형으로 보간할 때, 아래의 규칙을 적용합니다. shape 함수의 값은 계산된 값 기준으로 보간됩니다. 목록 값들은 가능하다면 길이, 백분율, calc 단위로 보간됩니다. 목록 값이 해당 타입이 아니지만 동일하다면 (예: 두 목록에서 같은 위치에 nonzero가 있을 경우) 해당 값도 보간됩니다.

• 두 도형 모두 동일한 reference box를 사용해야 합니다.
• 두 도형이 같은 타입이고, 그 타입이 ellipse() 또는 circle()이며, 반지름이 <length-percentage>로 지정된 경우(키워드가 아닌 경우), shape 함수 내 각 값마다 보간합니다.
• 두 도형이 inset() 타입이면, shape 함수 내 각 값마다 보간합니다.
• 두 도형이 polygon() 타입이고, 두 polygon이 꼭짓점 개수가 같고, 동일한 <'fill-rule'>을 사용하면, shape 함수 내 각 값마다 보간합니다.
• 그 외의 경우에는 보간이 지정되지 않습니다.

4. 이미지로부터 도형 만들기

도형을 정의하는 또 다른 방법은 소스 <image>를 지정하여, 알파 채널을 이용해 도형을 계산하는 것입니다. 도형은 경로 또는 경로 집합으로 계산되며, 지정된 이미지의 불투명도가 shape-image-threshold 값보다 큰 영역을 감싸는 형태가 됩니다. 지정된 임계값보다 높은 알파 값을 가진 픽셀이 전혀 없으면, 빈 float 영역이 생성되어 래핑에 영향을 주지 않습니다. shape-image-threshold가 지정되지 않은 경우, 초기 값은 0.0으로 간주됩니다.

이미지는 대체(replaced) 요소처럼 크기와 위치가 지정되며, 지정된 너비와 높이가 요소의 사용된 콘텐츠 박스 크기와 동일하게 맞춰집니다.

애니메이션 래스터 이미지 포맷(예: GIF)의 경우, 애니메이션 시퀀스의 첫 번째 프레임이 사용됩니다.

이미지가 단락 왼쪽에 플로팅되어 있습니다. 이미지는 투명 배경 위에 3D 버전의 CSS 로고를 보여줍니다. 로고는 알파 채널로 그림자가 있습니다.

이미지는 float area를 shape-outside 속성으로 정의합니다.

  <p>
    <img id="CSSlogo" src="CSS-logo1s.png"/>
    blah blah blah blah...
  </p>

  <style>
    #CSSlogo {
      float: left;
      shape-outside: attr(src url);
      shape-image-threshold: 0.1;
    }
  </style>

shape-outside 속성은 img 요소의 src 속성에서 url을 재사용합니다.

이미지를 표시하면서 float area에는 다른 이미지를 사용할 수도 있습니다.

아래 그림에서, 알파 채널 임계값은 CSS 로고의 점선으로 표시된 경계로 나타납니다.

단락의 줄이 어디서 시작하는지 3가지 방법으로 조정할 수 있습니다:

1. 이미지의 알파 채널 수정
2. shape-image-threshold 속성 값 변경
3. shape-margin 속성 값 변경(예시 8 참고)

5. 박스 값으로부터 도형 만들기

도형은 CSS 박스 모델의 엣지를 참조하여 정의할 수 있습니다. 이러한 엣지에는 사용된 border-radius 값에서 유도된 border-radius 곡률 [CSS3BG] 등이 포함됩니다. <shape-box> 값은 <visual-box> 값을 확장하여 margin-box를 포함합니다. 그 문법은 다음과 같습니다:

<shape-box> = <visual-box> | margin-box

각 값의 정의는 다음과 같습니다:

margin-box 값은 외부 마진 엣지에 의해 둘러싸인 도형을 정의합니다. 이 도형의 코너 반지름은 해당 border-radius 및 margin 값에 의해 결정됩니다. border-radius/margin의 비율이 1 이상이거나, margin이 음수 또는 0이면, margin-box의 코너 반지름은 max(border-radius + margin, 0)입니다. border-radius/margin의 비율이 1 미만이고, margin이 양수인 경우, margin-box의 코너 반지름은 border-radius + margin * (1 + (ratio-1)^3)입니다.

border-box 값은 외부 보더 엣지에 의해 둘러싸인 도형을 정의합니다. 이 도형은 보더 외부에 대한 일반적인 border-radius 모양 규칙을 모두 따릅니다.

padding-box 값은 외부 패딩 엣지에 의해 둘러싸인 도형을 정의합니다. 이 도형은 보더 내부에 대한 일반적인 border-radius 모양 규칙을 모두 따릅니다.

content-box 값은 외부 콘텐츠 엣지에 의해 둘러싸인 도형을 정의합니다. 이 박스의 각 코너 반지름은 0과 border-radius - border-width - padding 중 더 큰 값입니다.

아래 100px 정사각형에 10px 패딩, 보더, 마진이 있을 때, 박스 값은 다음 도형을 정의합니다:

• margin-box: 모든 노란 픽셀을 포함하는 도형
• border-box: 모든 검정 픽셀을 포함하는 도형
• padding-box: 모든 보라색 픽셀을 포함하는 도형
• content-box: 모든 파란 픽셀을 포함하는 도형

그리고 동일한 100px 정사각형에 대해, 다음과 같은 border, padding, margin 속성을 사용한 좀 더 복잡한 예시에도 동일한 정의가 적용됩니다:

  border-radius: 20px 20px 20px 40px;
  border-width: 30px 10px 20px 10px;
  padding: 10px 20px 10px 10px;
  margin: 20px 10px 10px 10px;

일반적인 float 래핑과 margin-box 값으로 정의된 도형을 따라 래핑하는 것의 차이는 margin-box 도형이 코너 모양을 포함한다는 점입니다. 10px 패딩, 보더, 마진을 가진 100px 정사각형에 border-radius가 60px인 경우를 생각해봅시다. 이를 왼쪽 float로 만들면, 콘텐츠는 일반적으로 다음과 같이 래핑됩니다:

float에 margin-box 도형을 추가하면, 콘텐츠가 둥근 margin-box 코너를 따라 래핑됩니다.

  shape-outside: margin-box;

6. 도형 선언

도형은 shape-outside 속성으로 선언하며, shape-margin 속성으로 수정할 수 있습니다. shape-outside와 shape-margin 속성에 의해 정의된 도형은 float 요소의 float area의 기하학적 구조를 변경합니다.

6.1. Float 영역 도형: shape-outside 속성

이 속성의 값의 의미는 다음과 같습니다:

none

float area에 아무런 영향을 주지 않습니다.

<shape-box>

이 값들 중 하나만 지정되면, 도형은 margin-box, border-box, padding-box 또는 content-box 중 하나의 박스를 기반으로 계산됩니다. 각 박스는 border-radius의 곡률을 포함하여 정의되며, background-clip과 유사하게 동작합니다 [CSS3BG].

<basic-shape>

도형은 <basic-shape> 함수 중 하나를 기반으로 계산됩니다. <shape-box>가 함께 제공되면, 이는 reference box를 정의합니다. <shape-box>가 제공되지 않으면, reference box는 기본적으로 margin-box로 지정됩니다.

<image>

도형은 지정된 <image>의 알파 채널을 기반으로 추출 및 계산됩니다. shape-image-threshold에 의해 정의됩니다.

사용자 에이전트는 CORS 프로토콜 [FETCH] 명세에 따라 shape-outside 값의 모든 URL을 처리해야 합니다. 가져올 때, 사용자 에이전트는 "Anonymous" 모드를 사용해야 하며, referrer 소스를 스타일시트의 URL로 설정하고, origin을 포함 문서의 URL로 지정해야 합니다. 네트워크 오류로 인해 유효한 대체 이미지가 없으면, none 값이 지정된 것과 동일한 효과를 가집니다.

6.2. 이미지 픽셀 선택: shape-image-threshold 속성

shape-image-threshold는 이미지로 도형을 추출할 때 사용되는 알파 채널 임계값을 정의합니다. 값이 0.5인 경우, 도형은 불투명도가 50%를 넘는 모든 픽셀을 감싸게 됩니다.

이 속성의 값의 의미는 다음과 같습니다:

<number>

이미지를 통해 도형을 추출할 때 사용되는 임계값을 설정합니다. 도형은 알파 값이 임계값을 초과하는 픽셀에 의해 정의됩니다. 임계값이 0.0(완전 투명)에서 1.0(완전 불투명) 범위를 벗어나면, 해당 범위로 제한되어 적용됩니다.

참고: 앞으로의 CSS Shapes 버전에서는 알파 데이터 대신 이미지의 휘도(luminance) 데이터를 사용할 수 있는 스위치가 정의될 수 있습니다. 그 경우 shape-image-threshold는 스위치 상태에 따라 알파 또는 휘도에 임계값을 적용할 수 있도록 확장될 예정입니다.

6.3. 도형 확장: shape-margin 속성

shape-margin 속성은 shape-outside에 마진을 더합니다. 이는 가장 작은 외곽선(수축 포장 관점에서) 즉, 기본 도형 위 한 점에서 수직 방향으로 shape-margin 거리만큼 바깥쪽으로 포함하는 모든 점을 커버하는 새로운 도형을 정의합니다. 여기에는 기본 도형의 어떤 엣지나 선 부분도 포함됩니다. 수직선이 정의되지 않는 점(예: 뾰족한 꼭짓점이나 선 끝)에서는 해당 점을 중심으로 반지름이 shape-margin인 원 위의 모든 점을 포함합니다.

shape-outside가 적용되어 생성된 새로운 도형이 float area를 결정하며, 어떤 줄 감싸기(wrap) 결정을 내리기 전에 반드시 생성되어야 합니다.

이 속성은 0 이상의 값만 허용합니다.

<length-percentage [0,∞]>

도형의 margin을 지정된 값으로 설정합니다.

참고: shape-margin을 추가해도 float area가 float의 margin-box를 벗어날 수 없습니다. 클리핑을 방지하려면 shape-margin과 함께 추가 margin을 적용해야 할 수도 있습니다.

  .float {
      width: 100px;
      height: 100px;
    shape-outside: polygon(10px 10px, 90px 50px, 40px 50px, 90px 90px, 10px 90px);
    shape-margin: 10px;
  }

예시 6의 CSS 로고에 shape-margin을 추가하면, 도형 주위로 줄 감싸기가 더 짧아집니다. 이미지의 알파 채널이 이미지의 오른쪽 엣지까지 닿아 있는 경우 도형이 margin-box에 의해 잘리지 않도록 추가적인 margin-right를 적용해야 합니다.

  #CSSlogo {
    shape-margin: 35px;
    margin-right: 35px;
  }

7. 개인정보 보호 고려사항

이 명세에 대해 개인정보 보호와 관련된 이슈는 제기되지 않았습니다.

8. 보안 고려사항

<image> 값이 shape-outside에 사용될 때, 이미지 데이터가 새로운 방식으로 노출될 수 있으므로, CORS 승인이 된 이미지에 한해 사용이 제한됩니다.

감사의 글

이 명세는 다음 분들의 의견과 참여 덕분에 가능했습니다: Tab Atkins Jr., Amelia Bellamy-Royds, Oriol Brufau, Andrei Bucur, Alexandru Chiculita, Boris Chiou, Emilio Cobos Álvarez, Elika Etemad, Arron Eicholz, Sylvain Galineau, Daniel Glazman, Arno Gourdol, Zoltan Horvath, Chris Jones, Bem Jones-Bey, Ian Kilpatrick, Guillaume Lebas, Ting-Yu Lin, Eric Meyer, Marcus Mielke, Alex Mogilevsky, Hans Muller, Mihnea Ovidenie, Virgil Palanciuc, Noam Rosenthal, Robert Sanderson, Dirk Schulze, Jen Simmons, Peter Sorotokin, Bear Travis, Lea Verou, Eugene Veselov, Brad Werth, Stephen Zilles 그리고 CSS 작업 그룹 멤버 여러분.

변경 기록

2022년 11월 15일 이후 (링크)

• Web Platform Test 주석 추가
• SVG 도형의 path()에서 fill-rule 기본값 변경
• shape-margin과 float area 상호작용 명확화
• polygon 둥글림 예시 추가
• 이슈 #9728의 property 설명에 모든 기본 도형 포함
• polygon 꼭짓점 둥글림 시작 추가
• 이슈 #8311 관련 shape-image-threshold 값에 opacity-value(속성값) 적용
• opacity 속성으로 <alpha-value> 대체
• 이슈 #5160 관련 shape-outside가 initial letter box에도 적용됨을 명확히 함
• 이슈 #824 관련 ellipse()/circle() 정의를 Images의 <radial-size>로 재정의
• Motion 등 기타 명세가 position 기본값을 재정의할 수 있음 명확화
• 이슈 #8695 관련 shape serialization 섹션, 예시 수정
• 이슈 #9053 관련 xywh() 계산값 수정
• PR #9650에서 암시적 쉼표 옵션 추가로 문법 재작성
• PR #9505에서 <*-box> 정의 정리
• property 정의에 range 표기 추가
• 이슈 #9843 관련 polygon() 꼭짓점 둥글림 추가
• <basic-shape> 관련 이슈 #9728에 shape-outside 설명 업데이트
• 이슈 #2949 관련 shape-margin이 float area에 미치는 영향 명확화
• 이슈 #3468 관련 SVG 도형의 fill-rule 기본 처리 추가
• 'shape()'를 레벨 2에서 이동

2014년 3월 20일 이후 (링크)

• shape-margin 계산값 명확화
• 이슈 #402 관련 기본 position 값 직렬화 명확화
• 이슈 #850 관련 빈 원, 타원 처리 명확화
• 첫 예시에서 div 대신 이미지로 교체
• 마지막 직렬화 예시에 0px 추가
• 박스 모델 참조를 CSS 2에서 CSS Box Model 3으로 업데이트
• propdef 테이블의 Computed Value 및 Animation Type 업데이트
• 이슈 #4042 관련 shape-outside 속성의 계산값 명확화
• 이슈 #4102 관련 shape-image-threshold가 퍼센트 값도 허용함 명확화
• path()를 레벨 2에서 되돌림
• 이슈 #675 관련 margin-box에 음수 margin 처리 추가
• 이슈 #2301 관련 position 값 특수 직렬화 제거
• shape-margin 예시 명확화 추가
• 이슈 #675 관련 margin=0 케이스 추가
• 이슈 #2375 관련 퇴화 도형 규칙을 shape edge 사용으로 변경
• path()가 잘못된 문자열이면 invalid가 됨 명확화, 이슈 #392
• inset rectangles 정의 재작성, auto 값 및 예시 추가
• basic shape rect 함수의 계산값 명확화
• 마크업 정리, range 표기 및 용어 내보내기 등 개선
• 개인정보 및 보안 고려사항 분리

2014년 2월 11일 이후 (링크)

• 첫 예시에서 div를 이미지로 교체
• 마지막 직렬화 예시에 0px 추가

2013년 12월 3일 이후 (링크)

• 기본 도형의 계산값 및 직렬화 업데이트
• margin-box 예시 추가
• shape-outside의 auto를 none으로 변경
• box 재정의 대신 shape-box 정의
• 이미지로부터 추출한 도형이 둘 이상의 경로를 만들 수 있음 명확화

2013년 6월 20일 이후 (링크)

• 박스 값 기반 도형 섹션 추가
• 기본 도형 보간 업데이트
• 음수 inset 허용, 음수 반지름 불허
• relevant를 reference로 변경
• box-sizing 의존성 제거, 관련 박스 키워드 추가
• circle(), ellipse()를 radial gradient 문법으로 변경
• rectangle()을 레벨 2로 연기
• 이미지 기반 도형 크기 및 위치 명확화
• inset-rectangle()을 inset()으로 변경
• shape-image-threshold가 luminance에도 적용될 수 있도록 미래 대비
• shape-outside URL에 CORS fetch 적용
• shape-outside 값을 <uri>에서 <image>로 변경
• 'percentages based on auto-sizing resolve to 0' 삭제
• shape-image-threshold 초기값을 0.0으로 변경
• float 위치가 shape-outside에 영향을 받지 않도록 변경
• float의 margin-box를 벗어나지 않도록 float의 도형을 클리핑

2012년 5월 3일 이후 (링크)

• SVG 요소 기반 도형은 이후 Shapes 레벨로 연기
• shape-inside는 이후 Shapes 레벨로 연기
• exclusions를 shapes에서 분리하여 별도 모듈로
• basic shapes에 inset-rectangle() 추가
• shape-inside overflow 다이어그램을 exclusion 동작으로 변경
• shape-inside가 래핑 컨텍스트에 기여하도록 변경
• exclusion 엣지를 래핑 콘텐츠의 writing mode에 상대적으로 정의
• start, end, before, after 일관성 있게 사용
• 기본 도형에 보간 추가
• box-sizing이 지정된 박스에 기본 도형 적용
• shape-inside의 overflow 동작 추가
• wrap-flow:minimum 추가
• 처리 모델 명확화
• wrap-margin과 wrap-padding을 shape-margin, shape-padding으로 변경
• wrap 약어 제거

2011년 12월 13일 이후 (링크)

• 처리 모델 명확화
• float와의 상호작용 명확화
• exclusion 요소가 새로운 block formatting context를 형성함을 명확화