diff options
Diffstat (limited to 'files/ko/web/svg/element/rect/index.html')
-rw-r--r-- | files/ko/web/svg/element/rect/index.html | 95 |
1 files changed, 95 insertions, 0 deletions
diff --git a/files/ko/web/svg/element/rect/index.html b/files/ko/web/svg/element/rect/index.html new file mode 100644 index 0000000000..90a3d08d24 --- /dev/null +++ b/files/ko/web/svg/element/rect/index.html @@ -0,0 +1,95 @@ +--- +title: <rect> +slug: Web/SVG/Element/사각형 +translation_of: Web/SVG/Element/rect +--- +<div>{{SVGRef}}</div> + +<p><span style="line-height: 1.5;"><strong><rect></strong> 요소는 SVG 기본 모형이고 코너의 위치와 폭과 높이에 따라 사각형을 만드는데 사용된다.</span> 또한 모서리가 둥근 사각형을 만들 수 있다.</p> + +<div id="Example"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html; highlight[4]"><svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg"> + <!-- Simple rect element --> + <rect x="0" y="0" width="100" height="100" /> + + <!-- Rounded corner rect element --> + <rect x="120" y="0" width="100" height="100" rx="15" ry="15" /> +</svg></pre> + +<p>{{EmbedLiveSample('Example', 100, '100%')}}</p> +</div> + +<h2 id="컨택스트_사용해보기">컨택스트 사용해보기</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">카테고리</th> + <td>기본 도형 요소, 그래픽 요소, 모형 요소</td> + </tr> + <tr> + <th scope="row">허용 된 콘텐츠</th> + <td>Any number of the following elements, in any order:<br> + <a href="/en/SVG/Element#Animation" title="en/SVG/Attribute#Animation">Animation elements</a> »<br> + <a href="/en/SVG/Element#Descriptive" title="en/SVG/Attribute#Descriptive">Descriptive elements</a> »</td> + </tr> + <tr> + <th scope="row">규범 문서</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/shapes.html#RectElement" title="http://www.w3.org/TR/SVG/shapes.html#RectElement">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="Example_2">Example</h2> + +<h3 id="간단한_rect_사용하기">간단한 <code>rect</code> 사용하기</h3> + +<p>» <a href="https://developer.mozilla.org/files/3247/rect-1.svg" title="https://developer.mozilla.org/files/3247/rect-1.svg">rect-1.svg</a></p> + +<h3 id="라운드_코너와_rect_사용하기">라운드 코너와 <span style="font-family: 'Courier New','Andale Mono',monospace; font-weight: inherit; line-height: normal;">rect </span><span style="font-size: 1.7142857142857142rem;">사용하기</span></h3> + +<p>» <a href="https://developer.mozilla.org/files/3248/rect-2.svg" title="https://developer.mozilla.org/files/3248/rect-2.svg">rect-2.svg</a></p> + +<h2 id="속성">속성</h2> + +<h3 id="전역_속성">전역 속성</h3> + +<ul> + <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Core attributes</a> »</li> + <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Presentation attributes</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> + <li>{{ SVGAttr("transform") }}</li> +</ul> + +<h3 id="지정_속성">지정 속성</h3> + +<ul> + <li>{{ SVGAttr("x") }}</li> + <li>{{ SVGAttr("y") }}</li> + <li>{{ SVGAttr("width") }}</li> + <li>{{ SVGAttr("height") }}</li> + <li>{{ SVGAttr("rx") }}</li> + <li>{{ SVGAttr("ry") }}</li> +</ul> + +<h2 id="DOM_Interface">DOM Interface</h2> + +<p>This element implements the <code><a href="/en/DOM/SVGRectElement" title="en/DOM/SVGRectElement">SVGRectElement</a></code> interface.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{Compat("svg.elements.rect")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{ SVGElement("path") }}</li> +</ul> |