2025-03-14T13:00:37

2025-03-14 13:00:37 +09:00
parent e6370a4a32
commit db94e7ced9
13 changed files with 2012 additions and 0 deletions
--- a/doc/svg/02_SVG의
+++ b/doc/svg/02_SVG의
@@ -0,0 +1,148 @@
+### SVG의 기본 구조와 주요 요소들
+
+SVG(Scalable Vector Graphics)는 XML 기반의 벡터 그래픽 포맷으로, 웹에서 확장 가능한 그래픽을 표현하는 데 사용됩니다. SVG는 크기를 변경해도 품질이 유지되며, 텍스트로 작성되기 때문에 코드로 직접 편집하거나 스타일링할 수 있는 장점이 있습니다. 아래는 SVG의 기본 구조와 주요 요소들을 예시와 함께 설명한 내용입니다.
+
+#### SVG 기본 구조
+SVG 파일은 `<svg>` 태그로 시작하며, 일반적으로 XML 선언과 함께 작성됩니다. 기본 구조는 다음과 같습니다:
+
+```xml
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
+  <!-- 그래픽 요소들이 여기 들어감 -->
+</svg>
+```
+
+- `width`와 `height`: SVG 캔버스의 크기를 정의합니다.
+- `xmlns`: SVG 네임스페이스를 지정하여 브라우저가 이를 SVG로 인식하게 합니다.
+
+#### 주요 요소들
+1. **`<svg>`**: 최상위 컨테이너로, 그래픽의 캔버스를 정의합니다.
+   ```xml
+   <svg width="100" height="100">
+     <circle cx="50" cy="50" r="40" fill="red" />
+   </svg>
+   ```
+   위 코드는 100x100 크기의 캔버스에 중심이 (50, 50)이고 반지름이 40인 빨간 원을 그립니다.
+
+2. **`<g>`**: 요소들을 그룹화하여 스타일이나 변환을 일괄 적용할 때 사용합니다.
+   ```xml
+   <svg width="200" height="200">
+     <g fill="blue">
+       <rect x="10" y="10" width="50" height="50" />
+       <circle cx="100" cy="100" r="30" />
+     </g>
+   </svg>
+   ```
+   `<g>` 안의 모든 도형에 `fill="blue"`가 적용됩니다.
+
+3. **`<defs>`**: 재사용 가능한 정의(예: 패턴, 그라디언트)를 저장합니다. `<defs>` 안의 요소는 직접 렌더링되지 않습니다.
+   ```xml
+   <svg width="200" height="200">
+     <defs>
+       <linearGradient id="grad1">
+         <stop offset="0%" stop-color="yellow" />
+         <stop offset="100%" stop-color="green" />
+       </linearGradient>
+     </defs>
+     <rect x="10" y="10" width="100" height="100" fill="url(#grad1)" />
+   </svg>
+   ```
+   그라디언트를 정의하고 사각형에 적용했습니다.
+
+4. **`<symbol>`**: 재사용 가능한 그래픽 템플릿을 정의합니다. `<defs>` 안에 사용되며, `<use>`로 호출됩니다.
+   ```xml
+   <svg width="200" height="200">
+     <defs>
+       <symbol id="star">
+         <polygon points="50,10 60,40 90,40 65,60 75,90 50,70 25,90 35,60 10,40 40,40" />
+       </symbol>
+     </defs>
+     <use href="#star" x="0" y="0" fill="gold" />
+   </svg>
+   ```
+   별 모양을 정의하고 재사용합니다.
+
+5. **`<use>`**: `<symbol>`이나 다른 요소를 참조하여 재사용합니다.
+   ```xml
+   <svg width="200" height="200">
+     <defs>
+       <rect id="box" x="0" y="0" width="50" height="50" />
+     </defs>
+     <use href="#box" x="10" y="10" fill="red" />
+     <use href="#box" x="70" y="70" fill="blue" />
+   </svg>
+   ```
+   동일한 사각형을 다른 위치와 색상으로 재사용합니다.
+
+---
+
+### 뷰박스(ViewBox)와 좌표 시스템
+
+#### 뷰박스(ViewBox)
+`viewBox` 속성은 SVG 캔버스의 보이는 영역과 좌표계를 정의합니다. 이는 "min-x, min-y, width, height" 형식으로 지정되며, 캔버스의 크기(`width`, `height`)와 독립적으로 내부 콘텐츠의 배율과 위치를 조정합니다.
+
+```xml
+<svg width="200" height="200" viewBox="0 0 100 100">
+  <circle cx="50" cy="50" r="40" fill="purple" />
+</svg>
+```
+- `viewBox="0 0 100 100"`: 좌표계가 0,0에서 시작해 100x100 단위로 정의됨.
+- 실제 캔버스는 200x200px이지만, `viewBox`에 맞춰 콘텐츠가 확대됩니다.
+
+`viewBox`를 사용하면 확대/축소나 특정 영역 포커싱이 가능합니다:
+```xml
+<svg width="200" height="200" viewBox="25 25 50 50">
+  <circle cx="50" cy="50" r="40" fill="purple" />
+</svg>
+```
+위 예시는 원의 일부만 보이도록 50x50 영역을 확대합니다.
+
+#### 좌표 시스템
+SVG의 좌표계는 왼쪽 위가 (0,0)이며, x는 오른쪽으로, y는 아래로 증가합니다. 단위는 기본적으로 사용자 단위(user units)로, `viewBox`에 따라 상대적으로 해석됩니다.
+
+---
+
+### 기본 도형들
+
+SVG는 다양한 기본 도형을 제공하며, 속성을 통해 크기, 위치, 스타일을 정의합니다.
+
+1. **`<rect>`**: 사각형을 그립니다.
+   - 속성: `x`, `y` (왼쪽 위 좌표), `width`, `height`, `rx`, `ry` (모서리 둥글기)
+   ```xml
+   <rect x="10" y="10" width="100" height="50" rx="10" fill="green" />
+   ```
+
+2. **`<circle>`**: 원을 그립니다.
+   - 속성: `cx`, `cy` (중심 좌표), `r` (반지름)
+   ```xml
+   <circle cx="50" cy="50" r="30" fill="red" />
+   ```
+
+3. **`<ellipse>`**: 타원을 그립니다.
+   - 속성: `cx`, `cy` (중심), `rx`, `ry` (가로/세로 반지름)
+   ```xml
+   <ellipse cx="100" cy="100" rx="50" ry="30" fill="blue" />
+   ```
+
+4. **`<line>`**: 직선을 그립니다.
+   - 속성: `x1`, `y1` (시작점), `x2`, `y2` (끝점)
+   ```xml
+   <line x1="10" y1="10" x2="100" y2="100" stroke="black" stroke-width="2" />
+   ```
+
+5. **`<polyline>`**: 연속된 선분을 그립니다.
+   - 속성: `points` (점들의 좌표 목록)
+   ```xml
+   <polyline points="10,10 50,50 100,20" stroke="orange" fill="none" stroke-width="2" />
+   ```
+
+6. **`<polygon>`**: 다각형을 그립니다. 마지막 점이 첫 점과 자동 연결됩니다.
+   - 속성: `points`
+   ```xml
+   <polygon points="50,10 90,90 10,90" fill="yellow" stroke="black" />
+   ```
+
+---
+
+### 결론
+SVG는 `<svg>`를 기반으로 다양한 요소와 도형을 조합해 그래픽을 생성합니다. `viewBox`를 통해 유연한 크기 조정이 가능하고, 좌표계를 활용해 정밀한 위치 지정이 가능합니다. 위의 기본 도형과 요소들을 조합하면 간단한 아이콘부터 복잡한 일러스트까지 만들 수 있습니다. SVG의 강력함은 코드로 직접 제어할 수 있다는 점에 있으며, CSS나 JavaScript와 결합하면 동적이고 인터랙티브한 그래픽도 구현할 수 있습니다.