1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
|
---
title: <basic-shape>
slug: Web/CSS/basic-shape
tags:
- CSS
- CSS Date Type
- CSS Shapes
- Reference
translation_of: Web/CSS/basic-shape
---
<div>{{CSSRef}}</div>
<p><strong><code><basic-shape></code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 {{cssxref("clip-path")}}, {{cssxref("shape-outside")}}, {{cssxref("offset-path")}} 속성이 사용할 형태를 정의합니다.</p>
<div>{{EmbedInteractiveExample("pages/css/type-basic-shape.html")}}</div>
<h2 id="구문">구문</h2>
<p><code><basic-shape></code> 자료형은 아래의 기본 형태 함수 중 하나를 사용해 정의합니다.</p>
<p>형태를 생성할 때, 형태의 기준 상자는 <code><basic-shape></code> 값을 사용하는 속성이 결정합니다. 형태의 좌표계는 기준 상자의 좌상단을 원점으로 하고, X축은 오른쪽, Y축은 아래쪽으로 나가게 됩니다. 백분율료 표현한 모든 길이는 기준 상자의 크기를 사용해 계산합니다.</p>
<h3 id="형태_함수">형태 함수</h3>
<p>다음의 형태를 지원합니다. 모든 <code><basic-shape></code> 값은 함수형 표기법을 사용하고, 여기서는 <a href="/ko/docs/Web/CSS/Value_definition_syntax">값 정의 구문</a>을 통해 정의합니다.</p>
<dl>
<dt><code><a id="inset()" name="inset()"></a>inset()</code></dt>
<dd>
<pre class="syntaxbox"><code>inset( <shape-arg>{1,4} [round <border-radius>]? )</code></pre>
<p>인셋(inset) 사각형을 정의합니다.</p>
<p>매개변수 네 개를 모두 제공했을 땐 기준 상자의 상, 우, 하, 좌측 모서리에서 각각의 값만큼 안쪽으로 이동하여 인셋 사각형의 모서리를 구성합니다. 매개변수는 여백 단축 속성의 구분을 따르므로 네 모서리를 한 개, 두 개 등의 값만으로 정의할 수 있습니다.</p>
<p>선택적 {{cssxref("border-radius", "<border-radius>")}} 매개변수를 <code>border-radius</code> 단축 속성 구문을 사용해 지정하면 인셋 사각형의 모서리를 둥글게 만들 수 있습니다.</p>
<p>좌우 인셋 각각 75%처럼, 한 축의 인셋 쌍 값의 합이 요소가 차지하는 크기보다 큰 경우 면적 없는 형태를 정의합니다.</p>
<div class="hidden">
<p>For this specification, this results in an empty float area.</p>
</div>
</dd>
<dt><code><a id="circle()" name="circle()"></a>circle()</code></dt>
<dd>
<pre class="syntaxbox"><code><code><code>circle( [<shape-radius>]? [at <position>]? )</code></code></code></pre>
<p><code><shape-radius></code> 매개변수는 원의 반지름 <em>r</em>을 지정합니다. 음수는 유효하지 않습니다. 백분율 값을 사용하면 기준 상자의 너비와 높이를 공식 <code>sqrt(width^2+height^2)/sqrt(2)</code>에 대입한 결과가 최종 값이 됩니다.</p>
<p>{{cssxref("<position>")}} 매개변수는 원의 중심을 지정합니다. 생략할 경우 중앙을 기본값으로 사용합니다.</p>
</dd>
<dt><code><a id="ellipse()" name="ellipse()"></a>ellipse()</code></dt>
<dd>
<pre class="syntaxbox"><code><code><code>ellipse( [<shape-radius>{2}]? [at <position>]? )</code></code></code></pre>
<p><code><shape-radius></code> 매개변수는 타원의 X축, Y축 반지름인 r<sub>x</sub>와 r<sub>y</sub>를 순서대로 지정합니다. 두 값 모두 음수는 유효하지 않습니다. 백분율 값을 사용하면 기준 상자의 너비(r<sub>x</sub>)와 높이(r<sub>y</sub>)를 사용해 계산합니다.</p>
<p>{{cssxref("<position>")}} 매개변수는 타원의 중심을 지정합니다. 생략할 경우 중앙을 기본값으로 사용합니다.</p>
</dd>
<dt><code><a id="polygon()" name="polygon()"></a>polygon()</code></dt>
<dd>
<pre class="syntaxbox"><code>polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )</code></pre>
<p><code><fill-rule></code> represents the <a href="/en-US/docs/Web/SVG/Attribute/fill-rule">filling rule</a> used to determine the interior of the polygon. Possible values are <code>nonzero</code> and <code>evenodd</code>. Default value when omitted is <code>nonzero</code>.</p>
<p>Each pair argument in the list represents <em>x<sub>i</sub></em> and <em>y<sub>i</sub></em> - the x and y axis coordinates of the i<sup>th</sup> vertex of the polygon.</p>
</dd>
<dt><code><a id="path()" name="path()"></a>path()</code></dt>
<dd>
<pre class="syntaxbox"><code>path( [<fill-rule>,]? <string>)</code></pre>
<p>The optional <code><fill-rule></code> represents the <a href="/en-US/docs/Web/SVG/Attribute/fill-rule">filling rule</a> used to determine the interior of the path. Possible values are <code>nonzero</code> and <code>evenodd</code>. Default value when omitted is <code>nonzero</code>.</p>
<p>The required <string> is an <a href="/en-US/docs/SVG/Attribute/d">SVG Path</a> string encompassed in quotes</p>
</dd>
</dl>
<p>The arguments not defined above are defined as follows:</p>
<pre class="syntaxbox"><code><shape-arg> = <length> | <percentage>
<shape-radius> = <length> | <percentage> | closest-side | farthest-side</code></pre>
<p>Defines a radius for a circle or ellipse. If omitted it defaults to <code>closest-side</code>.</p>
<p><code>closest-side</code> uses the length from the center of the shape to the closest side of the reference box. For circles, this is the closest side in any dimension. For ellipses, this is the closest side in the radius dimension.</p>
<p><code>farthest-side</code> uses the length from the center of the shape to the farthest side of the reference box. For circles, this is the farthest side in any dimension. For ellipses, this is the farthest side in the radius dimension.</p>
<h2 id="기본_형태의_계산값">기본 형태의 계산값</h2>
<p>The values in a <code><basic-shape></code> function are computed as specified, with these exceptions:</p>
<ul>
<li>Omitted values are included and compute to their defaults.</li>
<li>A {{cssxref("<position>")}} value in <code>circle()</code> or <code>ellipse()</code> is computed as a pair of offsets (horizontal then vertical) from the top left origin, each given as a combination of an absolute length and a percentage.</li>
<li>A <a href="/en-US/docs/Web/CSS/border-radius"><code><border-radius></code></a> value in <code>inset()</code> is computed as an expanded list of all eight {{cssxref("length")}} or percentage values.</li>
</ul>
<h2 id="기본_형태의_보간법">기본 형태의 보간법</h2>
<p>When animating between one <code><basic-shape></code> and another, the rules below are applied. The values in the shape functions interpolate as a simple list. The list values interpolate as {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, or {{cssxref("calc()")}} where possible. If list values are not one of those types but are identical, those values do interpolate.</p>
<ul>
<li>Both shapes must use the same reference box.</li>
<li>If both shapes are the same type, that type is <code>ellipse()</code> or <code>circle()</code>, and none of the radii use the <code>closest-side</code> or <code>farthest-side</code> keywords, interpolate between each value in the shape functions.</li>
<li>If both shapes are of type <code>inset()</code>, interpolate between each value in the shape functions.</li>
<li>If both shapes are of type <code>polygon()</code>, both polygons have the same number of vertices, and use the same <code><fill-rule></code>, interpolate between each value in the shape functions.</li>
<li>If both shapes are of type <code>path()</code>, both paths strings have the same number and types of path data commands in the same order, interpolate each path data command as real numbers.</li>
<li>In all other cases no interpolation occurs.</li>
</ul>
<h2 id="예제">예제</h2>
<h3 id="Animated_polygon">Animated polygon</h3>
<p>In this example, we use the <a href="/en-US/docs/Web/CSS/@keyframes">@keyframes</a> at-rule to animate a clip path between two polygons. Note that both polygons have the same number of vertices, which is necessary for this type of animation to work.</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><div></div></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">div {
width: 300px;
height: 300px;
background: repeating-linear-gradient(red, orange 50px);
clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
animation: 4s poly infinite alternate ease-in-out;
margin: 10px auto;
}
@keyframes poly {
from {
clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
}
to {
clip-path: polygon(50% 30%, 100% 0%, 70% 50%, 100% 100%, 50% 70%, 0% 100%, 30% 50%, 0% 0%);
}
}</pre>
<h4 id="결과">결과</h4>
<p>{{EmbedLiveSample('Animated_polygon','340', '340')}}</p>
<h2 id="명세">명세</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS Shapes', '#basic-shape-functions', '<basic-shape>') }}</td>
<td>{{ Spec2('CSS Shapes') }}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2>
<p>{{Compat("css.types.basic-shape")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li><code><basic-shape></code>를 사용하는 속성: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}}</li>
<li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Edit Shape Paths in CSS — Firefox Developer Tools</a></li>
</ul>
|
