aboutsummaryrefslogtreecommitdiff
path: root/files/ko/web/svg/element/rect/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/ko/web/svg/element/rect/index.html')
-rw-r--r--files/ko/web/svg/element/rect/index.html95
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>&lt;rect&gt;</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]">&lt;svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg"&gt;
+ &lt;!-- Simple rect element --&gt;
+ &lt;rect x="0" y="0" width="100" height="100" /&gt;
+
+ &lt;!-- Rounded corner rect element --&gt;
+ &lt;rect x="120" y="0" width="100" height="100" rx="15" ry="15" /&gt;
+&lt;/svg&gt;</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>