recursal/MDN huggingface dataset:
204 No Content
==============

 HTTP **`204 No Content`** 성공 상태 응답 코드는 요청이 성공했으나 클라이언트가
 현재 페이지에서 벗어나지 않아도 된다는 것을 나타냅니다.

 예를 들어, 위키 사이트에 "저장 후 편집 계속" 기능을 구현할 때 사용할 수 있습니다.
 이 경우 `PUT` 요청을 사용하여 페이지를 저장하고 `204 No Content` 응답을 전송하여
 편집기를 다른 페이지로 대체해서는 안 된다는 것을 나타냅니다.

204 응답은 기본적으로 캐시 가능하며, 캐시에서 가져온 응답인 경우 `ETag` 헤더를 포함합니다.

상태
--


```http
204 No Content
```

명세서
---

| Specification |
| --- |
| HTTP Semantics # status.204 |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

호환성 참고사항
--------

* 이 상태코드는 본문 없는 응답을 위한 상태 코드이지만, 서버에서 잘못되게 본문을 포함한 응답을 전달하는 경우가
 존재할 수 있습니다. 이 프로토콜은 사용자 에이전트 다양한 방법으로 처리하는 것을 허용하고 있습니다.
 이 명세에 대한 토론은 여기서 확인할 수 있습니다.
 보통 지속 연결에서 볼 수 있는 문제로, 잘못 포함된 본문이 이후 요청에 대한 별도의 응답을 담고 있을 수 있습니다.
 Apple Safari는 잘못 포함된 모든 데이터를 거부합니다. Google Chrome과 Microsoft Edge는 잘못된 데이터의
 최대 4바이트를 검사한 후, 유효한 별도의 요청을 찾지 못한 경우 폐기합니다. Firefox는 1킬로바이트 이상을 검사합니다.
같이 보기
-----

* HTTP 요청 메서드
503 Service Unavailable
=======================

하이퍼텍스트 전송 프로토콜(HTTP) **`503 Service Unavailable`** 서버 에러 응답 코드는 서버가 요청을 처리할 준비가 되지 않은 것을 의미합니다.

흔하게는 서버가 점검을 위해 다운되거나 과부하 때문에 발생합니다. 이 응답은 일시적인 상황을 위해 사용되어야 하며, `Retry-After` HTTP 헤더는 가능하다면 서비스 복구를 위한 예상 시간을 포함해야 합니다.

**참고:** 이 응답(response)과 함께, 이 문제에 대해 설명하는 사용자 친화적 페이지가 전달되어야 합니다.

503 상태는 종종 일시적인 상황이며 응답은 일반적으로 캐시되지 않아야 하므로, 이 응답과 함께 전달되는 캐싱 관련 헤더들은 주의 깊게 다루어져야 합니다.

상태
--


```http
503 Service Unavailable
```

명세서
---

| Specification |
| --- |
| HTTP Semantics # status.503 |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `Retry-After`
* HTTP/1.1: Status Code Definitions
422 Unprocessable Content
=========================

하이퍼텍스트 전송 프로토콜(HTTP) **`422 Unprocessable Content`** 응답 상태 코드는 서버가 요청 엔티티의 컨텐츠 형식을 이해했고 요청 엔티티의 문법도 올바르지만 요청된 지시를 처리할 수 없음을 나타냅니다.

**경고:** 클라이언트는 요청을 수정하지 않고 동일한 형태로 다시 보내서는 안됩니다.

상태
--


```http
422 Unprocessable Content
```

명세서
---

| Specification |
| --- |
| HTTP Semantics # status.422 |
413 Content Too Large
=====================

HTTP **`413 Content Too Large`** 응답 상태 코드는 요청 엔터티가 서버에 의해 정의된 제한보다 크다는 것을 나타냅니다. 서버는 연결을 닫거나 `Retry-After` 헤더 필드를 반환할 수 있습니다.

RFC 9110 이전에는 이 상태 코드 이름이 **`Payload Too Large`** 였습니다. 이 이름은 아직도 널리 사용되고 있습니다.

상태
--


```http
413 Content Too Large
```

명세서
---

| Specification |
| --- |
| HTTP Semantics # status.413 |

같이 보기
-----

* `Connection`
* `Retry-After`
100 Continue
============

 HTTP **`100 Continue`** 정보 상태 응답 코드는 클라이언트가 서버로 보낸 요청에 문제가 없으니 다음 요청을
 이어서 보내도 된다는 것을 의미합니다. 만약 클라이언트의 작업이 완료되었다면 이 응답은 무시해도 됩니다.

 클라이언트가 서버로 하여금 이를 검토하게 하려면 첫 번째 요청에서 `Expect``: 100-continue`를
 헤더로 보내야 합니다. 이후, 클라이언트는 본문을 보내기 전에 서버가 `100 Continue` 상태 코드로 응답하길 기다려야 합니다.

상태
--


```http
100 Continue
```

명세서
---

| Specification |
| --- |
| HTTP Semantics # status.100 |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `Expect`
* `417` (en-US)
426 Upgrade Required
====================

 HTTP **`426 Upgrade Required`** 클라이언트 에러 응답 코드는 서버가 현재 프로토콜을 사용하여 요청을 처리하는 것은
 거부하지만 클라이언트가 다른 프로토콜로 업그레이드한 후에는 요청을 수행할 의향이 있음을 나타냅니다.

서버는 필요한 하나 이상의 프로토콜을 나타내기 위해 이 응답에 `Upgrade` (en-US) 헤더를 같이 보냅니다.

상태
--


```http
426 Upgrade Required
```

예제
--


```http
HTTP/1.1 426 Upgrade Required
Upgrade: HTTP/2.0
Connection: Upgrade
Content-Length: 53
Content-Type: text/plain
This service requires use of the HTTP/2.0 protocol
```

명세
--

| Specification |
| --- |
| HTTP Semantics # status.426 |

같이 보기
-----

* `Upgrade` (en-US)
* `101` `Switching Protocols`
308 Permanent Redirect
======================

 하이퍼텍스트 전송 프로토콜 (HTTP) **`308 Permanent Redirect`** 리디렉션 상태 응답 코드는 요청된 리소스가
 `Location` (en-US) 헤더에 지정된 URL로 확실히 이동되었음을 나타냅니다. 브라우저가 이 페이지로 리디렉션되고 검색엔진은 리소스에 대한 링크를 업데이트합니다('SEO-speak'에서는 'link-juice'가 새 URL로 전송됩니다).

요청 메서드와 본문은 변경되지 않지만, `301`은 때때로 `GET` 메서드로 잘못 변경될 수 있습니다.

**참고:** 일부 웹 응용 프로그램은
 `308 Permanent Redirect`를 비표준 방식 및 기타 목적으로 사용합니다.
 예를 들어, Google Drive는 `308 Resume Incomplete` 응답을 사용하여 불완전한 업로드가 중단된 경우 클라이언트에 알립니다(Google Drive 문서의 다시 시작할 수 있는 다운로드 수행을 참조하세요).


상태
--


```http
308 Permanent Redirect
```

명세
--

| Specification |
| --- |
| HTTP Semantics # status.308 |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

함께 보기
-----

* `301 Moved Permanently`, 이 상태 코드와 동일하지만, `GET`이 아닐 때 사용되는 메서드를 변경합니다.
* `302 Found`, 임시 리디렉션
304 Not Modified
================

클라이언트 리디렉션 응답 코드 **`304 Not Modified`** 는 요청된 리소스를 재전송할 필요가 없음을 나타낸다. 캐시된 자원으로의 암묵적인 리디렉션이다. 이 는 `GET` 나 `HEAD` 요청처럼 요청 방법이 안전 한 경우 또는 요청이 조건부로 `If-None-Match` 또는 `If-Modified-Since` 헤더를 사용할 때 응답 된다.

이에 상응하는 `200` `OK` 응답에는 `Cache-Control`, `Content-Location`, `Date`, `ETag`, `Expires`, 그리고 `Vary` 가 포함되어 있었을 것이다.

**참고:** 브라우저의 개발자도구 네트워크 패널은 304 응답으로 이어지는 많은 요청을 생성하며, 로컬 캐시로 액세스 하는 것을 개발자에게 보여준다.

상태
--
```

304 Not Modified
```

명세
--

| Specification |
| --- |
| HTTP Semantics # status.304 |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

호환성 노트
------

* 이 응답에 영구 연결의 본문이 잘못 포함되어 있으면 브라우저 동작이 다릅니다. 자세한 내용은 204 No Content을(를) 참조하십시오.
같이 보기
-----

* `If-Modified-Since`
* `If-None-Match`
403 Forbidden
=============

HTTP **`403 Forbidden`** 클라이언트 오류 상태 응답 코드는 서버에 요청이 전달되었지만, 권한 때문에 거절되었다는 것을 의미합니다.

이 상태는 `401`과 비슷하지만, 로그인 로직(틀린 비밀번호로 로그인 행위)처럼 반응하여 재인증(re-authenticating)을 하더라도 지속적으로 접속을 거절합니다.

상태
--


```http
403 Forbidden
```

응답 예시
-----


```http
HTTP/1.1 403 Forbidden
Date: Wed, 21 Oct 2015 07:28:00 GMT
```

명세
--

| Specification |
| --- |
| HTTP Semantics # status.403 |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `401`
* HTTP/1.1: Status Code Definitions
505 HTTP Version Not Supported
==============================

**`505 HTTP Version Not Supported`** 응답 코드는 요청에 사용된 HTTP 버전을 서버가 지원하지 않음을 의미합니다

상태
--


```http
505 HTTP Version Not Supported
```

명세서
---

| Specification |
| --- |
| HTTP Semantics # status.505 |

같이 보기
-----

* `Upgrade` (en-US)
202 Accepted
============

하이퍼텍스트 전송 프로토콜 (HTTP) **`202 Accepted`** 는 요청이 처리를 위해 수락되었으나, 아직 해당 요청에 대해 처리 중이거나 처리 시작되지 않았을 수 있다는 것을 의미합니다. 요청이 처리 중 실패할 수도 있기 때문에 요청은 실행될 수도 실행되지 않을수도 있습니다.

이 상태 코드는 모호합니다. 즉 HTTP가 나중에 요청 처리 결과를 나타내는 비동기 응답을 보낼 방법이 없다는 것을 의미합니다. 이는 다른 프로세스나 서버가 요청을 처리하는 경우 또는 일괄 처리를 위한 것입니다.

상태
--


```http
202 Accepted
```

명세
--

| Specification |
| --- |
| HTTP Semantics # status.202 |

같이 보기
-----

* `Accept`
300 Multiple Choices
====================

 HTTP **`300 Multiple Choices`** 리디렉션 상태 응답 코드는 요청에 가능한 응답이 두 개 이상 있음을 의미합니다.
 사용자 에이전트 또는 사용자는 둘 중 하나를 선택해야 합니다. 응답 중 하나를 선택하는 표준화된 방법이 없기 때문에 이
 응답 코드는 거의 사용되지 않습니다.

서버는 선호하는 선택 항목이 있는 경우, `Location` (en-US)를 생성해야 합니다.

상태
--


```http
300 Multiple Choices
```

명세서
---

| Specification |
| --- |
| HTTP Semantics # status.300 |

같이 보기
-----

* `301` `Moved Permanently`
* `302` `Found`, 임시 리다이렉션
* `308` `Permanent Redirect`
206 Partial Content
===================

HTTP **`206 Partial Content`** 는 `Range` 헤더에 기술된 데이터 범위에 대한 요청이 성공적으로 응답되어 본문에 해당되는 데이터를 담고 있다는 것을 알려줍니다.

만약 단일 범위 요청을 한 경우엔, 전체 응답의 `Content-Type`은 문서 타입으로 설정되며, `Content-Range`가 제공됩니다.

만약 다중 범위 요청에 대한 응답이라면, `Content-Type`는 `multipart/byteranges`로 되며 분할된 데이터의 응답은 `Content-Range`와 `Content-Type`로 각각의 범위를 기술합니다.

상태
--


```http
206 Partial Content
```

예제
--

응답이 단일 범위를 가지고 있는 경우,


```http
HTTP/1.1 206 Partial Content
Date: Wed, 15 Nov 2015 06:25:24 GMT
Last-Modified: Wed, 15 Nov 2015 04:58:08 GMT
Content-Range: bytes 21010-47021/47022
Content-Length: 26012
Content-Type: image/gif

# 26012 bytes of partial image data…
```


응답이 여러 범위를 가지고 있는 경우,


```http
HTTP/1.1 206 Partial Content
Date: Wed, 15 Nov 2015 06:25:24 GMT
Last-Modified: Wed, 15 Nov 2015 04:58:08 GMT
Content-Length: 1741
Content-Type: multipart/byteranges; boundary=String\_separator

--String_separator
Content-Type: application/pdf
Content-Range: bytes 234-639/8000

# the first range
--String_separator
Content-Type: application/pdf
Content-Range: bytes 4590-7999/8000

# the second range
--String_separator--
```

명세
--

| Specification |
| --- |
| HTTP Semantics # status.206 |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

함께 참고할 내용
---------

* `If-Range`
* `Range`
* `Content-Range`
* `Content-Type`
501 Not Implemented
===================

 하이퍼텍스트 전송 프로토콜(HTTP) **`501 Not Implemented`** 서버 응답 코드는
 **요청을 수행할 수 있는 기능을 서버가 지원하지 않는다**는 것을 의미합니다.

 서버에서 추후 기능이 지원된다면 요청자에게 다시 확인해볼 수 있는 시점을 알려줄 수 있도록
 `Retry-After` 헤더를 전송해줄 수 있습니다.

`501` 은 서버가 요청 방법을 이해하지 못하거나 어떤 리소스를 지원하지 않은 경우에 적절합니다. 서버가 필수적으로 지원하는 메서드에는
 `GET` 와 `HEAD`가 있습니다.

 서버가 메서드를 이해하지만 고의적으로 지원하지 않는 경우에는 `405 Method Not Allowed`
 응답이 적합합니다.

**참고:**

* 501 오류는 사용자가 수정할 수 없고 접근하려는 서버에서 수정이 필요합니다.
* 캐시 헤더가 달리 지시가 있지 않는 이상, 501 응답은 기본적으로 캐시할 수 있습니다.

상태
--


```http
501 Not Implemented
```

명세서
---

| Specification |
| --- |
| HTTP Semantics # status.501 |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
504 Gateway Timeout
===================

하이퍼텍스트 전송 프로토콜 (HTTP) **`504 Gateway Timeout`** 서버 에러 응답 코드는 서버가 게이트웨이 혹은 프록시의 역할을 하는 동안 시간 안에 업스트림 서버(upstream server)로부터 요청을 마치기 위해 필요한 응답를 받지 못했음을 나타냅니다.

**참고:** Gateway 는 네트워킹에서 다른 것을 가르킬 수 있고 504 에러는 보통 여러분이 수정할 수 있는 것이 아니지만, 여러분이 접근하려고 하는 웹 서버 혹은 프록시의 수정이 필요합니다.

상태
--


```http
504 Gateway Timeout
```

명세서
---

| Specification |
| --- |
| HTTP Semantics # status.504 |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* HTTP/1.1: Status Code Definitions
* `502`
203 Non-Authoritative Information
=================================

The HTTP **`203 Non-Authoritative Information`** 는 요청이 성공했지만 오리진 서버의 `200` (`OK`) 응답에서 proxy에 의해 포함된 페이로드가 수정되었음을 나타냅니다.

`203` 응답은 `Warning` (en-US) 헤더 코드의 변환 적용을 의미하는 `214` (en-US) 값과 유사하며, 모든 상태 코드가 있는 응답에 적용할 수 있다는 추가적인 이점이 있습니다.

상태
--


```http
203 Non-Authoritative Information
```

명세
--

| Specification |
| --- |
| HTTP Semantics # status.203 |

같이 보기
-----

* `200`
* Proxy server
* `Warning` (en-US)
406 Not Acceptable
==================

하이퍼텍스트 전송 프로토콜(HTTP)의 **`406 Not Acceptable`** 클라이언트 에러 응답 코드는 서버가 요청의 주도적인 콘텐츠 협상 헤더에 정의된 허용 가능한 값 목록과 일치하는 응답을 생성할 수 없으며, 서버가 기본 표현을 제공하지 않음을 나타냅니다.

주도적인 콘텐츠 협상 헤더는 다음과 같습니다.

* `Accept`
* `Accept-Encoding`
* `Accept-Language`

실제로 이 오류가 사용되는 경우는 거의 드뭅니다. 서버는 최종 사용자에게 이런 비밀스럽고 수정하기 어려운 오류 코드로 응답하는 대신, 관련 헤더를 무시하고 사용자에게 실제 페이지를 제공합니다. 사용자가 이 결과에 완벽하게 만족하진 않더라도, 에러 코드보다는 선호할 것입니다.

서버가 이러한 오류 상태를 반환하는 경우, 메시지 본문에는 사용 가능한 리소스 표현 목록이 포함되어야 하며, 사용자가 그 중에서 선택할 수 있어야 합니다.

상태
--


```http
406 Not Acceptable
```

명세서
---

| Specification |
| --- |
| HTTP Semantics # status.406 |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `Accept`
* `Accept-Encoding`
* `Accept-Language`
* HTTP 콘텐츠 협상
301 Moved Permanently
=====================

 HTTP **`301 Moved Permanently`** 리디렉션 상태 응답 코드는 요청한 리소스가
 `Location` (en-US) 헤더에 주어진 URL로 완전히 옮겨졌다는 것을 나타냅니다. 브라우저는 이 페이지로
 리디렉트하고, 검색 엔진은 해당 리소스로 연결되는 링크를 갱신합니다.

**참고:** 명세에서는 리디렉션를 수행할 때 메서드와 본문이 변경되지 않아야 한다고 하지만, 모든 사용자 에이전트가 이 요구사항을 충족하지 않습니다. `301` 코드는 `GET`과 `HEAD` 메서드의 응답으로만 사용하고, `POST` 메서드에 대해서는 메서드 변경이 명시적으로 금지된 `308 Permanent Redirect` 사용이 바람직합니다.

상태
--


```http
301 Moved Permanently
```

예제
--

### 클라이언트 요청


```http
GET /index.php HTTP/1.1
Host: www.example.org
```

### 서버 응답


```http
HTTP/1.1 301 Moved Permanently
Location: http://www.example.org/index.asp
```

명세서
---

| Specification |
| --- |
| HTTP Semantics # status.301 |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `308` `Permanent Redirect`, 사용된 메서드가 절대 변경되지 않는 이 상태 코드와 동일합니다.
* `302` `Found`, 임시 리다이렉트
500 Internal Server Error
=========================

 하이퍼텍스트 전송 프로토콜 (HTTP) **`500 Internal Server Error`** 서버 에러 응답 코드는 요청을 처리하는
 과정에서 서버가 예상하지 못한 상황에 놓였다는 것을 나타냅니다.

 이 에러 응답은 "서버 에러를 총칭하는"(catch-all) 일반적인 응답입니다. 보통 이는 서버가 응답할 좀 더 좋은 5xx 에러 코드를
 못 찾은 것을 의미합니다. 종종 서버 관리자들은 미래에 같은 에러를 발생하는 것을 방지하기 위해 500 상태 코드 같은 에러 응답들에
 더 많은 자세한 내용을 남겨 둡니다.

상태
--


```http
500 Internal Server Error
```

명세서
---

| Specification |
| --- |
| HTTP Semantics # status.500 |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* HTTP/1.1: Status Code Definitions
416 Range Not Satisfiable
=========================

 하이퍼텍스트 트랜스퍼 프로토콜(HTTP) **`416 Range Not Satisfiable`** 에러 응답 코드는 서버가 요청받은 범위에
 대해서 서비스 할 수 없음을 알려줍니다. 아마도 이유는 그 문서가 그러한 범위를 지니고 있지 않거나, 또는
 `Range` 헤더 값이 문법적으로는 옳지만, 이해가 되지 않을 경우 그럴 수 있습니다.

 416 응답 메시지는 `Content-Range` 를 포함하여 만족할 수 없는 범위(그 경우 `'*'`) 뒤에
 `'/'`와 현재 리소스를 알려줍니다. 예: `Content-Range: */12777`

이 에러를 마주하면, 브라우저는 보통 명령을 취소하거나 전체 문서를 다시 요청합니다.

상태
--


```http
416 Range Not Satisfiable
```

명세서
---

| Specification |
| --- |
| HTTP Semantics # status.416 |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

함께 참고할 내용
---------

* `206` `Partial Content`
* `Content-Range`
* `Range`
101 Switching Protocols
=======================

 HTTP **`101 Switching Protocols`** 응답 코드는 서버가 전환되는 프로토콜을 가리킵니다. 프로토콜은
 클라이언트로부터 받은 `Upgrade` (en-US) 헤더에 명시되어 있습니다.

 서버는 이 응답에 전환된 프로토콜을 나타내는 `Upgrade` (en-US) 헤더를 포함합니다. 이 절차는
 프로토콜 업그레이드 메커니즘 (en-US) 문서에 설명되어 있습니다.

상태
--


```http
101 Switching Protocols
```

예제
--

 전환되는 프로토콜은 WebSockets와 함께
 사용할 수 있습니다.


```http
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
```

명세서
---

| Specification |
| --- |
| HTTP Semantics # status.101 |

같이 보기
-----

* 프로토콜 업그레이드 메커니즘 (en-US)
* 웹소켓
* `Upgrade` (en-US)
* `426` `Upgrade Required`
HTML에서 오디오와 비디오 사용하기
====================

HTML의 `<audio>` (en-US)와 `<video>` 요소를 사용하면 오디오와 비디오 콘텐츠를 웹페이지에 삽입할 수 있습니다. 더 나아가, 이 요소들의 인터페이스는 브라우저 화면을 벗어나 코드를 통해 미디어를 조작하고 재생하는 데에 핵심이 됩니다. 이 가이드에서는 미디어 요소들과 HTML 콘텐츠 내에서 이들을 어떻게 사용하는지에 대해 알아봅니다.

> 
> **참고**: 이 가이드는 MDN 곳곳에 흩어져 있는 문서를 단일 문서 혹은 문서 집합으로 통합할 예정입니다. 이 작업은 아직 계획된 일정이 없으나 곧 진행될 예정입니다. 지금은 찾으시는 내용 중 일부를 학습구역 문서 (en-US)에서 찾아볼 수 있습니다.
> 
> 
> 

현재는 이런 객체들을 화면을 벗어나서 사용할 수 있는 가이드가 없지만 오디오와 비디오 조작하기 (en-US)를 참고하면 좋은 시작점이 될 수 있습니다.

### 더 보기

* 웹 미디어 기술
SVG 튜토리얼
========

확장 가능한 벡터 그래픽(Scalable Vector Graphics), SVG는 그래픽을 마크업하기 위한 W3C XML의 특수언어(dialect)입니다. SVG는 Firefox, 오페라, 웹킷 브라우저, 인터넷 익스플로러 및 기타 여러 브라우저에서 부분적으로 지원하고 있습니다.

본 튜토리얼의 목적은 SVG 내부 구조를 설명하는 데 있으며, 기술적인 세부 사항을 다룹니다. 만약 그저 아름다운 이미지를 그리려고 한다면, Inkscape's documentation page에서 더 많은 유용한 소스들을 찾을 수 있습니다. SVG에 관한 또 다른 소개는 W3C의 SVG Primer에서 제공됩니다.

**참고:** 본 튜토리얼은 개발 초기 단계에 있습니다. 가능하다면, 본 문서 작성에 참여하여, 한 두 단락을 작성하여 도움을 주기 바랍니다. 한 페이지 전체를 작성한다면 더욱 좋습니다!

##### SVG 소개 목록

* 소개
* 시작하기
* 위치
* 기본 형태
* 패스
* 채우기 및 선 그리기 (en-US)
* 그라디언트 (en-US)
* 패턴
* 텍스트 (en-US)
* 기본 변형 (en-US)
* 클리핑 및 마스킹 (en-US)
* SVG 안의 다른 컨텐츠 (en-US)
* 필터 효과 (en-US)
* SVG 폰트 (en-US)
* SVG 이미지 태그
* SVG를 위한 도구들 (en-US)
* SVG와 CSS
<ellipse>
=========

**`<ellipse>`** 요소는 중심 좌표와 x 및 y 반경을 기반으로 타원을 만드는 SVG 기본 모양입니다.

**참고:** 타원은 타원의 정확한 방향을 지정할 수 없지만,(예를 들어 45도 각도로 기울어진 타원을 그리려는 경우) `transform (en-US)` 속성을 사용하여 회전할 수 있습니다.

예제
--
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="100" cy="50" rx="100" ry="50" />
</svg>
```

속성
--

`cx`

 타원 중심의 x좌표.
 값 유형: **<length>** (en-US)|**<percentage>** (en-US) ; 기본 값: `0`; 에니메이션 가능: **예**

`cy (en-US)`

 타원 중심의 y좌표
 값 유형: **<length>** (en-US)|**<percentage>** (en-US) ; 기본 값: `0`; 에니메이션 가능: **예**

`rx (en-US)`

 x축의 타원 반경.
 값 유형: `auto`|**<length>** (en-US)|**<percentage>** (en-US) ; 기본 값: `auto`; 에니메이션 가능: **예**

`ry (en-US)`

 y축의 타원 반경.
 값 유형: `auto`|**<length>** (en-US)|**<percentage>** (en-US) ; 기본 값: `auto`; 에니메이션 가능: **예**

`pathLength (en-US)`

 이 속성을 사용하면 경로의 총 길이를 사용자 단위로 지정할 수 있습니다.
 값 유형: **<number>** (en-US) ; 기본 값: *none*; 에니메이션 가능: **예**



**참고:** SVG2부터 시작하여 `cx`, `cy`, `rx`, 그리고 `ry`는 기하학 속성입니다. 즉, 해당 속성을 해당 요소의 CSS 속성으로도 사용할 수 있습니다.

### 전역 속성

코어 속성 (en-US)

특히: `id (en-US)`, `tabindex (en-US)`

스타일 속성 (en-US)
`class (en-US)`, `style (en-US)`
조건부 처리 속성 (en-US)

특히: `requiredExtensions`, `systemLanguage (en-US)`

이벤트 속성

전역 이벤트 속성 (en-US), 그래픽 이벤트 속성 (en-US)

프레젠테이션 속성 (en-US)

특히: `clip-path (en-US)`, `clip-rule (en-US)`, `color (en-US)`, `color-interpolation (en-US)`, `color-rendering`, `cursor (en-US)`, `display (en-US)`, `fill (en-US)`, `fill-opacity (en-US)`, `fill-rule (en-US)`, `filter (en-US)`, `mask (en-US)`, `opacity (en-US)`, `pointer-events (en-US)`, `shape-rendering (en-US)`, `stroke (en-US)`, `stroke-dasharray (en-US)`, `stroke-dashoffset (en-US)`, `stroke-linecap (en-US)`, `stroke-linejoin (en-US)`, `stroke-miterlimit (en-US)`, `stroke-opacity (en-US)`, `stroke-width (en-US)`, `transform (en-US)`, `vector-effect (en-US)`, `visibility (en-US)`

ARIA 속성

`aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role`

사용 참고 사항
--------

|  |  |
| --- | --- |
| 카테고리 | 기본 모양 요소, 그래픽 요소, 모양 요소 |
| 허용된 콘텐츠 | 순서에 상관없는 다음 요소 중 임의의 개수:애니메이션 요소설명 요소 |

명세서
---

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # EllipseElement |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 기타 기본 SVG 모양: **`<circle>`**, `<line>` (en-US), `<polygon>` (en-US), `<polyline>` (en-US), `<rect>`
<circle>
========

**`<circle>`** SVG SVG 요소는 중심점과 반지름을 기준으로 원을 그리는 데 사용되는 SVG 기본 모양입니다.

예제
--
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50" />
</svg>
```

속성
--

`cx`

 원 중심의 x축 좌표입니다.
 값 유형: **<length> (en-US)**|**<percentage> (en-US)** ; 기본 값: `0`; 에니메이션 가능: **예**

`cy (en-US)`

 원 중심의 y축 좌표입니다.
 값 유형: **<length> (en-US)**|**<percentage> (en-US)** ; 기본 값: `0`; 에니메이션 가능: **예**

`r (en-US)`

 원의 반지름입니다. 0 이하의 값은 원의 렌더링을 비활성화합니다.
 값 유형: **<length> (en-US)**|**<percentage> (en-US)** ; 기본 값: `0`; 에니메이션 가능: **예**

`pathLength (en-US)`

 원주 전체 길이(사용자 단위).
 값 유형: **<number>** (en-US) ; 기본 값: 없음; 에니메이션 가능: **예**



**참고:** SVG2부터 시작하여 `cx`, `cy`, 그리고 `r`는 기하학 속성입니다. 즉, 해당 속성을 해당 요소의 CSS 속성으로도 사용할 수 있습니다.

### 전역 속성

코어 속성 (en-US)

특히: `id (en-US)`, `tabindex (en-US)`

스타일 속성 (en-US)
`class (en-US)`, `style (en-US)`
조건부 처리 속성 (en-US)

특히: `requiredExtensions`, `systemLanguage (en-US)`

이벤트 속성

전역 이벤트 속성 (en-US), 그래픽 이벤트 속성 (en-US)

프레젠테이션 속성 (en-US)

특히: `clip-path (en-US)`, `clip-rule (en-US)`, `color (en-US)`, `color-interpolation (en-US)`, `color-rendering`, `cursor (en-US)`, `display (en-US)`, `fill (en-US)`, `fill-opacity (en-US)`, `fill-rule (en-US)`, `filter (en-US)`, `mask (en-US)`, `opacity (en-US)`, `pointer-events (en-US)`, `shape-rendering (en-US)`, `stroke (en-US)`, `stroke-dasharray (en-US)`, `stroke-dashoffset (en-US)`, `stroke-linecap (en-US)`, `stroke-linejoin (en-US)`, `stroke-miterlimit (en-US)`, `stroke-opacity (en-US)`, `stroke-width (en-US)`, `transform (en-US)`, `vector-effect (en-US)`, `visibility (en-US)`

ARIA 속성

`aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role`

사용 참고 사항
--------

|  |  |
| --- | --- |
| 카테고리 | 기본 모양 요소, 그래픽 요소, 모양 요소 |
| 허용된 콘텐츠 | 순서에 상관없는 다음 요소 중 임의의 개수:애니메이션 요소설명 요소 |

명세서
---

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # CircleElement |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 기타 기본 SVG 모양: **`<ellipse>`**, `<line>` (en-US), `<polygon>` (en-US), `<polyline>` (en-US), `<rect>`
SVG 이미지 요소
==========

* « 이전 (en-US)
* 다음 » (en-US)

SVG `<image>` (en-US) 요소는 비트맵 이미지를 SVG 객체와 함께 표시할 수 있도록 해 준다.

이 기본 예제에서, `href (en-US)` 속성으로 참조된 a .jpg 이미지는 SVG 객체 내부에 표시될 것이다:


```xml
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="4cm" version="1.1"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
  <image xlink:href="firefox.jpg" x="0" y="0" height="50px" width="50px"/>
</svg>
```


다음 몇가지를 주의하라(W3 specs 참조):

* x 또는 y 속성을 설정하지 않으면 0이 된다.
* height 또는 width 속성을 설정하지 않으면, 0이 된다.
* height 또는 width 속성이 0이면 이미지는 표시되지 않을 것이다.
* « 이전 (en-US)
* 다음 » (en-US)