recursal/MDN huggingface dataset:
prefers-color-scheme
====================

**`prefers-color-scheme`** CSS 미디어 특성은 사용자의 시스템이 라이트 테마나 다크 테마를 사용하는지 탐지하는 데에 사용됩니다.

사용자는 운영체제 설정(라이트 모드 또는 다크 모드)이나 사용자 에이전트 설정에서 선호하는 테마를 나타낼 수 있습니다.

구문
--

`light`

사용자가 시스템에 라이트 테마를 사용하는 것을 선호하거나 선호하는 테마를 알리지 않았음을 나타냅니다.

`dark`

사용자가 시스템에 다크 테마를 사용하는 것을 선호한다고 알렸음을 나타냅니다.

예제
--

요소들에게 초기 색상을 설정합니다. 이 요소들이 사용자의 선호 테마에 따라 다른 스타일로 나타나도록 할 수 있습니다.

### HTML


```html
<div class="day">Day (initial)</div>
<div class="day light-scheme">Day (changes in light scheme)</div>
<div class="day dark-scheme">Day (changes in dark scheme)</div>
<br />

<div class="night">Night (initial)</div>
<div class="night light-scheme">Night (changes in light scheme)</div>
<div class="night dark-scheme">Night (changes in dark scheme)</div>
```

### CSS


```css
.day {
  background: #eee;
  color: black;
}
.night {
  background: #333;
  color: white;
}

@media (prefers-color-scheme: dark) {
  .day.dark-scheme {
    background: #333;
    color: white;
  }
  .night.dark-scheme {
    background: black;
    color: #ddd;
  }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme {
    background: white;
    color: #555;
  }
  .night.light-scheme {
    background: #eee;
    color: black;
  }
}

.day,
.night {
  display: inline-block;
  padding: 1em;
  width: 7em;
  height: 2em;
  vertical-align: middle;
}
```

### 결과

명세서
---

| Specification |
| --- |
| Media Queries Level 5 # prefers-color-scheme |

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

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

같이 보기
-----

* Simulate prefers-color-scheme in Firefox (Firefox Page Inspector > Examine and edit CSS)
* Video tutorial: Coding a Dark Mode for your Website
* Redesigning your product and website for dark mode
* Windows, macOS, Android, or 다른 플랫폼에서 색상 변경하기
translate()
===========

**`translate()`** CSS 함수 (en-US) 는 요소의 위치를 수평 또는 수직 방향으로 변경하거나, 수평 및 수직 방향으로 변경합니다.
 실행 결과로 `<transform-function>` 데이터 유형을 반환합니다.

시도해보기
-----

이 변환은 2차원 벡터의 특징을 가집니다. 벡터의 좌표들은 요소가 각 방향으로 얼마나 이동하는지를 정의합니다.

구문
--


```css
/\* 단일 <length-percentage> 값 \*/
transform: translate(200px);
transform: translate(50%);

/\* 이중 <length-percentage> 값 \*/
transform: translate(100px, 200px);
transform: translate(100px, 50%);
transform: translate(30%, 200px);
transform: translate(30%, 50%);
```

### 값

* 단일 `<length-percentage>` 값
    + 이 값은 변환하는 벡터의 가로축(수평, x축)을 나타내는 `<length>` 또는 `<percentage>` 입니다.
     변환하는 벡터의 세로축(수직, y축)은 `0`으로 설정됩니다. 예를 들어, `translate(2px)`은 `translate(2px, 0)`과 동일합니다.
     백분율 값은 `transform-box` (en-US) 속성에 의해 정의된 참조 상자의 너비를 나타냅니다.
* 이중 `<length-percentage>` 값
    + 이 값은 변환하는 벡터의 가로축(수평, x축)과 세로축(수직, y축)을 모두 나타내는 두 개의
     `<length>` 또는 `<percentage>` 를 설명합니다.
     백분율 값의 첫 번째는 `transform-box` (en-US) 속성에 의해 정의된 참조 상자의 너비를 나타내며, 두 번째는 높이를 나타냅니다.

| ℝ^2의 데카르트 좌표(Cartesian coordinates) | ℝℙ^2의 동차좌표(Homogeneous coordinates) | ℝ^3의 데카르트 좌표(Cartesian coordinates) | ℝℙ^3의 동차좌표(Homogeneous coordinates) |
| --- | --- | --- | --- |
| 
 변환은 ℝ^2의 선형 변환이 아니며,
 데카르트 좌표 행렬을 사용해 나타낼 수 없습니다.
  | 

(

1

0

tx

0

1

ty

0

0

1

)

 | 

(

1

0

tx

0

1

ty

0

0

1

)

 | 

(

1

0

0

tx

0

1

0

ty

0

0

1

0

0

0

0

1

)

 |
| `[1 0 0 1 tx ty]` |

### 형식 구문


```css
translate(<length-percentage>, <length-percentage>?)
```

예제
--

### 단일 축 변환

#### HTML


```html
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>
```


#### CSS


```css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  /\* translateX(10px) 또는 translate(10px, 0)과 동일 \*/
  transform: translate(10px);
  background-color: pink;
}
```


#### 결과

### x축과 y축 변환

#### HTML


```html
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>
```


#### CSS


```css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: translate(10px, 10px);
  background-color: pink;
}
```


#### 결과

명세서
---

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-translate |

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

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

같이 보기
-----

* `transform`
* `<transform-function>`
* `translate` (en-US)
scaleX()
========

CSS 함수인 **`scaleX()`** x 축을 따라 (수평방향)으로 요소의 크기를 조절하는 변형을 정의합니다. 결과는 `<transform-function>` 데이터 타입 입니다.

![](/ko/docs/Web/CSS/transform-function/scaleX/scalex.png)

스케일 팩터가 1 인 경우를 제외하고 상수 요소로 각 엘리먼트 위치의 가로 좌표를 수정합니다, 이 경우 함수는 항등 변환입니다.스케일링은 등방성이 아니며, 엘리먼트의 각도는 보존되지 않습니다.`scaleX(-1)` 은 원점을 지나는 수직축이 있는 대칭축을 의미합니다 ( `transform-origin` (en-US) 속성의해 지정되어집니다).

**참고:** `scaleX(sx)` 는 `scale(sx, 1)` 또는 `scale3d(sx, 1, 1)` 와 같습니다.

Syntax
------
```

scaleX(s)
```

### Values

`s`

요소의 각 위치의 횡좌표에 적용 할 스케일링 펙터를 나타내는 `<number>` 입니다.



| Cartesian coordinates on ℝ2 | Homogeneous coordinates on ℝℙ2 | Cartesian coordinates on ℝ3 | Homogeneous coordinates on ℝℙ3 |
| --- | --- | --- | --- |
| 

s
0

0
1

 | 

s
 0
0

0
 1
0

0
0
1

 | 

s
 0
0

0
 1
0

0
0
1

 | 

s
 0
0
0

0
 1
0
0

0
0
1
0

0
0
0
1

 |
| `[s 0 0 1 0 0]` |

Examples
--------

### HTML


```html
<div>Normal</div>
<div class="scaled">Scaled</div>
```

### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scaleX(0.6);
  background-color: pink;
}
```

### Result

명세서
---

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-scalex |

See also
--------

* `transform`
* `<transform-function>`
matrix()
========

**`matrix()`** CSS 함수는 2D 변형 동차 행렬을 선언합니다. 결과는 `<transform-function>` 데이터 타입입니다.

**참고:** **주의:** `matrix(a, b, c, d, tx, ty)` 는 `matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)` 를 짧게 쓴 것입니다.

Syntax
------

`matrix()` 함수는 6개의 값을 지정합니다. 상수 값은 묵시적이며, 매개변수(parameter)로 전달하지 않습니다. 다른 매개 변수는 column-major 순서로 설명됩니다.

**참고:** **주의:** Firefox 16까지, Gecko(엔진) `tx`, `ty` 에`<length>` 값을 허용했습니다.
```

matrix(a, b, c, d, tx, ty)
```

### Values

`a` `b` `c` `d`

`<number>`는 선형 변환(linear transformation)을 설명합니다.

`tx` `ty`

`<number>`는 적용 할 이동(translation)을 설명합니다.



| Cartesian coordinates on ℝ2 | Homogeneous coordinates on ℝℙ2 | Cartesian coordinates on ℝ3 | Homogeneous coordinates on ℝℙ3 |
| --- | --- | --- | --- |
| 

a
c

b
d

 | 

a
c
tx

b
d
ty

0
0
1

 | 

a
c
tx

b
d
ty

0
0
1

 | 

a
c
0
tx

b
d
0
ty

0
0
1
0

0
0
0
1

 |
| `[a b c d tx ty]` |

Examples
--------

### HTML


```html
<div>Normal</div>
<div class="changed">Changed</div>
```

### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.changed {
  transform: matrix(1, 2, -1, 1, 80, 80);
  background-color: pink;
}
```

### Result

Browser compatibility
---------------------

호환성 정보는 `<transform-function>` 데이터 타입을 확인하세요.

See also
--------

* `transform`
* `<transform-function>`
* `matrix3d()` (en-US)
* Understanding the CSS Transforms Matrix
한 번에 여러 배경 사용하기
===============

**여러 개의 배경**을 한 번에 적용할 수도 있습니다. 첫 번째 배경이 맨 위에, 마지막 배경이 맨 밑에 위치하는 레이어 구조를 사용하게 됩니다. 마지막 배경에만 배경색을 적용할 수 있습니다.

여러 배경을 적용하는 건 쉽습니다.


```css
.myclass {
  background:
    background1,
    background 2,
    ...,
    backgroundN;
}
```


`background` 단축 속성뿐 아니라 `background-color`를 제외한 단일 속성에서도 사용할 수 있습니다. 즉, `background`, `background-attachment`, `background-clip`, `background-image`, `background-origin`, `background-position` (en-US), `background-repeat`, `background-size` (en-US)에는 목록을 값으로 지정할 수 있습니다.

예제
--

다음 예제는 Firefox 로고, 거품, 선형 그레이디언트 (en-US) 총 세 개의 배경을 사용합니다.

### HTML


```html
<div class="multi-bg-example"></div>
```

### CSS


```css
.multi-bg-example {
  width: 100%;
  height: 400px;
  background-image: url(firefox.png), url(bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position:
    bottom right,
    left,
    right;
}
```

### 결과

결과에서 볼 수 있듯, `background-image`에서 첫 번째로 지정한 Firefox 로고가 맨 위, 그 다음이 거품 그림이고 선형 그레이디언트는 모든 '이미지' 밑에 위치합니다. 하위 속성(`background-repeat`, `background-position` (en-US))의 각 값도 순서에 맞는 배경에 적용됩니다. 따라서 `background-repeat`의 첫 번째 값은 처음(맨 위) 배경에 적용되고, 두 번째와 두 번째 배경, 세 번째와 세 번째 배경...도 같습니다.

같이 보기
-----

* CSS 그레이디언트 사용하기 (en-US)
배경 이미지 크기 조정하기
==============

CSS 배경 이미지의 기본 설정값에서는 원본 이미지가 크기 변화 없이 바둑판식으로 배열됩니다. `background-size` (en-US) 속성에 가로와 세로 크기를 지정해 크기를 바꿀 수 있습니다. 이미지는 원하는대로 확대할 수도, 줄일 수도 있습니다.

큰 이미지 바둑판식 배열
-------------

2982x2808의 커다란 Firefox 이미지를 가지고 있다고 해보겠습니다. 모종의 이유(끔찍하게 잘못된 사이트 디자인 등)로 300x300 픽셀 요소에 저 이미지 4개를 바둑판식으로 보여야 합니다. `background-size`와 고정값 150 픽셀로 목표를 달성할 수 있습니다.

### HTML


```html
<div class="tiledBackground"></div>
```

### CSS


```css
.tiledBackground {
  background-image: url(firefox\_logo.png);
  background-size: 150px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  color: pink;
}
```

### Result

이미지 늘리기
-------

가로와 세로 크기를 각각 지정할 수도 있습니다.


```css
background-size: 300px 150px;
```


결과는 다음과 같습니다.

![](/ko/docs/Web/CSS/CSS_backgrounds_and_borders/Resizing_background_images/ss2.png)

작은 이미지 키우기
----------

반대로 배경 이미지를 키울 수도 있습니다. 다음 코드는 32x32 픽셀 파비콘을 300x300 픽셀로 늘린 결과입니다.

![](/ko/docs/Web/CSS/CSS_backgrounds_and_borders/Resizing_background_images/ss3.png)


```css
.square2 {
  background-image: url(favicon.png);
  background-size: 300px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  text-shadow: white 0px 0px 2px;
  font-size: 16px;
}
```


보시다시피 CSS는 이미지 파일 이름을 제외하면 동일합니다.

특별한 값: "contain" 과 "cover"
--------------------------

길이를 나타내는 `<length>` 값 대신, `background-size` (en-US) CSS 속성에 `contain` 과 `cover` 두개의 특별한 값을 지정할 수 있습니다. 살펴봅시다.

### `contain`

`contain` 값을 지정하면, 배경 이미지의 가로, 세로 모두 요소보다 작다는 조건하에 가능한 크게 조정됩니다. 이미지의 가로, 세로 비율은 유지됩니다. 따라서 배경 이미지의 크기는 요소의 크기보다 항상 작거나 같습니다. 아래 예제의 크기를 조절해서 실제로 어떻게 동작하는지 확인해보세요.

#### HTML


```html
<div class="bgSizeContain">
  <p>Try resizing this element!</p>
</div>
```


#### CSS


```css
.bgSizeContain {
  background-image: url(firefox\_logo.png);
  background-size: contain;
  width: 160px;
  height: 160px;
  border: 2px solid;
  color: pink;
  resize: both;
  overflow: scroll;
}
```


#### 결과

### `cover`

값을 `cover` 로 지정하면 배경이미지의 가로, 세로 길이 모두 요소보다 크다는 조건하에 가능한 배경 이미지를 작게 조정합니다. 가로, 세로 비율은 유지됩니다. 따라서 배경 이미지의 크기는 요소의 크기보다 항상 크거나 같습니다. 아래 예제의 크기를 조절해서 실제로 어떻게 동작하는지 확인해보세요.

#### HTML


```html
<div class="bgSizeCover">
  <p>Try resizing this element!</p>
</div>
```


#### CSS


```css
.bgSizeCover {
  background-image: url(firefox\_logo.png);
  background-size: cover;
  width: 160px;
  height: 160px;
  border: 2px solid;
  color: pink;
  resize: both;
  overflow: scroll;
}
```


#### 결과

같이 보기
-----

* `background-size` (en-US)
* `background`
* Scaling of SVG backgrounds (en-US)
Border-radius 생성기
=================

이 도구를 사용해 CSS3 `border-radius` 값을 생성할 수 있습니다.
Border-image 생성기
================

이 도구를 사용해 CSS3 `border-image` 값을 생성할 수 있습니다.
XML 소개
======

XML(확장 가능한 마크업 언어)은 HTML과 유사하지만, 미리 정의된 태그가 없는 마크업 언어입니다. 대신 필요에 맞게 특별히 설계된 태그를 직접 정의합니다. 이는 데이터를 저장, 검색, 공유할 수 있는 형식으로 저장할 수 있는 강력한 방법입니다. 가장 중요한 것은 XML의 기본 형식이 표준화되어 있기 때문에, 로컬 또는 인터넷을 통해 시스템이나 플랫폼 간 XML을 공유하거나 전송하는 경우에도, 표준화된 XML 구문으로 덕분에 수신자가 데이터를 파싱 할 수 있다는 점입니다.

XML을 기반으로 하는 언어에는 XHTML, MathML, SVG, RSS, RDF 등 여러 가지가 있습니다. 여러분만의 언어를 직접 정의할 수도 있습니다.

XML 문서 구조
---------

XML과 XML 기반 언어의 전체 구조는 태그를 기반으로 합니다.

### XML 선언

XML 선언은 태그가 아닙니다. 문서의 메타데이터를 전달하는 데 사용됩니다.


```html
<?xml version="1.0" encoding="UTF-8"?>
```


#### 속성

`version`

문서에 사용된 XML의 버전.

`encoding`

문서에 사용된 인코딩.

### 주석


```html
<!-- 주석 -->
```

"올바른" XML(유효하고 올바른 형식)
----------------------

### 올바른 설계 규칙

XML 문서를 올바르게 작성하려면 다음 조건을 충족해야 합니다.

* 문서가 올바른 형식이어야 합니다.
* 문서가 모든 XML 구문 규칙을 준수해야 합니다.
* 문서가 시맨틱 규칙을 준수해야 하며, 이는 일반적으로 XML 스키마나 DTD(**문서 유형 정의**)에 설정되어 있습니다.
### 예제


```xml
<?xml version="1.0" encoding="UTF-8"?>
<message>
    <warning>
        Hello World
    <!-- </warning>이 빠짐 -->
</message>
```


이제 동일한 문서의 올바른 버전을 살펴보겠습니다.


```xml
<?xml version="1.0" encoding="UTF-8"?>
<message>
    <warning>
         Hello World
    </warning>
</message>
```


정의되지 않은 태그가 포함된 문서는 유효하지 않습니다. 예를 들어, `<warning>` 태그를 정의하지 않았다면, 위의 문서는 유효하지 않습니다.

대부분의 브라우저는 잘못된 형식의 XML 문서를 식별할 수 있는 디버거를 제공합니다.

엔티티
---

HTML과 마찬가지로, XML은 몇 가지 특수 예약 문자를 참조하기 위한 메서드(엔티티라고 함)를 제공합니다(태그에서 사용되는 초과 기호 등). 이 중 아래 다섯 가지 문자를 알아두어야 합니다.

| 엔티티 | 문자 | 설명 |
| --- | --- | --- |
| &lt; | < | 미만 기호 |
| &gt; | > | 초과 기호 |
| &amp; | & | 앰퍼샌드 |
| &quot; | " | 큰따옴표 |
| &apos; | ' | 작은따옴표 |

선언된 엔티티는 5개뿐이지만, 문서의 문서 유형 정의를 사용하여 더 추가할 수 있습니다. 예를 들어 새 `&warning;` 엔티티를 만들려면 이렇게 하면 됩니다.


```xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE body [
 <!ENTITY warning "경고: 엄청 안 좋은 일이 발생했습니다... 새로 고침하여 다시 시도해 주세요.">
]>
<body>
  <message> &warning; </message>
</body>
```


숫자 문자 참조를 사용하여 특수 문자를 지정할 수도 있습니다. 예를 들어 &#xA9; 는 "©" 기호입니다.

XML 표시하기
--------

XML은 일반적으로 설명 목적으로 사용되지만, XML 데이터를 표시하는 방법도 있습니다. XML을 렌더링 하는 특정 방법을 정의하지 않으면, 브라우저에는 원시 XML이 표시됩니다.

XML 출력 스타일을 지정하는 한 가지 방법은 `xml-stylesheet` 처리 명령을 사용하여 문서에 적용할 CSS를 지정하는 것입니다.


```xml
<?xml-stylesheet type="text/css" href="stylesheet.css"?>
```


XML을 HTML과 같은 다른 언어로 변환하는 데 사용할 수 있는 **확장 가능한 스타일 시트 언어 변환**(XSLT)이라는 더 강력한 XML 표시 방법도 있습니다. 따라서 XML은 매우 다양하게 활용될 수 있습니다.


```xml
<?xml-stylesheet type="text/xsl" href="transform.xsl"?>
```

권장 사항
-----

이 문서는 XML이 무엇인지에 대한 아주 간략한 소개일 뿐이며, XML을 시작하기 위한 몇 가지 간단한 예제와 참고 자료만 포함되어 있습니다. XML에 대한 자세한 내용은 웹에서 보다 심층적인 문서를 찾아보시기 바랍니다.

하이퍼텍스트 마크업 언어(HTML)를 배우면 XML을 더 잘 이해하는 데 도움이 됩니다.

같이 보기
-----

* XML.com
* W3.org의 확장 가능한 마크업 언어(XML)
* Using XML: A List Apart
Resources and URIs
==================

HTTP는 브라우저 혹은 사용자 에이전트에게 인터넷 상 다른 리소스와의 통신을 허용합니다: 이를 위해 브라우저에는 자원의 신분(\*identity)\*와 위치(\*location)\*가 필요합니다. 이 두 비트의 정보는 URI로 설명됩니다.

웹 리소스 식별

URI와 웹에서의 자원 접근 방법

Data URIs

A specific kind of URIs, data URIs, embed the resource itself inside the identifier.

www 와non-www URL 중에서 선택하기

도메인에 접두사로 www을 사용해야할지 말지에 대한 조언을 제공합니다. 이 글에서는 선택에 대한 결과와 과정 또한 설명합니다.

MIME 타입

MIME 미디어 타입은 특정 자원이 어떤 종류의 문서인지 정의합니다. 이 글에서는 웹에서 사용할 수 있는 가장 유용한 MIME 타입과 구문을 제공합니다.

Complete list of MIME type

웹 개발자에게 유용한 포괄적인 MIME 타입 목록.

Separating identity and location of a resource: the Alt-Svc header

신분(\*identity)\*와 위치(*location)* 둘 다 URL에 기술되더라도 둘의 개념은 다르며 둘을 구분하는 것은 때때로 유용합니다.이 글에서는 `Alt-Svc` 헤더에 대해 소개합니다.
Client hints(클라이언트 힌트)
======================

**Client Hints**는 클라이언트 장치 및 에이전트별 기본 설정 목록을 확인할 수 있도록 사전 컨텐츠 체크를 위한 HTTP request header 입니다. Client Hints를 사용하면 이미지 DPR 해상도의 자동 조절과 최적화 된 assets을 자동으로 적용할 수 있습니다.

Client Hints는 자동으로 적용되는 것이 아닙니다 : ClientHints를 지원한다고 선언하기 위해서 서버에서 `Accept-CH` (accept client hints) header 또는 클라이언트에서 HTML Meta 태그의 `http-equiv` 속성을 사용하여 선언해주어야 합니다.
```

Accept-CH: DPR, Width, Viewport-Width, Downlink
```


또는


```html
<meta http-equiv="Accept-CH" content="DPR, Width, Viewport-Width, Downlink" />
```


클라이언트가 `Accept-CH` header를 전달받게 되면 지원되는 경우, Client Hint header를 추가합니다. 예를 들어 위의 Accept-CH 예제를 기반으로 클라이언트는 모든 후속 요청에 DPR, Width, Viewport-Width 및 Downlink 헤더를 추가 할 수 있습니다.

두 번째 예에서 서버는 Accept-CH 메타 태그를 설정하여 브라우저에 힌트를 제공합니다.

일반적으로, Client Hints header를 가지고 개발자 또는 어플리케이션은 브라우저에게 장치 픽셀 비율, 뷰포트 너비 및 디스플레이 너비와 같은 서버 자체 정보를 제공하도록 할 수 있습니다. 그러면 클라이언트는 서버에 클라이언트 환경에 대한 정보를 제공할 수 있고, 서버는 해당 정보를 기반으로 전송할 리소스를 결정할 수도 있습니다.

Vary Client Hints
-----------------

다른 Client Hints가 응답에 영향을 줄 수 있는 캐시를 전달하기 위해서는, `Vary` HTTP header를 사용해야만 합니다.

응답 예시 :

`Vary: Accept, DPR, Width, Viewport-Width, Downlink`

See Also
--------

* Client Hints headers
* `Vary` HTTP Header
HTTP 요청 메서드
===========

HTTP는 **요청 메서드**를 정의하여, 주어진 리소스에 수행하길 원하는 행동을 나타냅니다. 간혹 요청 메서드를 "HTTP 동사"라고 부르기도 합니다. 각각의 메서드는 서로 다른 의미를 구현하지만, 일부 기능은 메서드 집합 간에 서로 공유하기도 합니다. 이를테면 응답 메서드는 안전하거나, 캐시 가능하거나, 멱등성을 가질 수 있습니다.

`GET`

`GET` 메서드는 특정 리소스의 표시를 요청합니다. `GET`을 사용하는 요청은 오직 데이터를 받기만 합니다.

`HEAD`

`HEAD` 메서드는 `GET` 메서드의 요청과 동일한 응답을 요구하지만, 응답 본문을 포함하지 않습니다.

`POST`

`POST` 메서드는 특정 리소스에 엔티티를 제출할 때 쓰입니다. 이는 종종 서버의 상태의 변화나 부작용을 일으킵니다.

`PUT`

`PUT` 메서드는 목적 리소스 모든 현재 표시를 요청 payload로 바꿉니다.

`DELETE`

`DELETE` 메서드는 특정 리소스를 삭제합니다.

`CONNECT`

`CONNECT` 메서드는 목적 리소스로 식별되는 서버로의 터널을 맺습니다.

`OPTIONS`

`OPTIONS` 메서드는 목적 리소스의 통신을 설정하는 데 쓰입니다.

`TRACE` (en-US)

`TRACE` 메서드는 목적 리소스의 경로를 따라 메시지 loop-back 테스트를 합니다.

`PATCH`

`PATCH` 메서드는 리소스의 부분만을 수정하는 데 쓰입니다.

명세
--

| Specification |
| --- |
| HTTP Semantics # CONNECT |
| HTTP Semantics # DELETE |
| HTTP Semantics # GET |
| HTTP Semantics # HEAD |
| HTTP Semantics # OPTIONS |
| HTTP Semantics # POST |
| HTTP Semantics # PUT |
| HTTP Semantics # TRACE |

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

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

같이 보기
-----

* HTTP 헤더
HTTP 기본
=======

HTTP는 확장 가능한 프로토콜로 리소스 및 URI(Uniform Resource Identifier), 간단한 메시지 구조, 클라이언트-서버 통신 흐름과 같은 개념에 의존합니다. 이러한 기본 개념을 토대로, 새로운 HTTP 메서드나 헤더의 생성을 통해 새로운 기능과 새로운 의미를 더하는 수많은 확장들이 수년간 생겨났습니다.

글 목록
----

HTTP의 개요

HTTP는 무엇이고 웹 아키텍처에서 그 역할은 무엇인지, 프로토콜 스택에서의 위치를 서술하고 있습니다.

HTTP의 진화

HTTP는 1990년대 초반에 만들어지고 여러번 확장되어 왔습니다. 이 항목에서는 HTTP의 역사에 대해서 훑어보고 HTTP/0.9, HTTP/1.0, HTTP/1.1 그리고 수년에 걸쳐 중요하지는 않지만 새로운 기능이 소개된 현대의 HTTP/2에 대해서 서술하고 있습니다.

리소스와 URIs

리소스에 대한 개념, 식별자, 그리고 웹에서의 위치에 대해서 간략히 소개합니다.

웹 리소스 식별

웹 리소스가 어떻게 참조되는지 그리고 어디에 위치하는지를 서술합니다.

데이터 URL

특정 종류의 URI는 직접 대표하는 리소스를 포함합니다. 데이터 URL은 매우 편리하지만 위험성을 가지고 있습니다.

리소스 URL 
비표준

리소스 URL(`resource` 스키마가 접두사로 붙어있는 URL)은 Firefox와 Firefox 확장 프로그램들에서 내적으로 리소스를 로드하기 위해서 사용됩니다. 하지만 몇몇 브라우저로 연결할 수 있는 사이트의 정보로도 사용할 수 있습니다.

MIME 타입

HTTP/1.0부터는 다양한 타입의 콘텐츠를 전송할 수 있습니다. 이 글에서는 `Content-Type` 헤더와 MIME 표준을 사용하여 이를 수행하는 방법을 설명합니다.

www와 비-www URL 중에서 선택하기

이 글에서는 www 접두사 도메인을 사용할지 여부를 선택하는 방법과, 그 선택의 결과에 대한 지침을 제공합니다.

HTTP 세션의 흐름

이 글은 일반적인 HTTP 세션에 대해서 서술합니다. 예를 들어, 당신이 웹 페이지에서 링크 또는 이미지를 클릭하였을 때 무슨 일이 일어나는지를 들 수 있습니다.

HTTP 메시지

HTTP 메시지는 요청 혹은 응답을 하는 도중에 전송됩니며, 아주 명확한 구조를 가지고 있습니다. 이 간략한 글에서는 그 구조, 목적과 가능성에 대해서 서술합니다.

HTTP/2에서의 프레임과 메시지 구조

HTTP/2는 HTTP/1.x 메시지를 바이너리 프레임에 넣어 표시하고 캡슐화를 합니다. 이 글은 그 프레임의 구조, 목적, 그리고 인코드 방법에 대해서 설명합니다.

HTTP/1.x의 연결 관리

HTTP/1.1은 HTTP가 영구적 연결과 파이프라이닝을 지원한 첫 버전입니다. 이 글은 두 개념에 대해서 설명합니다.

HTTP/2에서의 연결 관리

HTTP/2는 어떻게 연결이 생성되고 관리되는지에 대해서 완벽하게 재검토했습니다. 이 글은 어떻게 HTTP 프레임이 멀티플렉싱이 가능한지 그리고 이전 HTTP 버전에서 발생한 'head-of-line' 블로킹 문제를 어떻게 풀었는지에 대해서 설명합니다.

콘텐츠 협상

HTTP는 브라우저가 선호하는 포맷, 언어 또는 인코딩을 알려주는 방법으로 `Accept`로 시작하는 HTTP 헤더 세트를 도입합니다. 이 항목은 어떻게 이러한 협상이 시작하는지, 어떻게 서버가 반응하기를 기대하는지 그리고 어떻게 가장 적절한 응답을 주는지에 대해서 설명합니다.
CONNECT
=======

**HTTP `CONNECT`** 메소드는 요청한 리소스에 대해 양방향 연결을 시작하는 메소드입니다. 이는 터널을 열기 위해서 사용될 수 있습니다.

예를 들어, `CONNECT` 메소드는 SSL (HTTPS)를 사용하는 웹사이트에 접속하는데 사용될 수 있습니다. 클라이언트는 원하는 목적지와의 TCP 연결을 HTTP 프록시 서버에 요청합니다. 그러면 서버는 클라이언트를 대신하여 연결의 생성을 진행합니다. 한번 서버에 의해 연결이 수립되면, 프록시 서버는 클라이언트에 오고가는 TCP 스트림을 계속해서 프록시합니다.

`CONNECT`는 홉바이홉 메소드입니다.

|  |  |
| --- | --- |
| Request has body | No |
| Successful response has body | Yes |
| Safe | No |
| Idempotent | No |
| Cacheable | No |
| Allowed in HTML forms (en-US) | No |

문법
--
```

CONNECT www.example.com:443 HTTP/1.1
```

예제
--

일부 프록시 서버는 터널을 생성하기 위해 인증을 요구할 수 있습니다. `Proxy-Authorization` (en-US) 헤더를 참고하세요.


```http
CONNECT server.example.com:80 HTTP/1.1
Host: server.example.com:80
Proxy-Authorization: basic aGVsbG86d29ybGQ=
```

기술 사양
-----

| Specification | Title |
| --- | --- |
| RFC 7231, 섹션 4.3.6: CONNECT | Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content |

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

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

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

* Proxy server
* `Proxy-Authorization` (en-US)
HEAD
====

**HTTP `HEAD` 메서드**는 특정 리소스를 `GET` 메서드로 요청했을 때 돌아올 헤더를 요청합니다.

`HEAD` 메서드에 대한 응답은 본문을 가져선 안되며, 본문이 존재하더라도 무시해야 합니다. 그러나, `Content-Length`처럼 본문 콘텐츠를 설명하는 개체 헤더는 포함할 수 있습니다. 이 때, 개체 헤더는 비어있어야 하는 `HEAD`의 본문과는 관련이 없고, 대신 `GET` 메서드로 동일한 리소스를 요청했을 때의 본문을 설명합니다.

`HEAD` 요청의 응답이 캐시했던 이전 `GET` 메서드의 응답을 유효하지 않다고 표시할 경우, 새로운 `GET` 요청을 생성하지 않더라도 캐시를 무효화합니다.

|  |  |
| --- | --- |
| 요청에 본문 존재 | 아니오 |
| 성공 응답에 본문 존재 | 아니오 |
| 안전함 | 예 |
| 멱등성 | 예 |
| 캐시 가능 | 예 |
| HTML 양식에서 사용 가능 | 아니오 |

구문
--
```

HEAD /index.html
```

명세
--

| Specification |
| --- |
| HTTP Semantics # HEAD |

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

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

같이 보기
-----

* `GET`
POST
====

**HTTP `POST` 메서드**는 서버로 데이터를 전송합니다. 요청 본문의 유형은 `Content-Type` 헤더로 나타냅니다.

`PUT`과 `POST`의 차이는 멱등성으로, `PUT`은 멱등성을 가집니다. `PUT`은 한 번을 보내도, 여러 번을 연속으로 보내도 같은 효과를 보입니다. 즉, 부수 효과(side effect)가 없습니다.

`POST` 요청은 보통 HTML 양식을 통해 서버에 전송하며, 서버에 변경사항을 만듭니다. 이 경우의 콘텐츠 유형(`Content-Type`)은 *`<form>` 요소의 `enctype` 특성이나 `<input>` (en-US), `<button>`* 요소의 *`formenctype` (en-US) 특성 안에 적당한 문자열을 넣어 결정합니다.*

* `application/x-www-form-urlencoded`: &으로 분리되고, "=" 기호로 값과 키를 연결하는 key-value tuple로 인코딩되는 값입니다. 영어 알파벳이 아닌 문자들은 percent encoded 으로 인코딩됩니다. 따라서, 이 content type은 바이너리 데이터에 사용하기에는 적절치 않습니다. (바이너리 데이터에는 use `multipart/form-data` 를 사용해 주세요.)\_
* *`multipart/form-data`*
* *`text/plain`*

`POST` 요청을 HTML 양식 외의 다른 방법(`XMLHttpRequest` 등)으로 전송할 땐 요청의 본문이 어떤 형태도 취할 수 있습니다. HTTP 1.1 규격에 정의된 바와 같이, `POST`는 다음의 기능을 포함하는 균일한 메서드를 허용하도록 설계되었습니다.

* 기존 리소스에 주석달기
* 게시판, 뉴스 그룹, 메일링 리스트나 이와 유사한 시스템에 글 올리기
* 회원가입 모달로 새로운 사용자 추가하기
* 양식 전송 결과 등 데이터 블록을 데이터 처리 프로세스에 보내기
* 이어붙이기 연산을 통한 데이터베이스 확장

|  |  |
| --- | --- |
| 요청에 본문 존재 | 예 |
| 성공 응답에 본문 존재 | 예 |
| 안전함 | 아니오 |
| 멱등성 | 아니오 |
| 캐시 가능 | 신선도 정보 포함 시 |
| HTML 양식에서 사용 가능 | 예 |

구문
--
```

POST /index.html
```

예제
--

다음은 `application/x-www-form-urlencoded` 콘텐츠 유형을 사용하는 간단한 형태의 양식 제출 예시입니다.


```http
POST / HTTP/1.1
Host: foo.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 13

say=Hi&to=Mom
```


`multipart/form-data` 콘텐츠 유형을 사용하는 예시입니다.


```http
POST /test.html HTTP/1.1
Host: example.org
Content-Type: multipart/form-data;boundary="boundary"

--boundary
Content-Disposition: form-data; name="field1"

value1
--boundary
Content-Disposition: form-data; name="field2"; filename="example.txt"

value2
--boundary--
```

명세
--

| Specification |
| --- |
| HTTP Semantics # POST |

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

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

같이 보기
-----

* `Content-Type`
* `Content-Disposition`
* `GET`
PUT
===

**HTTP `PUT` 메서드**는 요청 페이로드를 사용해 새로운 리소스를 생성하거나, 대상 리소스를 나타내는 데이터를 대체합니다.

`PUT`과 `POST`의 차이는 멱등성으로, `PUT`은 멱등성을 가집니다. `PUT`은 한 번을 보내도, 여러 번을 연속으로 보내도 같은 효과를 보입니다. 즉, 부수 효과가 없습니다.

|  |  |
| --- | --- |
| 요청에 본문 존재 | 예 |
| 성공 응답에 본문 존재 | 아니오 |
| 안전함 | 아니오 |
| 멱등성 | 예 |
| 캐시 가능 | 아니오 |
| HTML 양식에서 사용 가능 | 아니오 |

구문
--
```

PUT /new.html HTTP/1.1
```

예제
--

### 요청
```

PUT /new.html HTTP/1.1
Host: example.com
Content-type: text/html
Content-length: 16

<p>New File</p>
```

### 응답

대상 리소스를 나타내는 데이터가 없고, PUT 요청이 성공적으로 하나를 새로 생성한 경우, 출처 서버는 반드시 사용자 에이전트에게 `201` (`Created`) 응답을 보내 해당 사항을 알려줘야 합니다.
```

HTTP/1.1 201 Created
Content-Location: /new.html
```

대상 리소스를 나타내는 데이터가 있고, 이를 요청에 포함된 자료에 준하여 성공적으로 수정했다면, 출처 서버는 반드시 `200` (`OK`) 또는 `204` (`No Content`) 응답을 보내 성공을 알려줘야 합니다.
```

HTTP/1.1 204 No Content
Content-Location: /existing.html
```

명세
--

| Specification |
| --- |
| HTTP Semantics # PUT |

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

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

같이 보기
-----

* `201`
* `204`