diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:48:24 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:48:24 +0100 |
commit | ee778d6eea54935fd05022e0ba8c49456003381a (patch) | |
tree | 151a4cef804d8823cc8fc753b8edc693b7078241 /files/ko/web/svg/tutorial/기본_도형 | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-ee778d6eea54935fd05022e0ba8c49456003381a.tar.gz translated-content-ee778d6eea54935fd05022e0ba8c49456003381a.tar.bz2 translated-content-ee778d6eea54935fd05022e0ba8c49456003381a.zip |
unslug ko: move
Diffstat (limited to 'files/ko/web/svg/tutorial/기본_도형')
-rw-r--r-- | files/ko/web/svg/tutorial/기본_도형/index.html | 141 |
1 files changed, 0 insertions, 141 deletions
diff --git a/files/ko/web/svg/tutorial/기본_도형/index.html b/files/ko/web/svg/tutorial/기본_도형/index.html deleted file mode 100644 index 8169e4c890..0000000000 --- a/files/ko/web/svg/tutorial/기본_도형/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: 기본 도형 -slug: Web/SVG/Tutorial/기본_도형 -translation_of: Web/SVG/Tutorial/Basic_Shapes ---- -<p>{{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}</p> - -<p>SVG 드로잉에는 몇 가지 기본 도형들이 있다. 도형들의 목적은 이름에서 명백하게 알 수 있다. 도형들의 위치와 크기를 지정하는 몇몇 속성들은 주어지지만, 여기에서 다뤄지지 않는 다른 속성들과 함께 더 정확하고 완전한 설명이 있는 레퍼런스를 첨부해 두겠다. 그러나, 대부분의 SVG 문서에서 사용되기 때문에 몇 가지 소개를 해줘야한다.</p> - -<h2 id="Basic_shapes" name="Basic_shapes">기본적인 도형들</h2> - -<p>도형을 삽입하기 위해서는 당신은 문서안에 요소를 만들어야 한다. 서로다른 요소들은 다른 모양에 해당하며, 서로 다른 속성들을 사용하여 해당 모양의 크기와 위치를 나타낸다. 일부는 다른 모양으로 생성 될 수 있다는 점에서 약간 중복되지만, 사용자의 편의를 위해 SVG 문서를 가능한 짧고 가독성있게 유지하기 위해서 모두 제공된다. 모든 기본 도형은 오른쪽 이미지에 표시된다. 기본 도형을 생성하는 코드는 다음과 같다:</p> - -<p><img alt="" class="internal" src="/@api/deki/files/359/=Shapes.png" style="float: right;"></p> - -<pre class="brush:xml"><?xml version="1.0" standalone="no"?> -<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg"> - - <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> - <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> - - <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/> - <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/> - - <line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/> - <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145" - stroke="orange" fill="transparent" stroke-width="5"/> - - <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180" - stroke="green" fill="transparent" stroke-width="5"/> - - <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/> -</svg></pre> - -<div class="note"><strong>Note:</strong> <code>stroke</code>, <code>stroke-width</code> 그리고 <code>fill</code> 속성들은 튜토리얼 뒤쪽에서 설명한다.</div> - -<h3 id="Rectangles" name="Rectangles">Rectangles 사각형</h3> - -<p><a href="/en-US/Web/SVG/Element/rect" title="en-US/Web/SVG/Element/rect">rect</a> 요소는 당신이 생각하는 것과 일치하며 화면에 사각형을 그린다. 여기에는 화면상에서 직사각형의 위치와 모양을 제어하는 6가지 기본 속성만 있다. 앞서 보여준 이미지는 두 개의 rect 요소를 보여주며 약간 중복된다. 오른쪽에 있는 이미지는 rx 와 ry 속성이 설정되어 있어서 모서리가 둥글다. rx 와 ry 가 설정되지 않은 경우에는 기본값 0으로 들어간다.</p> - -<pre class="brush:xml"><rect x="10" y="10" width="30" height="30"/> -<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/></pre> - -<dl> - <dt>x</dt> - <dd>사각형의 좌측 상단의 x 값을 의미한다.</dd> - <dt>y</dt> - <dd>사각형의 좌측 상단의 y 값을 의미한다.</dd> - <dt>width</dt> - <dd>사각형의 폭을 나타낸다.</dd> - <dt>height</dt> - <dd>사각형의 높이를 나타낸다. </dd> - <dt>rx</dt> - <dd>사각형의 둥근 꼭짓점의 x 방향으로의 반지름이다.</dd> - <dt>ry</dt> - <dd>사각형의 둥근 꼭짓점의 y 방향으로의 반지름이다.</dd> -</dl> - -<h3 id="Circle" name="Circle">Circle 원</h3> - -<p>당신이 추측한 것 처럼, <a href="/en-US/Web/SVG/Element/circle" title="en-US/Web/SVG/Element/circle">circle</a> 요소는 화면에 원을 그린다. circle 요소에 실제로 적용할 수 있는 속성은 세 가지 뿐이다.</p> - -<pre class="brush:xml;gutter:false;"><circle cx="25" cy="75" r="20"/></pre> - -<dl> - <dt>r</dt> - <dd>원의 반지름을 의미한다.</dd> - <dt>cx</dt> - <dd>원의 중심 중 x 값을 의미한다.</dd> - <dt>cy</dt> - <dd>원의 중심 중 y 값을 의미한다.</dd> -</dl> - -<h3 id="Ellipse" name="Ellipse">Ellipse 타원</h3> - -<p><a href="/en-US/Web/SVG/Element/ellipse" title="en-US/Web/SVG/Element/ellipse">Ellipse</a>s은 원의 x와 y 반경 (수학자들은 장반경, 단반경 이라고 함)을 개별적으로 확장 할 수 있는 circle 요소의 좀 더 일반적인 형태이다.</p> - -<pre class="brush:xml;gutter:false;"><ellipse cx="75" cy="75" rx="20" ry="5"/></pre> - -<dl> - <dt>rx</dt> - <dd>타원의 x 방향으로의 반지름의 길이를 의미한다.</dd> - <dt>ry</dt> - <dd>타원의 y 방향으로의 반지름의 길이를 의미한다.</dd> - <dt>cx</dt> - <dd>타원의 중심 중 x 값을 의미한다.</dd> - <dt>cy</dt> - <dd>타원의 중심 중 y 값을 의미한다.</dd> -</dl> - -<h3 id="Line" name="Line">Line 선</h3> - -<p><a href="/en-US/Web/SVG/Element/line" title="en-US/Web/SVG/Element/line">Line</a>s은 단지 직선이다. line 요소는 선의 시작과 끝 지점을 지정하는 두 점을 속성으로 갖는다.</p> - -<pre class="brush:xml;gutter:false;"><line x1="10" x2="50" y1="110" y2="150"/></pre> - -<dl> - <dt>x1</dt> - <dd>점 1의 x 값이다.</dd> - <dt>y1</dt> - <dd>점 1의 y 값이다.</dd> - <dt>x2 </dt> - <dd>점 2의 x 값이다.</dd> - <dt>y2</dt> - <dd>점 2의 y 값이다.</dd> -</dl> - -<h3 id="Polyline" name="Polyline">Polyline</h3> - -<p><a href="/en-US/Web/SVG/Element/polyline" title="en-US/Web/SVG/Element/polyline">Polyline</a>s은 연결된 직선들의 그룹이다. 그 목록(직선들)은 꽤 길어질 수 있기 때문에 모든 포인트가 하나의 속성에 포함된다.</p> - -<pre class="brush:xml;gutter:false;"><polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/></pre> - -<dl> - <dt>points</dt> - <dd>포인트들의 목록, 각 숫자는 공백, 쉼표, EOL 또는 줄 바꿈 문자로 구분된다. 각 포인트는 반드시 x 좌표와 y 좌표를 가지고 있어야 한다. 따라서 포인트 목록 (0,0), (1,1) 및 (2,2)는 "0 0, 1 1, 2 2"라고 쓸 수 있다.</dd> -</dl> - -<h3 id="Polygon" name="Polygon">Polygon 다각형</h3> - -<p><a href="/en-US/Web/SVG/Element/polygon" title="en-US/Web/SVG/Element/polygon">Polygon</a>s은 점을 연결하는 직선으로 구성된다는 점에서 polyline과 매우 유사하다. 하지만 다각형의 경우, 자동으로 마지막 포인트로부터 첫 번째 포인트로 직선을 만들어서 닫힌 모양을 만든다. 사각형은 다각형의 하나이므로, 융통성있는 사각형을 필요로 하는 경우 polygon 요소를 사용해서 rect 요소를 만들 수 있다.</p> - -<pre class="brush:xml;gutter:false;"><polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/></pre> - -<dl> - <dt>points</dt> - <dd>포인트들의 목록, 각 숫자는 공백, 쉼표, EOL 또는 줄 바꿈 문자로 구분된다. 각 포인트는 반드시 x 좌표와 y 좌표를 가지고 있어야 한다. 따라서 포인트 목록 (0,0), (1,1) 및 (2,2)는 "0 0, 1 1, 2 2"라고 쓸 수 있다. 그러면 (2,2)에서 (0,0)으로 최종 직선이 그려져서 다각형이 완성된다.</dd> -</dl> - -<h3 id="Path" name="Path">Path</h3> - -<p><a href="/en-US/Web/SVG/Element/path" title="en-US/Web/SVG/Element/path">Path</a> 는 아마 SVG에서 사용할 수 있는 가장 일반적인 형태일 것이다. path 요소를 사용해서 당신은 사각형(둥근 모서리가 있거나 없는), 원, 타원, 폴리라인 및 다각형을 그릴 수 있다. 기본적으로 다른 모든 종류의 모양, 베지에 곡선, 2차원 곡선 등이 가능하다. 그러한 이유로, paths 는 튜토리얼의 <a href="/en-US/Web/SVG/Tutorial/Paths" title="en-US/Web/SVG/Tutorial/Paths">the next section</a> 에 들어가지만, 지금은 모양을 제어하는 데 사용되는 단일 속성이 있음을 알려주겠다.</p> - -<pre class="brush:xml;gutter:false;"><path d="M 20 230 Q 40 205, 50 230 T 90230"/></pre> - -<dl> - <dt>d</dt> - <dd>A list of points and other information about how to draw the path. See the <a href="/en-US/Web/SVG/Tutorial/Paths" title="en-US/Web/SVG/Tutorial/Paths">Paths</a> section for more information.</dd> -</dl> - -<div>{{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}</div> |