filter - CSS: Cascading Style Sheets

filter
======

CSS **`filter`** 속성은 흐림 효과나 색상 변형 등 그래픽 효과를 요소에 적용합니다. 보통 필터는 이미지, 배경, 테두리 렌더링을 조정하는 데 쓰입니다.

CSS 표준은 미리 정의된 효과를 내는 몇 가지 함수를 포함하고 있습니다. SVG 필터 요소 (en-US)를 가리키는 URL 참조를 사용하여 SVG 필터를 적용할 수도 있습니다.

시도해보기
-----

구문
--

```css
/\* SVG 필터를 가리키는 URL \*/
filter: url("filters.svg#filter-id");

/\* <filter-function> 값 \*/
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/\* 다중 값 \*/
filter: contrast(175%) brightness(3%);

/\* 필터 없음 \*/
filter: none;

/\* 전역 값 \*/
filter: inherit;
filter: initial;
filter: unset;
```

함수를 사용하려면 다음 구문을 사용하세요.
```

filter: <filter-function> [<filter-function>]* | none
```

SVG `<filter>` (en-US) 요소에 대한 참조를 사용하려면 다음 구문을 사용하세요.
```

filter: url(svg-url#element-id)
```

### 보간

보간의 처음과 끝 필터의 함수 목록 길이가 같고, 그 안에 `<url>()` 값이 없으면, 각 필터 함수는 스스로의 특정 규칙을 따라 보간됩니다. 함수의 길이가 서로 다를 때는 긴 필터 목록에만 존재하는 필터를 짧은 필터 목록에 추가하며, 이 때 추가된 필터의 값으로는 누락 값(누락 시의 기본값)을 사용합니다. 이후 각 필터 함수는 서로 동일한 길이일 때와 같은 방식으로 보간합니다. 만약 한쪽의 필터가 `none`일 경우 다른 쪽 필터 목록을 모두 가져오고, 각각에 누락 값을 대입한 후 보간합니다. 이 외의 경우에는 이산적 보간을 사용합니다.

함수
--

`filter` 속성은 `none` 또는 아래의 함수를 하나 이상 사용해 지정할 수 있습니다. 어떤 함수의 매개변수가 유효하지 않다면, 그 함수는 `none`을 반환합니다. 따로 명시하지 않으면 백분율 값(`34%` 등)을 받는 함수는 그 백분율의 소수 표기(`0.34` 등)도 받을 수 있습니다.

### SVG 필터

#### `url()`

SVG 필터 (en-US)를 가리키는 URI를 받습니다. 외부 XML 파일에 포함된 필터도 가능합니다.

```css
filter: url(resources.svg#c1);
```

### 필터 함수

#### `blur()`

`blur()` 함수는 주어진 이미지에 가우시안 블러를 적용합니다. `radius` 값은 정규 분포의 표준 편차, 즉 화면에서 혼합할 픽셀의 수를 지정하므로 값이 클수록 이미지가 흐려집니다. 보간 시 누락값은 `0`입니다. 매개변수는 CSS 길이로 명시되어 있지만 백분율 값은 받지 않습니다.

```css
filter: blur(5px);
```

```
  <table class="standard-table">
  <thead>
    <tr>
      <th align="left" scope="col">Original image</th>
      <th align="left" scope="col">Live example</th>
      <th align="left" scope="col">SVG Equivalent</th>
      <th align="left" scope="col">Static example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img alt="Test\_Form.jpg" id="img1" class="internal default" src="/files/3710/Test\_Form\_2.jpg" style="width: 100%;" /></td>
      <td><img alt="Test\_Form.jpg" id="img2" class="internal default" src="/files/3710/Test\_Form\_2.jpg" style="width: 100%;" /></td>
      <td><div class="svg-container"><svg id="img3" viewbox="0 0 233 176">
  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%" >
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
  </filter>
  <image xlink:href="/files/3710/Test\_Form\_2.jpeg" filter="url(#svgBlur)" x="5%" y="5%" width="212px" height="161px" />
</svg><div></td>
      <td><img alt="Test\_Form\_s.jpg" id="img4" class="internal default" src="/files/3711/Test\_Form\_2\_s.jpg" style="width: 100%;" /></td>
    </tr>
  </tbody>
</table>
```

```
html {
  height: 100%;
}
body {
  font:
    14px/1.286 "Lucida Grande",
    "Lucida Sans Unicode",
    "DejaVu Sans",
    Lucida,
    Arial,
    Helvetica,
    sans-serif;
  color: rgb(51, 51, 51);
  height: 100%;
  overflow: hidden;
}
#img2 {
  width: 100%;
  height: auto;
  -moz-filter: blur(5px);
  -webkit-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}
table.standard-table {
  border: 1px solid rgb(187, 187, 187);
  border-collapse: collapse;
  border-spacing: 0px;
  margin: 0px 0px 1.286em;
  height: 100%;
  width: 85%;
}
table.standard-table th {
  border: 1px solid rgb(187, 187, 187);
  padding: 0px 5px;
  background: none repeat scroll 0% 0% rgb(238, 238, 238);
  text-align: left;
  font-weight: bold;
}
table.standard-table td {
  padding: 5px;
  border: 1px solid rgb(204, 204, 204);
  text-align: left;
  vertical-align: top;
  width: 25%;
  height: auto;
}
#img3 {
  height: 100%;
}
```

```html
<svg
 style="position: absolute; top: -99999px"
 xmlns="http://www.w3.org/2000/svg">
  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
  </filter>
</svg>
```

#### `brightness()`

`brightness()` 함수는 주어진 이미지에 선형 배수를 적용하여 이미지를 밝거나 어둡게 표시합니다. `0%`일 경우 완전히 검은색 이미지가 되고, `100%`일 경우 이미지가 그대로 유지되며, 이외의 값은 효과의 선형 배수로 작용합니다. `100%`보다 큰 값도 허용되며, 이때는 더 밝은 이미지가 생성됩니다. 보간 시 누락값은 `1`입니다.

```css
filter: brightness(0.5);
```

```html
<svg
 style="position: absolute; top: -99999px"
 xmlns="http://www.w3.org/2000/svg">
  <filter id="brightness">
    <feComponentTransfer>
      <feFuncR type="linear" slope="[amount]" />
      <feFuncG type="linear" slope="[amount]" />
      <feFuncB type="linear" slope="[amount]" />
    </feComponentTransfer>
  </filter>
</svg>
```

```
<table class="standard-table">
  <thead>
    <tr>
      <th align="left" scope="col">Original image</th>
      <th align="left" scope="col">Live example</th>
      <th align="left" scope="col">SVG Equivalent</th>
      <th align="left" scope="col">Static example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img alt="Test\_Form.jpg" id="img1" class="internal default" src="/files/3708/Test\_Form.jpg" style="width: 100%;" /></td>
      <td><img alt="Test\_Form.jpg" id="img2" class="internal default" src="/files/3708/Test\_Form.jpg" style="width: 100%;" /></td>
      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 286 217">
 <filter id="brightness">
    <feComponentTransfer>
        <feFuncR type="linear" slope="2"/>
        <feFuncG type="linear" slope="2"/>
        <feFuncB type="linear" slope="2"/>
    </feComponentTransfer>
  </filter>
  <image xlink:href="/files/3708/Test\_Form.jpg" filter="url(#brightness)" width="286px" height="217px" />
</svg><div></td>
      <td><img alt="Test\_Form\_s.jpg" id="img4" class="internal default" src="/files/3709/Test\_Form\_s.jpg" style="width: 100%;" /></td>
    </tr>
  </tbody>
</table>
```

```
html {
  height: 100%;
}
body {
  font:
    14px/1.286 "Lucida Grande",
    "Lucida Sans Unicode",
    "DejaVu Sans",
    Lucida,
    Arial,
    Helvetica,
    sans-serif;
  color: rgb(51, 51, 51);
  height: 100%;
  overflow: hidden;
}
#img2 {
  width: 100%;
  height: auto;
  -moz-filter: brightness(2);
  -webkit-filter: brightness(2);
  -o-filter: brightness(2);
  -ms-filter: brightness(2);
  filter: brightness(2);
}
table.standard-table {
  border: 1px solid rgb(187, 187, 187);
  border-collapse: collapse;
  border-spacing: 0px;
  margin: 0px 0px 1.286em;
  height: 100%;
  width: 85%;
}
table.standard-table th {
  border: 1px solid rgb(187, 187, 187);
  padding: 0px 5px;
  background: none repeat scroll 0% 0% rgb(238, 238, 238);
  text-align: left;
  font-weight: bold;
}
table.standard-table td {
  padding: 5px;
  border: 1px solid rgb(204, 204, 204);
  text-align: left;
  vertical-align: top;
  width: 25%;
  height: auto;
}
#img3 {
  height: 100%;
}
```

#### `contrast()`

`contrast()` 함수는 주어진 이미지의 대비를 조정합니다. `0%`일 경우 완전히 회색 이미지가 되고, `100%`일 경우 이미지가 그대로 유지됩니다. `100%`보다 큰 값도 허용되며, 이때는 대비가 더 큰 이미지가 생성됩니다. 보간 시 누락값은 `1`입니다.

```css
filter: contrast(200%);
```

```html
<svg
 style="position: absolute; top: -99999px"
 xmlns="http://www.w3.org/2000/svg">
  <filter id="contrast">
    <feComponentTransfer>
      <feFuncR
 type="linear"
 slope="[amount]"
 intercept="-(0.5 \* [amount]) + 0.5" />
      <feFuncG
 type="linear"
 slope="[amount]"
 intercept="-(0.5 \* [amount]) + 0.5" />
      <feFuncB
 type="linear"
 slope="[amount]"
 intercept="-(0.5 \* [amount]) + 0.5" />
    </feComponentTransfer>
  </filter>
</svg>
```

```
<table class="standard-table">
  <thead>
    <tr>
      <th align="left" scope="col">Original image</th>
      <th align="left" scope="col">Live example</th>
      <th align="left" scope="col">SVG Equivalent</th>
      <th align="left" scope="col">Static example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img alt="Test\_Form\_3.jpeg" id="img1" class="internal default" src="/files/3712/Test\_Form\_3.jpeg" style="width: 100%;" /></td>
      <td><img alt="Test\_Form\_3.jpg" id="img2" class="internal default" src="/files/3712/Test\_Form\_3.jpeg" style="width: 100%;" /></td>
      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 240 151">
 <filter id="contrast">
    <feComponentTransfer>
      <feFuncR type="linear" slope="2" intercept="-0.5"/>
      <feFuncG type="linear" slope="2" intercept="-0.5"/>
      <feFuncB type="linear" slope="2" intercept="-0.5"/>
    </feComponentTransfer>
  </filter>
  <image xlink:href="/files/3712/Test\_Form\_3.jpeg" filter="url(#contrast)" width="240px" height="151px" />
</svg><div></td>
      <td><img alt="Test\_Form\_s.jpg" id="img4" class="internal default" src="/files/3713/Test\_Form\_3\_s.jpg" style="width: 100%;" /></td>
    </tr>
  </tbody>
</table>
```

```
html {
  height: 100%;
}
body {
  font:
    14px/1.286 "Lucida Grande",
    "Lucida Sans Unicode",
    "DejaVu Sans",
    Lucida,
    Arial,
    Helvetica,
    sans-serif;
  color: rgb(51, 51, 51);
  height: 100%;
  overflow: hidden;
}
#img2 {
  width: 100%;
  height: auto;
  -moz-filter: contrast(200%);
  -webkit-filter: contrast(200%);
  -o-filter: contrast(200%);
  -ms-filter: contrast(200%);
  filter: contrast(200%);
}
table.standard-table {
  border: 1px solid rgb(187, 187, 187);
  border-collapse: collapse;
  border-spacing: 0px;
  margin: 0px 0px 1.286em;
  width: 85%;
  height: 100%;
}
table.standard-table th {
  border: 1px solid rgb(187, 187, 187);
  padding: 0px 5px;
  background: none repeat scroll 0% 0% rgb(238, 238, 238);
  text-align: left;
  font-weight: bold;
}
table.standard-table td {
  padding: 5px;
  border: 1px solid rgb(204, 204, 204);
  text-align: left;
  vertical-align: top;
  width: 25%;
  height: auto;
}
#img3 {
  height: 100%;
}
```

#### `drop-shadow()`

`drop-shadow()` (en-US) 함수는 주어진 이미지에 그림자 효과를 적용합니다. 이때 추가하는 그림자는, 주어진 이미지의 알파 마스크에 특정한 색상과 오프셋, 흐림 효과를 적용하고 이미지 밑에 합성한 것입니다. 이 함수는 `inset` 키워드를 제외하고 (CSS3 Backgrounds에 정의된) `<shadow>` 자료형의 매개변수를 그대로 받을 수 있습니다. `drop-shadow()`는 보다 확립된 `box-shadow` (en-US) 속성과 비슷하지만, 일부 브라우저에서는 필터를 사용했을 때 성능 향상을 위해 하드웨어 가속을 사용한다는 차이점이 있습니다. `<shadow>` 값의 매개변수는 다음과 같습니다.

`<offset-x>` `<offset-y>` (필수)

 그림자 오프셋을 설정하는 두 `<length>` 값입니다. `<offset-x>`는 가로 거리를 지정하며, 음수일 경우 그림자가 왼쪽에 배치됩니다. `<offset-y>`는 세로 거리를 지정하며, 음수일 경우 그림자가 위쪽에 배치됩니다. 가능한 단위는 `<length>`를 참조하세요.
 두 값이 모두 `0`이면 그림자가 요소 바로 밑에 배치되며, `<blur-radius>`나 `<spread-radius>`를 설정한 경우 흐림 효과를 표시할 수 있습니다.

`<blur-radius>` (선택)

세 번째 `<length>` 값입니다. 클수록 흐려지는 반경이 커지고 그림자가 옅어집니다. 음수 값은 사용할 수 없습니다. 값을 지정하지 않으면 `0`으로 취급하여 그림자 가장자리가 날카로워집니다.

`<color>` (선택)

가능한 키워드 및 표기법은 `<color>`를 참조하세요. 값을 지정하지 않았을 때의 색상은 브라우저에 따라 다릅니다. 보통 `<color>` 속성의 값을 사용하지만, 현재 Safari는 투명한 그림자를 그리는 것을 주의하세요.

```css
filter: drop-shadow(16px 16px 10px black);
```

```html
<svg
 style="position: absolute; top: -999999px"
 xmlns="http://www.w3.org/2000/svg">
  <filter id="drop-shadow">
    <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]" />
    <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur" />
    <feFlood flood-color="[color]" />
    <feComposite in2="offsetblur" operator="in" />
    <feMerge>
      <feMergeNode />
      <feMergeNode in="SourceGraphic" />
    </feMerge>
  </filter>
</svg>
```

```
<table class="standard-table">
  <thead>
    <tr>
      <th align="left" scope="col">Original image</th>
      <th align="left" scope="col">Live example</th>
      <th align="left" scope="col">SVG Equivalent</th>
      <th align="left" scope="col">Static example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img alt="Test\_Form\_4.jpeg" id="img1" class="internal default" src="/files/3714/Test\_Form\_4.jpeg" style="width: 100%;" /></td>
      <td><img alt="Test\_Form\_4.jpg" id="img2" class="internal default" src="/files/3714/Test\_Form\_4.jpeg" style="width: 100%;" /></td>
      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 239 187">
 <filter id="drop-shadow">
    <feGaussianBlur in="SourceAlpha" stdDeviation="5"/>
    <feOffset dx="16" dy="16"/>
    <feMerge>
      <feMergeNode/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
 </filter>
 <image xlink:href="/files/3714/Test\_Form\_4.jpeg" filter="url(#drop-shadow)" width="213px" height="161px" />
</svg><div></td>
      <td><img alt="Test\_Form\_4\_s.jpg" id="img4" class="internal default" src="/files/3715/Test\_Form\_4\_s.jpg" style="width: 100%;" /></td>
    </tr>
    <tr>
      <td><img alt="Test\_Form\_4 distorded border - Original image" id="img11" class="internal default" src="/files/8467/Test\_Form\_4\_irregular-shape\_opacity-gradient.png" style="width: 100%;" /></td>
      <td><img alt="Test\_Form\_4 distorded border - Live example" id="img12" class="internal default" src="/files/8467/Test\_Form\_4\_irregular-shape\_opacity-gradient.png" style="width: 100%;" /></td>
      <td>
        <div class="svg-container">
          <svg xmlns="http://www.w3.org/2000/svg" id="img13" viewbox="0 0 239 187">
            <filter id="drop-shadow2">
              <feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
              <feOffset dx="8" dy="10"/>
              <feMerge>
                <feMergeNode/>
                <feMergeNode in="SourceGraphic"/>
              </feMerge>
            </filter>
            <image xlink:href="/files/8467/Test\_Form\_4\_irregular-shape\_opacity-gradient.png" filter="url(#drop-shadow2)" width="213px" height="161px" />
          </svg>
        <div>
      </td>
      <td><img alt="Test\_Form\_4 distorded border drop shadow - Static example" id="img14" class="internal default" src="/files/8469/Test\_Form\_4\_irregular-shape\_opacity-gradient\_drop-shadow.png" style="width: 100%;" /></td>
    </tr>
  </tbody>
</table>
```

```
html {
  height: 100%;
}
body {
  font:
    14px/1.286 "Lucida Grande",
    "Lucida Sans Unicode",
    "DejaVu Sans",
    Lucida,
    Arial,
    Helvetica,
    sans-serif;
  color: rgb(51, 51, 51);
  height: 100%;
  overflow: hidden;
}
#img2 {
  width: 100%;
  height: auto;
  -moz-filter: drop-shadow(16px 16px 10px black);
  -webkit-filter: drop-shadow(16px 16px 10px black);
  -o-filter: drop-shadow(16px 16px 10px black);
  -ms-filter: drop-shadow(16px 16px 10px black);
  filter: drop-shadow(16px 16px 10px black);
}
#img12 {
  width: 100%;
  height: auto;
  -moz-filter: drop-shadow(8px 9px 5px rgba(0, 0, 0, 0.8));
  -webkit-filter: drop-shadow(8px 9px 5px rgba(0, 0, 0, 0.8));
  -o-filter: drop-shadow(8px 9px 5px rgba(0, 0, 0, 0.8));
  -ms-filter: drop-shadow(8px 9px 5px rgba(0, 0, 0, 0.8));
  filter: drop-shadow(8px 9px 5px rgba(0, 0, 0, 0.8));
}
table.standard-table {
  border: 1px solid rgb(187, 187, 187);
  border-collapse: collapse;
  border-spacing: 0px;
  margin: 0px 0px 1.286em;
  width: 85%;
  height: 100%;
}
#irregular-shape {
  width: 64%;
}
table.standard-table th {
  border: 1px solid rgb(187, 187, 187);
  padding: 0px 5px;
  background: none repeat scroll 0% 0% rgb(238, 238, 238);
  text-align: left;
  font-weight: bold;
}
table.standard-table td {
  padding: 5px;
  border: 1px solid rgb(204, 204, 204);
  text-align: left;
  vertical-align: top;
  width: 25%;
  height: auto;
}
#img3,
#img13 {
  height: 100%;
}
```

#### `grayscale()`

`grayscale()` (en-US) 함수는 주어진 이미지를 흑백으로 변환합니다. `amount` 값은 흑백으로 전환하는 비율을 지정합니다. `100%`일 경우 완전히 흑백 이미지가 되고, `0%`일 경우 이미지가 그대로 유지되며, 그 사이의 값은 효과의 선형 배수로 작용합니다. 보간 시 누락 값은 `0`입니다.

```css
filter: grayscale(100%);
```

```
<table class="standard-table">
  <thead>
    <tr>
      <th align="left" scope="col">Original image</th>
      <th align="left" scope="col">Live example</th>
      <th align="left" scope="col">SVG Equivalent</th>
      <th align="left" scope="col">Static example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img alt="Test\_Form\_5.jpeg" id="img1" class="internal default" src="/files/3716/Test\_Form\_5.jpeg" style="width: 100%;" /></td>
      <td><img alt="Test\_Form\_5.jpg" id="img2" class="internal default" src="/files/3716/Test\_Form\_5.jpeg" style="width: 100%;" /></td>
      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 184">
 <filter id="grayscale">
    <feColorMatrix type="matrix"
 values="0.2126 0.7152 0.0722 0 0
 0.2126 0.7152 0.0722 0 0
 0.2126 0.7152 0.0722 0 0
 0 0 0 1 0"/>
  </filter>
  <image xlink:href="/files/3716/Test\_Form\_5.jpeg" filter="url(#grayscale)" width="276px" height="184px" />
</svg><div></td>
      <td><img alt="Test\_Form\_5\_s.jpg" id="img4" class="internal default" src="/files/3717/Test\_Form\_5\_s.jpg" style="width: 100%;" /></td>
    </tr>
  </tbody>
</table>
```

```
html {
  height: 100%;
}
body {
  font:
    14px/1.286 "Lucida Grande",
    "Lucida Sans Unicode",
    "DejaVu Sans",
    Lucida,
    Arial,
    Helvetica,
    sans-serif;
  color: rgb(51, 51, 51);
  height: 100%;
  overflow: hidden;
}
#img2 {
  width: 100%;
  height: auto;
  -moz-filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  filter: grayscale(100%);
}
table.standard-table {
  border: 1px solid rgb(187, 187, 187);
  border-collapse: collapse;
  border-spacing: 0px;
  margin: 0px 0px 1.286em;
  width: 85%;
  height: 100%;
}
table.standard-table th {
  border: 1px solid rgb(187, 187, 187);
  padding: 0px 5px;
  background: none repeat scroll 0% 0% rgb(238, 238, 238);
  text-align: left;
  font-weight: bold;
}
table.standard-table td {
  padding: 5px;
  border: 1px solid rgb(204, 204, 204);
  text-align: left;
  vertical-align: top;
  width: 25%;
  height: auto;
}
#img3 {
  height: 100%;
}
```

#### `hue-rotate()`

`hue-rotate()` (en-US) 함수는 주어진 이미지에 색조 회전을 적용합니다. `angle` 값은 입력 샘플을 조절할 색상환 각도입니다. `0deg`일 경우 이미지가 그대로 유지됩니다. 보간 시 누락 값은 `0`입니다. 최댓값이 존재하지는 않지만, `360deg` 이상의 값은 `0deg`와 `360deg` 사이를 순환합니다.

```css
filter: hue-rotate(90deg);
```

```
<table class="standard-table">
  <thead>
    <tr>
      <th align="left" scope="col">Original image</th>
      <th align="left" scope="col">Live example</th>
      <th align="left" scope="col">SVG Equivalent</th>
      <th align="left" scope="col">Static example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img alt="Test\_Form\_6.jpeg" id="img1" class="internal default" src="/files/3718/Test\_Form\_6.jpeg" style="width: 100%;" /></td>
      <td><img alt="Test\_Form\_6.jpg" id="img2" class="internal default" src="/files/3718/Test\_Form\_6.jpeg" style="width: 100%;" /></td>
      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 266 190">
 <filter id="hue-rotate">
    <feColorMatrix type="hueRotate"
 values="90"/>
  </filter>
  <image xlink:href="/files/3718/Test\_Form\_6.jpeg" filter="url(#hue-rotate)" width="266px" height="190px" />
</svg><div></td>
      <td><img alt="Test\_Form\_6\_s.jpg" id="img4" class="internal default" src="/files/3719/Test\_Form\_6\_s.jpg" style="width: 100%;" /></td>
    </tr>
  </tbody>
</table>
```

```
html {
  height: 100%;
}
body {
  font:
    14px/1.286 "Lucida Grande",
    "Lucida Sans Unicode",
    "DejaVu Sans",
    Lucida,
    Arial,
    Helvetica,
    sans-serif;
  color: rgb(51, 51, 51);
  height: 100%;
  overflow: hidden;
}
#img2 {
  width: 100%;
  height: auto;
  -moz-filter: hue-rotate(90deg);
  -webkit-filter: hue-rotate(90deg);
  -o-filter: hue-rotate(90deg);
  -ms-filter: hue-rotate(90deg);
  filter: hue-rotate(90deg);
}
table.standard-table {
  border: 1px solid rgb(187, 187, 187);
  border-collapse: collapse;
  border-spacing: 0px;
  margin: 0px 0px 1.286em;
  width: 85%;
  height: 100%;
}
table.standard-table th {
  border: 1px solid rgb(187, 187, 187);
  padding: 0px 5px;
  background: none repeat scroll 0% 0% rgb(238, 238, 238);
  text-align: left;
  font-weight: bold;
}
table.standard-table td {
  padding: 5px;
  border: 1px solid rgb(204, 204, 204);
  text-align: left;
  vertical-align: top;
  width: 25%;
  height: auto;
}
#img3 {
  height: 100%;
}
```

```html
<svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="svgHueRotate" >
    <feColorMatrix type="hueRotate" values="[angle]" />
  <filter />
</svg>
```

#### `invert()`

`invert()` (en-US) 함수는 주어진 이미지의 색을 반전합니다. `amount` 값이 변형 정도를 지정합니다. `100%`일 경우 색을 정반대로 바꾸고, `0%`일 경우 이미지를 그대로 유지하며, 그 사이의 값은 효과의 선형 배수로 작용합니다. 보간 시 누락 값은 `0`입니다.

```css
filter: invert(100%);
```

```
<table class="standard-table">
  <thead>
    <tr>
      <th align="left" scope="col">Original image</th>
      <th align="left" scope="col">Live example</th>
      <th align="left" scope="col">SVG Equivalent</th>
      <th align="left" scope="col">Static example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img alt="Test\_Form\_7.jpeg" id="img1" class="internal default" src="/files/3720/Test\_Form\_7.jpeg" style="width: 100%;" /></td>
      <td><img alt="Test\_Form\_7.jpg" id="img2" class="internal default" src="/files/3720/Test\_Form\_7.jpeg" style="width: 100%;" /></td>
      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 183 276">
 <filter id="invert">
    <feComponentTransfer>
        <feFuncR type="table" tableValues="1 0"/>
        <feFuncG type="table" tableValues="1 0"/>
        <feFuncB type="table" tableValues="1 0"/>
    </feComponentTransfer>
 </filter>
 <image xlink:href="/files/3720/Test\_Form\_7.jpeg" filter="url(#invert)" width="183px" height="276px" />
</svg><div></td>
      <td><img alt="Test\_Form\_7\_s.jpg" id="img4" class="internal default" src="/files/3721/Test\_Form\_7\_s.jpg" style="width: 100%;" /></td>
    </tr>
  </tbody>
</table>
```

```
html {
  height: 100%;
}
body {
  font:
    14px/1.286 "Lucida Grande",
    "Lucida Sans Unicode",
    "DejaVu Sans",
    Lucida,
    Arial,
    Helvetica,
    sans-serif;
  color: rgb(51, 51, 51);
  height: 100%;
  overflow: hidden;
}
#img2 {
  width: 100%;
  height: auto;
  -moz-filter: invert(100%);
  -webkit-filter: invert(100%);
  -o-filter: invert(100%);
  -ms-filter: invert(100%);
  filter: invert(100%);
}
table.standard-table {
  border: 1px solid rgb(187, 187, 187);
  border-collapse: collapse;
  border-spacing: 0px;
  margin: 0px 0px 1.286em;
  width: 85%;
  height: 100%;
}
table.standard-table th {
  border: 1px solid rgb(187, 187, 187);
  padding: 0px 5px;
  background: none repeat scroll 0% 0% rgb(238, 238, 238);
  text-align: left;
  font-weight: bold;
}
table.standard-table td {
  padding: 5px;
  border: 1px solid rgb(204, 204, 204);
  text-align: left;
  vertical-align: top;
  width: 25%;
  height: auto;
}
#img3 {
  height: 100%;
}
```

#### `opacity()`

`opacity()` (en-US) 함수는 주어진 이미지의 불투명도를 설정합니다. `amount` 값이 변형 정도를 지정합니다. `0%`일 경우 완전히 투명해지고, `100%`일 경우 이미지를 그대로 유지하며, 그 사이의 값은 효과의 선형 배수로 작용합니다. 즉 주어진 이미지 샘플을 `amount`와 곱하는 것과 같습니다. 보간 시 누락 값은 `1`입니다. 이 함수는 보다 확립된 `opacity` 속성과 비슷하지만, 일부 브라우저에서는 필터를 사용했을 때 성능 향상을 위해 하드웨어 가속을 사용한다는 차이점이 있습니다.

```css
filter: opacity(50%);
```

```
<table class="standard-table">
  <thead>
    <tr>
      <th align="left" scope="col">Original image</th>
      <th align="left" scope="col">Live example</th>
      <th align="left" scope="col">SVG Equivalent</th>
      <th align="left" scope="col">Static example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img alt="Test\_Form\_14.jpeg" id="img1" class="internal default" src="/files/3725/Test\_Form\_14.jpeg" style="width: 100%;" /></td>
      <td><img alt="Test\_Form\_14.jpg" id="img2" class="internal default" src="/files/3725/Test\_Form\_14.jpeg" style="width: 100%;" /></td>
      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 183">
 <filter id="opacity">
    <feComponentTransfer>
        <feFuncA type="table" tableValues="0 0.5">
    </feComponentTransfer>
 </filter>
 <image xlink:href="/files/3725/Test\_Form\_14.jpeg" filter="url(#opacity)" width="276px" height="183px" />
</svg><div></td>
      <td><img alt="Test\_Form\_14\_s.jpg" id="img4" class="internal default" src="/files/3726/Test\_Form\_14\_s.jpg" style="width: 100%;" /></td>
    </tr>
  </tbody>
</table>
```

```
html {
  height: 100%;
}
body {
  font:
    14px/1.286 "Lucida Grande",
    "Lucida Sans Unicode",
    "DejaVu Sans",
    Lucida,
    Arial,
    Helvetica,
    sans-serif;
  color: rgb(51, 51, 51);
  height: 100%;
  overflow: hidden;
}
#img2 {
  width: 100%;
  height: auto;
  -moz-filter: opacity(50%);
  -webkit-filter: opacity(50%);
  -o-filter: opacity(50%);
  -ms-filter: opacity(50%);
  filter: opacity(50%);
}
table.standard-table {
  border: 1px solid rgb(187, 187, 187);
  border-collapse: collapse;
  border-spacing: 0px;
  margin: 0px 0px 1.286em;
  width: 85%;
  height: 100%;
}
table.standard-table th {
  border: 1px solid rgb(187, 187, 187);
  padding: 0px 5px;
  background: none repeat scroll 0% 0% rgb(238, 238, 238);
  text-align: left;
  font-weight: bold;
}
table.standard-table td {
  padding: 5px;
  border: 1px solid rgb(204, 204, 204);
  text-align: left;
  vertical-align: top;
  width: 25%;
  height: auto;
}
#img3 {
  height: 100%;
}
```

#### `saturate()`

`saturate()` (en-US) 함수는 주어진 이미지의 채도를 변경합니다. `amount` 값이 변형 정도를 지정합니다. `0%`일 경우 완전히 무채색이 되고, `100%`일 경우 이미지를 그대로 유지하며, 그 사이의 값은 효과의 선형 배수로 작용합니다. `100%`보다 큰 값도 허용되며, 이때는 원본보다 채도가 큰 이미지를 생성합니다. 보간 시 누락 값은 `1`입니다.

```css
filter: saturate(200%);
```

```
<table class="standard-table">
  <thead>
    <tr>
      <th align="left" scope="col">Original image</th>
      <th align="left" scope="col">Live example</th>
      <th align="left" scope="col">SVG Equivalent</th>
      <th align="left" scope="col">Static example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img alt="Test\_Form\_9.jpeg" id="img1" class="internal default" src="/files/3722/Test\_Form\_9.jpeg" style="width: 100%;" /></td>
      <td><img alt="Test\_Form\_9.jpg" id="img2" class="internal default" src="/files/3722/Test\_Form\_9.jpeg" style="width: 100%;" /></td>
      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 201 239">
 <filter id="saturate">
    <feColorMatrix type="saturate"
 values="2"/>
 </filter>
 <image xlink:href="/files/3722/Test\_Form\_9.jpeg" filter="url(#saturate)" width="201px" height="239px" />
</svg><div></td>
      <td><img alt="Test\_Form\_9\_s.jpg" id="img4" class="internal default" src="/files/3724/Test\_Form\_9\_s.jpeg" style="width: 100%;" /></td>
    </tr>
  </tbody>
</table>
```

```
html {
  height: 100%;
}
body {
  font:
    14px/1.286 "Lucida Grande",
    "Lucida Sans Unicode",
    "DejaVu Sans",
    Lucida,
    Arial,
    Helvetica,
    sans-serif;
  color: rgb(51, 51, 51);
  height: 100%;
  overflow: hidden;
}
#img2 {
  width: 100%;
  height: auto;
  -moz-filter: saturate(200%);
  -webkit-filter: saturate(200%);
  -o-filter: saturate(200%);
  -ms-filter: saturate(200%);
  filter: saturate(200%);
}
table.standard-table {
  border: 1px solid rgb(187, 187, 187);
  border-collapse: collapse;
  border-spacing: 0px;
  margin: 0px 0px 1.286em;
  width: 85%;
  height: 100%;
}
table.standard-table th {
  border: 1px solid rgb(187, 187, 187);
  padding: 0px 5px;
  background: none repeat scroll 0% 0% rgb(238, 238, 238);
  text-align: left;
  font-weight: bold;
}
table.standard-table td {
  padding: 5px;
  border: 1px solid rgb(204, 204, 204);
  text-align: left;
  vertical-align: top;
  width: 25%;
  height: auto;
}
#img3 {
  height: 100%;
}
```

#### `sepia()`

`sepia()` (en-US) 함수는 주어진 이미지를 세피아로 변환합니다. `amount` 값이 변형 정도를 지정합니다. `100%`일 경우 완전히 세피아가 되고, `0%`에서는 이미지를 그대로 유지하며, 그 사이의 값은 효과의 선형 배수로 작용합니다. 보간 시 누락 값은 `0`입니다.

```css
filter: sepia(100%);
```

```
<table class="standard-table">
  <thead>
    <tr>
      <th align="left" scope="col">Original image</th>
      <th align="left" scope="col">Live example</th>
      <th align="left" scope="col">SVG Equivalent</th>
      <th align="left" scope="col">Static example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img alt="Test\_Form\_12.jpeg" id="img1" class="internal default" src="/files/3727/Test\_Form\_12.jpeg" style="width: 100%;" /></td>
      <td><img alt="Test\_Form\_12.jpg" id="img2" class="internal default" src="/files/3727/Test\_Form\_12.jpeg" style="width: 100%;" /></td>
      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 259 194">
 <filter id="sepia">
    <feColorMatrix type="matrix"
 values="0.393 0.769 0.189 0 0
 0.349 0.686 0.168 0 0
 0.272 0.534 0.131 0 0
 0 0 0 1 0"/>
 </filter>
 <image xlink:href="/files/3727/Test\_Form\_12.jpeg" filter="url(#sepia)" width="259px" height="194px" />
</svg><div></td>
      <td><img alt="Test\_Form\_12\_s.jpg" id="img4" class="internal default" src="/files/3728/Test\_Form\_12\_s.jpg" style="width: 100%;" /></td>
    </tr>
  </tbody>
</table>
```

```
html {
  height: 100%;
}
body {
  font:
    14px/1.286 "Lucida Grande",
    "Lucida Sans Unicode",
    "DejaVu Sans",
    Lucida,
    Arial,
    Helvetica,
    sans-serif;
  color: rgb(51, 51, 51);
  height: 100%;
  overflow: hidden;
}
#img2 {
  width: 100%;
  height: auto;
  -moz-filter: sepia(100%);
  -webkit-filter: sepia(100%);
  -o-filter: sepia(100%);
  -ms-filter: sepia(100%);
  filter: sepia(100%);
}
table.standard-table {
  border: 1px solid rgb(187, 187, 187);
  border-collapse: collapse;
  border-spacing: 0px;
  margin: 0px 0px 1.286em;
  width: 85%;
  height: 100%;
}
table.standard-table th {
  border: 1px solid rgb(187, 187, 187);
  padding: 0px 5px;
  background: none repeat scroll 0% 0% rgb(238, 238, 238);
  text-align: left;
  font-weight: bold;
}
table.standard-table td {
  padding: 5px;
  border: 1px solid rgb(204, 204, 204);
  text-align: left;
  vertical-align: top;
  width: 25%;
  height: auto;
}
#img3 {
  height: 100%;
}
```

함수 조합
-----

원하는 만큼 함수를 조합해서 그려지는 모습을 바꿀 수 있습니다. 다음 에제는 이미지의 대비와 밝기를 동시에 높입니다.

```css
filter: contrast(175%) brightness(103%);
```

```
<table class="standard-table">
  <thead>
    <tr>
      <th align="left" scope="col">Original image</th>
      <th align="left" scope="col">Live example</th>
      <th align="left" scope="col">Static example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img
 alt="Test\_Form\_8.jpeg"
 id="img1"
 class="internal default"
 src="/files/3729/Test\_Form\_8.jpeg"
 style="width: 100%;" />
      </td>
      <td>
        <img
 alt="Test\_Form\_8.jpg"
 id="img2"
 class="internal default"
 src="/files/3729/Test\_Form\_8.jpeg"
 style="width: 100%;" />
      </td>
      <td>
        <img
 alt="Test\_Form\_8\_s.jpg"
 id="img4"
 class="internal default"
 src="/files/3730/Test\_Form\_8\_s.jpeg"
 style="width: 100%;" />
      </td>
    </tr>
  </tbody>
</table>
```

```
html {
  height: 100%;
}
body {
  font:
    14px/1.286 "Lucida Grande",
    "Lucida Sans Unicode",
    "DejaVu Sans",
    Lucida,
    Arial,
    Helvetica,
    sans-serif;
  color: rgb(51, 51, 51);
  height: 100%;
  overflow: hidden;
}
#img2 {
  width: 100%;
  height: auto;
  -moz-filter: contrast(175%) brightness(103%);
  -webkit-filter: contrast(175%) brightness(103%);
  -o-filter: contrast(175%) brightness(103%);
  -ms-filter: contrast(175%) brightness(103%);
  filter: contrast(175%) brightness(103%);
}
table.standard-table {
  border: 1px solid rgb(187, 187, 187);
  border-collapse: collapse;
  border-spacing: 0px;
  margin: 0px 0px 1.286em;
  width: 85%;
  height: 100%;
}
table.standard-table th {
  border: 1px solid rgb(187, 187, 187);
  padding: 0px 5px;
  background: none repeat scroll 0% 0% rgb(238, 238, 238);
  text-align: left;
  font-weight: bold;
}
table.standard-table td {
  padding: 5px;
  border: 1px solid rgb(204, 204, 204);
  text-align: left;
  vertical-align: top;
  width: 25%;
  height: auto;
}
#img3 {
  height: 100%;
}
```

형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | `none` |
| 적용대상 | all elements; In SVG, it applies to container elements excluding the `defs` (en-US) element and all graphics elements |
| 상속 | no |
| 계산 값 | as specified |
| Animation type | a filter function list |

형식 구문
-----
```

filter =
  none                 |
  <filter-value-list>

<filter-value-list> =
  [ <filter-function> | <url> ]+

<filter-function> =
  <blur()>         |
  <brightness()>   |
  <contrast()>     |
  <drop-shadow()>  |
  <grayscale()>    |
  <hue-rotate()>   |
  <invert()>       |
  <opacity()>      |
  <sepia()>        |
  <saturate()>

<url> =
  <url()>  |
  <src()>

<blur()> =
  blur( <length>? )

<brightness()> =
  brightness( [ <number> | <percentage> ]? )

<contrast()> =
  contrast( [ <number> | <percentage> ]? )

<drop-shadow()> =
  drop-shadow( [ <color>? && <length>{2,3} ] )

<grayscale()> =
  grayscale( [ <number> | <percentage> ]? )

<hue-rotate()> =
  hue-rotate( [ <angle> | <zero> ]? )

<invert()> =
  invert( [ <number> | <percentage> ]? )

<opacity()> =
  opacity( [ <number> | <percentage> ]? )

<sepia()> =
  sepia( [ <number> | <percentage> ]? )

<saturate()> =
  saturate( [ <number> | <percentage> ]? )

<url()> =
  url( <string> (en-US) <url-modifier>\* )  |
  <url-token>

<src()> =
  src( <string> (en-US) <url-modifier>\* )

```

예제
--

### 필터 함수 적용하기

미리 정의된 함수는 다음 예제처럼 사용할 수 있습니다. 각 함수 문서에서 더 자세한 내용을 살펴보세요.

```css
.mydiv {
  filter: grayscale(50%);
}

/\* 모든 이미지를 50% 흑백 처리하고 10px 흐리게 \*/
img {
  filter: grayscale(0.5) blur(10px);
}
```

### SVG 필터 적용하기

URL 함수와 SVG 리소스를 사용하는 방법은 다음과 같습니다.

```css
.target {
  filter: url(#c1);
}

.mydiv {
  filter: url(commonfilters.xml#large-blur);
}
```

명세
--

| Specification |
| --- |
| Filter Effects Module Level 1 # FilterProperty |

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

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

같이 보기
-----

* HTML 콘텐츠에 SVG 효과 적용하기 (en-US)
* `mask` 속성
* SVG
* Understanding CSS filters (HTML5Rocks! 글)


CSS Masking - CSS: Cascading Style Sheets

CSS Masking
===========

**CSS Masking**은 마스킹 및 클리핑을 포함해 시각 요소의 부분 또는 전체를 숨기기 위한 수단을 정의하는 CSS 모듈입니다.

참고서
---

### 속성

* `clip` (en-US)
지원이 중단되었습니다
* `clip-path`
* `clip-rule`
* `mask`
* `mask-border` (en-US)
* `mask-border-mode` (en-US)
* `mask-border-outset` (en-US)
* `mask-border-repeat` (en-US)
* `mask-border-slice` (en-US)
* `mask-border-source` (en-US)
* `mask-border-width` (en-US)
* `mask-clip` (en-US)
* `mask-composite` (en-US)
* `mask-image` (en-US)
* `mask-mode` (en-US)
* `mask-origin` (en-US)
* `mask-position` (en-US)
* `mask-repeat` (en-US)
* `mask-size` (en-US)
* `mask-type` (en-US)
명세서
---

| Specification |
| --- |
| CSS Masking Module Level 1  |


CSS 배경 및 테두리 - CSS: Cascading Style Sheets

CSS 배경 및 테두리
============

**CSS Backgrounds and Borders** 모듈의 스타일은 배경에 색과 이미지를 채우거나, 기타 다른 방식으로 수정할 수 있습니다. 또한 테두리를 선이나 이미지로 장식할 수 있고, 직각 뿐 아니라 원형 테두리로 만들 수도 있습니다. (추가로, 요소 박스를 그림자로 꾸밀 수도 있습니다.)

참고서
---

### 속성

* `background`
* `background-attachment`
* `background-clip`
* `background-color`
* `background-image`
* `background-origin`
* `background-position` (en-US)
* `background-position-x` (en-US)
* `background-position-y` (en-US)
* `background-repeat`
* `background-size` (en-US)
* `border`
* `border-bottom`
* `border-bottom-color`
* `border-bottom-left-radius` (en-US)
* `border-bottom-right-radius` (en-US)
* `border-bottom-style`
* `border-bottom-width`
* `border-collapse`
* `border-color`
* `border-image`
* `border-image-outset`
* `border-image-repeat`
* `border-image-slice`
* `border-image-source`
* `border-image-width`
* `border-left`
* `border-left-color`
* `border-left-style`
* `border-left-width`
* `border-radius`
* `border-right`
* `border-right-color`
* `border-right-style`
* `border-right-width`
* `border-style`
* `border-top`
* `border-top-color`
* `border-top-left-radius` (en-US)
* `border-top-right-radius` (en-US)
* `border-top-style`
* `border-top-width`
* `border-width`
* `box-shadow` (en-US)
도구
--

다수의 배경 사용하기

하나의 요소에 여러 배경을 적용하는 법을 배웁니다.

배경 이미지 크기 조정하기

배경 이미지의 크기와 반복 여부를 설정하는 법을 배웁니다.

CSS로 HTML 요소에 색 입히기 (en-US)

HTML 요소에 테두리를 비롯한 색상을 CSS로 적용하는 법을 배웁니다.

Border-image 생성기

테두리 이미지를 실시간으로 확인하며 만들 수 있는 도구입니다.

Border-radius 생성기

둥근 모서리를 실시간으로 확인하며 만들 수 있는 도구입니다.

Box-shadow 생성기 (en-US)

요소 뒤의 그림자를 실시간으로 확인하며 만들 수 있는 도구입니다.

명세
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3  |


<transform-function> - CSS: Cascading Style Sheets

<transform-function>
====================

CSS **`<transform-function>`** 자료형은 요소의 외형에 영향을 주는 변형을 나타냅니다. 변형 함수는 2D 또는 3D 공간 내에서 요소를 회전하고, 크기를 바꾸고, 왜곡하고, 이동할 수 있습니다. `transform` 속성에서 사용합니다.

변형을 수학적으로 표현하기
--------------

HTML요소의 크기와 형태, 그리고 요소에 가해진 변형을 표현할 땐 다양한 좌표계를 사용할 수 있습니다. 가장 흔히 사용하는건 직교좌표계이나, 가끔 동차좌표계도 쓰입니다.

### 직교좌표계

직교좌표계 평면 위의 점은 X 좌표(가로 좌표)와 Y 좌표(세로 좌표)를 사용해 표현하며, 벡터 표현 `(x, y)`를 사용해 나타냅니다.

![직교 좌표계](/ko/docs/Web/CSS/transform-function/coord_in_R2.png)

CSS (및 다른 대부분의 컴퓨터 그래픽)에서, 원점 `(0, 0)`은 요소의 좌상단 꼭짓점을 가리킵니다. 양의 좌표는 원점의 오른쪽과 아래로 진행하고, 음의 좌표는 왼쪽과 위로 진행합니다. 따라서 오른쪽으로 2단위, 아래쪽으로 5단위에 위치한 점은 `(2, 5)`이고 왼쪽으로 3단위, 위쪽으로 12단위 나아간 점은 `(-3, -12)`입니다.

### 변형 함수

Transformation functions alter the appearance of an element by manipulating the values of its coordinates. A linear transformation function is described using a 2×2 matrix, like this:

a

c

b

d

The function is applied to an element by using matrix multiplication. Thus, each coordinate changes based on the values in the matrix:

a

c

b

d

x

y

=

a
x
+
c
y

b
x
+
d
y

It is even possible to apply several transformations in a row:

a
1

c
1

b
1

d
1

a
2

c
2

b
2

d
2

=

a
1

a
2

+

c
1

b
2

a
1

c
2

+

c
1

d
2

b
1

a
2

+

d
1

b
2

b
1

c
2

+

d
1

d
2

With this notation, it is possible to describe, and therefore compose, most common transformations: rotations, scaling, or skewing. (In fact, all transformations that are linear functions can be described.) Composite transformations are effectively applied in order from right to left.

However, one major transformation is not linear, and therefore must be special-cased when using this notation: translation. The translation vector `(tx, ty)` must be expressed separately, as two additional parameters.

**참고:** Though trickier than Cartesian coordinates, homogeneous coordinates in projective geometry lead to 3×3 transformation matrices, and can simply express translations as linear functions.

구문
--

The `<transform-function>` data type is specified using one of the transformation functions listed below. Each function applies a geometric operation in either 2D or 3D.

### 행렬 변형

`matrix()`

Describes a homogeneous 2D transformation matrix.

`matrix3d()` (en-US)

Describes a 3D transformation as a 4×4 homogeneous matrix.

### 원근

`perspective()` (en-US)

Sets the distance between the user and the z=0 plane.

### 회전

`rotate()` (en-US)

Rotates an element around a fixed point on the 2D plane.

`rotate3d()` (en-US)

Rotates an element around a fixed axis in 3D space.

`rotateX()` (en-US)

Rotates an element around the horizontal axis.

`rotateY()` (en-US)

Rotates an element around the vertical axis.

`rotateZ()` (en-US)

Rotates an element around the z-axis.

### 크기 조절

`scale()` (en-US)

Scales an element up or down on the 2D plane.

`scale3d()` (en-US)

Scales an element up or down in 3D space.

`scaleX()`

Scales an element up or down horizontally.

`scaleY()` (en-US)

Scales an element up or down vertically.

`scaleZ()` (en-US)

Scales an element up or down along the z-axis.

### 기울이기 (왜곡)

`skew()` (en-US)

Skews an element on the 2D plane.

`skewX()` (en-US)

Skews an element in the horizontal direction.

`skewY()` (en-US)

Skews an element in the vertical direction.

### 이동

`translate()`

Translates an element on the 2D plane.

`translate3d()` (en-US)

Translates an element in 3D space.

`translateX()` (en-US)

Translates an element horizontally.

`translateY()` (en-US)

Translates an element vertically.

`translateZ()` (en-US)

Translates an element along the z-axis.

명세
--

| Specification |
| --- |
| CSS Transforms Module Level 1 # transform-functions |
| CSS Transforms Module Level 2 # transform-functions |

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

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

같이 보기
-----

* CSS `transform` 속성


all - CSS: Cascading Style Sheets

all
===

CSS **`all`** 단축 속성은 요소의 `unicode-bidi` (en-US), `direction` (en-US), CSS 사용자 지정 속성을 제외한 모든 속성을 초기화합니다. 초깃값, 상속값, 아니면 다른 스타일시트 출처의 값으로 설정할 수 있습니다.

시도해보기
-----

구문
--

```css
/\* 전역 값 \*/
all: initial;
all: inherit;
all: unset;

/\* CSS Cascading and Inheritance Level 4 \*/
all: revert;
```

`all` 속성은 CSS 전역 키워드 값 중 하나를 사용해 지정합니다. 그러나 어느것도 `unicode-bidi` (en-US)와 `direction` (en-US) 속성에는 영향을 주지 않는 점을 주의하세요.

### 값

`initial`

요소의 모든 속성을 초깃값으로 변경합니다.

`inherit`

요소의 모든 속성을 상속값으로 변경합니다.

`unset`

요소의 모든 속성을, 속성이 값을 상속하는 경우 상속값으로, 아니면 초깃값으로 변경합니다.

`revert`

선언이 속한 스타일시트의 출처에 따라 다른 동작을 합니다.

* 사용자 에이전트 출처 (en-US)
    + : `unset`과 동일합니다.
* 사용자 출처 (en-US)
    + : 종속 (en-US)을 사용자 에이전트 단계까지 되돌려서, 지정값이 마치 저작자와 사용자 단계의 규칙이 없었던 것처럼 계산되도록 합니다.
* 저작자 출처 (en-US)
    + : 종속 (en-US)을 사용자 에이전트 단계까지 되돌려서, 지정값이 마치 저작자 단계의 규칙이 없었던 것처럼 계산되도록 합니다. `revert`만 고려했을 때, 저작자 출처는 재정의(Override) 및 애니메이션(Animation) 출처를 포함합니다.

형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | There is no practical initial value for it. |
| 적용대상 | all elements |
| 상속 | no |
| 계산 값 | as the specified value applies to each property this is a shorthand for. |
| Animation type | as each of the properties of the shorthand (all properties but `unicode-bidi` (en-US) and `direction` (en-US)) |

형식 구문
-----
```

all =
  initial       |
  inherit       |
  unset         |
  revert        |
  revert-layer

```

예제
--

### HTML

```html
<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```

### CSS

```css
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}

blockquote {
  background-color: skyblue;
  color: red;
}
```

### 결과

#### `all` 속성 없음
```

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```

```
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
}
```

The `<blockquote>`가 브라우저 기본 스타일과 함께, 지정한 배경 및 텍스트 색상을 사용합니다. 또한 블록 요소로 동작하여 뒤의 텍스트가 아래에 위치합니다.

#### `all:unset`
```

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```

```
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
}
blockquote {
  all: unset;
}
```

`<blockquote>`가 브라우저 기본 스타일을 사용하지 않습니다. 이제 인라인 요소(초깃값)이며, `background-color`가 `transparent`(초깃값)입니다. 그러나 `font-size`는 여전히 `small`(상속값)이고 `color`도 `blue`(상속값)입니다.

#### `all:initial`
```

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```

```
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
}
blockquote {
  all: initial;
}
```

`<blockquote>`가 브라우저 기본 스타일을 사용하지 않습니다. 이제 인라인 요소(초깃값)이며, `background-color`가 `transparent`(초깃값)이고, `font-size`는 `normal`(초깃값), `color`는 `black`(초깃값)입니다.

#### `all:inherit`
```

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```

```
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
}
blockquote {
  all: inherit;
}
```

`<blockquote>`가 브라우저 기본 스타일을 사용하지 않습니다. 블록 요소(부모 `<body>`에서 상속)이고, `background-color`은 `#F0F0F0`(상속값), `font-size`는 `small`(상속값), `color`는 `blue`(상속값)입니다.

명세
--

| Specification |
| --- |
| CSS Cascading and Inheritance Level 4 # all-shorthand |

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

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

같이 보기
-----

CSS 전역 키워드 값: `initial`, `inherit`, `unset`, `revert`


CSS Fonts - CSS: Cascading Style Sheets

CSS Fonts
=========

**CSS Fonts**은 글꼴 관련 속성과 글꼴 리소스가 로드되는 방식을 정의하는 CSS 모듈입니다. 패밀리, 크기 및 굵기, 행의 높이, 한 문자에 여러 글자를 사용할 수 있을 때 사용하는 자형(glyph) 변형과 같은 글꼴 스타일을 정의할 수 있습니다.

기본 예제
-----

다음 예제에서는 기본 글꼴 속성을 사용하여 텍스트 단락의 스타일을 지정하는 간단한 예제를 보여줍니다.

```css
p {
  width: 600px;
  margin: 0 auto;
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-style: italic;
  font-weight: 100;
  font-variant-ligatures: normal;
  font-size: 2rem;
  letter-spacing: 1px;
}
```

```html
<p>
  Three hundred years ago<br />
  I thought I might get some sleep<br />
  I stretched myself out on an antique bed<br />
  An' my spirit did a midnite creep
</p>
```

결과는 다음과 같습니다.

가변 글꼴 예제들
---------

v-fonts.com 와 axis-praxis.org에서 다양한 가변 글꼴 예제를 찾을 수 있습니다. 또한, 자세한 정보와 사용법은 가변 글꼴 가이드 (en-US)를 참조하십시오.

참고서
---

### 속성

* `font`
* `font-family` (en-US)
* `font-feature-settings`
* `font-kerning` (en-US)
* `font-language-override` (en-US)
* `font-optical-sizing` (en-US)
* `font-size`
* `font-size-adjust` (en-US)
* `font-stretch` (en-US)
* `font-style` (en-US)
* `font-synthesis`
* `font-variant` (en-US)
* `font-variant-alternates` (en-US)
* `font-variant-caps` (en-US)
* `font-variant-east-asian` (en-US)
* `font-variant-ligatures` (en-US)
* `font-variant-numeric` (en-US)
* `font-variant-position` (en-US)
* `font-variation-settings` (en-US)
* `font-weight`
* `line-height` (en-US)
### @-규칙

* `@font-face`
* `@font-feature-values` (en-US)
가이드
---

* 기본적인 텍스트 및 글꼴 스타일링
    + 초보자를 위한 이 학습 기사에서는 텍스트/글꼴의 스타일링에 있어 기본적인 부분을 상세하게 설명하고 있습니다. 글꼴의 굵기, 패밀리, 스타일링의 설정, 글꼴의 일괄 지정, 텍스트의 배치 등의 효과, 행과 문자의 간격 설정 등을 포함합니다.
* OpenType 글꼴 특성 가이드 (en-US)
    + 글꼴의 특성 혹은 변형은 OpenType 글꼴에 포함된 다양한 자형(glyphs)이나 문자 스타일을 나타냅니다. 이것에는 합자(ligatures)('fi'나 'ffl'와 같은 특수한 형태의 문자 조합), 커닝(kerning)(특정 글자꼴 쌍 사이의 간격 조정), 분수, 숫자의 스타일, 외에도 다양한 것이 포함됩니다.이러한 기능은 모두 OpenType 특성(OpenType Features)이라고 하며, 특정 속성과 낮은 수준의 제어 속성인 — `font-feature-settings`을 통하여 웹에서 사용할 수 있습니다. 이 기사에서는 CSS에서 OpenType 글꼴 특성을 사용하는 것에 있어 알아야 할 모든 것들을 소개합니다.
* 가변 글꼴 가이드 (en-US)
    + **가변 글꼴**은 모든 너비, 굵기, 스타일별로 각각의 글꼴 파일을 사용하는 대신 서체의 다양한 변형을 단일 파일로 통합하는 것이 가능해지도록 하는 OpenType 글꼴 사양의 진화입니다. 이 기사에서는 가변 글꼴을 사용하기 위해서 필요한 모든 것을 제공합니다.
명세서
---

| Specification |
| --- |
| CSS Fonts Module Level 4  |


border-image-width - CSS: Cascading Style Sheets

border-image-width
==================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2017.

* Learn more
* See full compatibility
* Report feedback
**`border-image-width`** CSS 속성은 요소 테두리 이미지의 너비를 설정합니다.

시도해보기
-----

속성의 값이 `border-width`보다 크다면 테두리 이미지는 안쪽 여백(과 콘텐츠) 영역을 침범하여 그려집니다.

구문
--

```css
/\* 키워드 값 \*/
border-image-width: auto;

/\* <length> 값 \*/
border-image-width: 1rem;

/\* <percentage> 값 \*/
border-image-width: 25%;

/\* <number> 값 \*/
border-image-width: 3;

/\* 세로방향 | 가로방향 \*/
border-image-width: 2em 3em;

/\* 위 | 가로방향 | 아래 \*/
border-image-width: 5% 15% 10%;

/\* 위 | 오른쪽 | 아래 | 왼쪽 \*/
border-image-width: 5% 2em 10% auto;

/\* 전역 값 \*/
border-image-width: inherit;
border-image-width: initial;
border-image-width: unset;
```

`border-image-width` 속성은 한 개, 두 개, 세 개, 혹은 네 개의 값으로 지정할 수 있습니다. 음수는 유효하지 않습니다.

* **한 개의 값**은 모든 네 면의 테두리 너비를 설정합니다.
* **두 개의 값**을 지정하면 첫 번째는 **위와 아래**, 두 번째는 **왼쪽과 오른쪽** 테두리 너비를 설정합니다.
* **세 개의 값**을 지정하면 첫 번째는 **위**, 두 번째는 **왼쪽과 오른쪽,** 세 번째 값은 **아래** 테두리 너비를 설정합니다.
* **네 개의 값**을 지정하면 각각 **상, 우, 하, 좌** 순서로 테두리 너비를 지정합니다. (시계방향)
### 값

`<length-percentage>`

`<length>` 또는 `<percentage>`로 지정한 테두리 너비. 백분율 값은 왼쪽과 오른쪽 테두리에 대해선 테두리 이미지 영역의 너비, 위쪽과 아래쪽에 대해선 테두리 이미지 영역의 높이를 사용해 계산합니다.

`<number>`

테두리 너비로 `border-width`의 배수 사용

`auto`

방향과 일치하는 `border-image-slice`가 가진 원래 너비 또는 높이 사용. 이미지가 원래 크기를 가지고 있지 않으면 방향과 일치하는 `border-width` 크기를 사용합니다.

### 형식 구문
```

border-image-width =
  [ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}

<length-percentage> =
  <length>      |
  <percentage>

```

예제
--

다음 예제는 아래의 가로 90픽셀, 세로 90픽셀 이미지를 사용해 테두리 이미지를 생성합니다.

![](/ko/docs/Web/CSS/border-image-width/border.png)

원본 이미지의 각 원은 가로 30픽셀, 세로 30픽셀입니다.

### HTML

```html
<p>
  밤을 쉬이 봄이 무성할 릴케 듯합니다. 토끼, 써 이런 하나에 듯합니다. 이네들은
  나는 패, 듯합니다. 나는 보고, 딴은 토끼, 이런 멀리 듯합니다. 청춘이 가을로 둘
  버리었습니다. 걱정도 밤이 나는 애기 오는 언덕 경, 계십니다. 멀리 까닭이요,
  나는 별빛이 듯합니다. 소녀들의 벌레는 걱정도 까닭이요, 북간도에 쓸쓸함과 오면
  것은 어머님, 까닭입니다.
</p>
```

### CSS

```css
p {
  border: 20px solid;
  border-image: url("border.png") 30 round;
  border-image-width: 16px;
  padding: 40px;
}
```

### 결과

명세
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-border-image-width |

|  |  |
| --- | --- |
| 초기값 | `1` |
| 적용대상 | all elements, except internal table elements when `border-collapse` is `collapse`. It also applies to `::first-letter` (en-US). |
| 상속 | no |
| Percentages | refer to the width or height of the border image area |
| 계산 값 | as specified, but with relative lengths converted into absolute lengths |
| Animation type | by computed value type |

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

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


align-content - CSS: Cascading Style Sheets

align-content
=============

CSS **`align-content`** 속성은 콘텐츠 사이와 콘텐츠 주위 빈 공간을 플렉스 박스'의 교차축 또는 그리드의 블록 축을 따라 배치하는 방식을 결정합니다.

아래의 대화형 예제는 그리드 레이아웃을 사용해 이 속성의 값을 시연합니다.

시도해보기
-----

이 속성은 한 줄로만 이루어진 플렉스 컨테이너에는 아무 효과도 없습니다(`flex-wrap: nowrap` 등).

Syntax
------

```css
/\* Basic positional alignment \*/
/\* align-content does not take left and right values \*/
align-content: center; /\* Pack items around the center \*/
align-content: start; /\* Pack items from the start \*/
align-content: end; /\* Pack items from the end \*/
align-content: flex-start; /\* Pack flex items from the start \*/
align-content: flex-end; /\* Pack flex items from the end \*/
/\* Normal alignment \*/
align-content: normal;
/\* Baseline alignment \*/
align-content: baseline;
align-content: first baseline;
align-content: last baseline;
/\* Distributed alignment \*/
align-content: space-between; /\* Distribute items evenly
 The first item is flush with the start,
 the last is flush with the end \*/
align-content: space-around; /\* Distribute items evenly
 Items have a half-size space
 on either end \*/
align-content: space-evenly; /\* Distribute items evenly
 Items have equal space around them \*/
align-content: stretch; /\* Distribute items evenly
 Stretch 'auto'-sized items to fit
 the container \*/
/\* Overflow alignment \*/
align-content: safe center;
align-content: unsafe center;
/\* Global values \*/
align-content: inherit;
align-content: initial;
align-content: revert;
align-content: unset;
```

### 값

`start`

플렉스/그리드 항목을 한 덩어리로 뭉쳐서 정렬 컨테이너 교차축의 시작 모서리에 배치합니다.

`end`

플렉스/그리드 항목을 한 덩어리로 뭉쳐서 정렬 컨테이너 교차축의 끝 모서리에 배치합니다.

`flex-start`

 플렉스 항목을 한 덩어리로 뭉치고, 플렉스 컨테이너의 교차 시작점에 따라 정렬 컨테이너 모서리에 배치합니다.
 플렉스 레이아웃 항목에만 적용됩니다. 플렉스 컨테이너의 자식이 아닌 항목에 대해서는 `start`로 취급합니다.

`flex-end`

 플렉스 항목을 한 덩어리로 뭉치고, 플렉스 컨테이너의 교차 끝점에 따라 정렬 컨테이너 모서리에 배치합니다.
 플렉스 레이아웃 항목에만 적용됩니다. 플렉스 컨테이너의 자식이 아닌 항목에 대해서는 `end`로 취급합니다.

`center`

플렉스/그리드 항목을 한 덩어리로 뭉쳐서 정렬 컨테이너 교차축의 중앙에 배치합니다.

`normal`

`align-content`를 지정하지 않았을 때처럼, 플렉스/그리드 항목을 한 덩어리로 뭉쳐서 기본 위치에 배치합니다.

`baseline`, `first baseline`, `last baseline`

 첫 번째 또는 마지막 기준선에 대해 명시합니다. 박스의 첫 번째 또는 마지막 기준선 집합을 기준선을 공유하는 모든 박스의 첫 번째 또는 마지막 기준선과 정렬합니다.

 ![the baseline is the line upon which most letters "sit" and below which descenders extend.](/ko/docs/Web/CSS/align-content/410px-typography_line_terms.svg.png)
`first baseline`의 대체 정렬은 `start`, `last baseline`의 대체 정렬은 `end`입니다.

`space-between`

정렬 컨테이너의 교차축을 따라 항목을 고르게 배치합니다. 이웃한 항목간의 거리가 동일해집니다. 첫 항목은 정렬 컨테이너 교차축의 시작점에, 마지막 항목은 정렬 컨테이너 교차축의 종료점에 붙입니다.

`space-around`

정렬 컨테이너의 교차축을 따라 항목을 고르게 배치합니다. 이웃한 항목간의 거리가 동일해집니다. 첫 항목 이전 여백과 마지막 항목 이후 여백은 각 항목간 거리의 절반이 됩니다.

`space-evenly`

정렬 컨테이너의 교차축을 따라 항목을 고르게 배치합니다. 이웃한 항목간의 거리, 첫 항목 이전 여백, 마지막 항목 이후 여백이 모두 같아집니다.

`stretch`

모든 항목의 교차축 방향 크기의 합이 정렬 컨테이너보다 작은 경우, 모든 `auto` 크기의 항목이 동일(비례하지 않음)하게 커져서 정렬 컨테이너의 교차축 방향을 가득 채웁니다. 단, 항목에 지정한 `max-height`/`max-width` 등의 크기 제한은 준수합니다.

`safe`

정렬 키워드와 함께 사용합니다. 주어진 키워드로 인해 항목이 정렬 컨테이너 밖으로 오버플로하게 되어 데이터가 유실될 수 있으면 항목 정렬에 `start`를 대신 사용합니다.

`unsafe`

정렬 키워드와 함께 사용합니다. 컨테이너와 항목의 상대적 크기 및 오버플로로 인한 데이터 유실에 상관하지 않고 주어진 정렬을 준수합니다.

형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | `normal` |
| 적용대상 | multi-line flex containers |
| 상속 | no |
| 계산 값 | as specified |
| Animation type | discrete |

형식 구문
-----
```

align-content =
  normal                                   |
  <baseline-position>                      |
  <content-distribution>                   |
  <overflow-position>? <content-position>

<baseline-position> =
  [ first | last ]?  &&
  baseline

<content-distribution> =
  space-between  |
  space-around   |
  space-evenly   |
  stretch

<overflow-position> =
  unsafe  |
  safe

<content-position> =
  center      |
  start       |
  end         |
  flex-start  |
  flex-end

```

예제
--

### CSS

```css
#container {
  height: 200px;
  width: 240px;
  align-content: center; /\* Can be changed in the live sample \*/
  background-color: #8c8c8c;
}
.flex {
  display: flex;
  flex-wrap: wrap;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
}
div > div {
  box-sizing: border-box;
  border: 2px solid #8c8c8c;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#item1 {
  background-color: #8cffa0;
  min-height: 30px;
}
#item2 {
  background-color: #a0c8ff;
  min-height: 50px;
}
#item3 {
  background-color: #ffa08c;
  min-height: 40px;
}
#item4 {
  background-color: #ffff8c;
  min-height: 60px;
}
#item5 {
  background-color: #ff8cff;
  min-height: 70px;
}
#item6 {
  background-color: #8cffff;
  min-height: 50px;
  font-size: 30px;
}
select {
  font-size: 16px;
}
.row {
  margin-top: 10px;
}
```

### HTML

```html
<div id="container" class="flex">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
  <div id="item4">4</div>
  <div id="item5">5</div>
  <div id="item6">6</div>
</div>

<div class="row">
  <label for="display">display: </label>
  <select id="display">
    <option value="flex">flex</option>
    <option value="grid">grid</option>
  </select>
</div>

<div class="row">
  <label for="values">align-content: </label>
  <select id="values">
    <option value="normal">normal</option>
    <option value="stretch">stretch</option>
    <option value="flex-start">flex-start</option>
    <option value="flex-end">flex-end</option>
    <option value="center" selected>center</option>
    <option value="space-between">space-between</option>
    <option value="space-around">space-around</option>
    <option value="space-evenly">space-evenly</option>

    <option value="start">start</option>
    <option value="end">end</option>
    <option value="left">left</option>
    <option value="right">right</option>

    <option value="baseline">baseline</option>
    <option value="first baseline">first baseline</option>
    <option value="last baseline">last baseline</option>

    <option value="safe center">safe center</option>
    <option value="unsafe center">unsafe center</option>
    <option value="safe right">safe right</option>
    <option value="unsafe right">unsafe right</option>
    <option value="safe end">safe end</option>
    <option value="unsafe end">unsafe end</option>
    <option value="safe flex-end">safe flex-end</option>
    <option value="unsafe flex-end">unsafe flex-end</option>
  </select>
</div>
```

```
var values = document.getElementById("values");
var display = document.getElementById("display");
var container = document.getElementById("container");
values.addEventListener("change", function (evt) {
  container.style.alignContent = evt.target.value;
});
display.addEventListener("change", function (evt) {
  container.className = evt.target.value;
});
```

### 결과

명세
--

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # align-justify-content |
| CSS Flexible Box Layout Module Level 1 # align-content-property |

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

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

같이 보기
-----

* CSS Flexbox Guide: *Basic Concepts of Flexbox*
* CSS Flexbox Guide: *Aligning items in a flex container*
* CSS Grid Guide: *Box alignment in CSS Grid layouts (en-US)*
* CSS Box Alignment (en-US)


CSS Basic User Interface - CSS: Cascading Style Sheets

CSS Basic User Interface
========================

**CSS Basic User Interface**는 사용자 인터페이스와 연관된 렌더링 및 기능의 동작 방식을 정의하는 CSS 모듈입니다.

참고서
---

### 속성

* `appearance` (en-US)
Experimental
* `box-sizing`
* `cursor`
* `ime-mode`
지원이 중단되었습니다
* `nav-down`
Experimental
* `nav-left`
Experimental
* `nav-right`
Experimental
* `nav-up`
Experimental
* `outline`
* `outline-width`
* `outline-style`
* `outline-color` (en-US)
* `outline-offset` (en-US)
* `resize` (en-US)
* `text-overflow` (en-US)
* `user-select`
안내서
---

`cursor` 속성값에 URL 사용하기

URL을 `cursor` 속성에 사용해 사용자 지정 커서를 생성하는 방법을 설명합니다.

명세
--

| Specification |
| --- |
| CSS Basic User Interface Module Level 4  |


flex-grow - CSS: Cascading Style Sheets

flex-grow
=========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

* Learn more
* See full compatibility
* Report feedback
**`flex-grow`** CSS property 는 `flex-item` 요소가, `flex-container` 요소 내부에서 할당 가능한 공간의 정도를 선언합니다. 만약 **형제 요소**로 렌더링 된 모든 `flex-item` 요소들이 동일한 `flex-grow` 값을 갖는다면, `flex-container` 내부에서 동일한 공간을 할당받습니다. 하지만 `flex-grow` 값으로 다른 소수값을 지정한다면, 그에 따라 다른 공간값을 나누어 할당받게 됩니다.

보통 `flex-grow`를 사용할땐, `flex-shrink`, `flex-basis` 속성을 함께 사용합니다. 그리고 일반적으로는 모든 값이 설정되었음을 보장하기 위하여 `flex` 속성을 이용해 **축약형**으로 사용합니다.

시도해보기
-----

Syntax
------

```css
/\* <number> values \*/
flex-grow: 3;
flex-grow: 0.6;

/\* Global values \*/
flex-grow: inherit;
flex-grow: initial;
flex-grow: unset;
```

`flex-grow` 속성에 대한 값은 `<number>` 단독으로 표현합니다.

### Values

`<number>`

관련 링크를 참고하세요. `<number>`. 단, 음수값은 허용되지 않습니다.

### Formal syntax
```

flex-grow =
  <number [0,∞]>

```

Example
-------

### HTML

```html
<h4>This is a Flex-Grow</h4>
<h5>A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .</h5>
<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box1" style="background-color:brown;">D</div>
  <div class="box1" style="background-color:lightgreen;">E</div>
  <div class="box" style="background-color:brown;">F</div>
</div>
```

### CSS

```css
#content {
  display: flex;

  justify-content: space-around;
  flex-flow: row wrap;
  align-items: stretch;
}

.box {
  flex-grow: 1;
  border: 3px solid rgba(0, 0, 0, 0.2);
}

.box1 {
  flex-grow: 2;
  border: 3px solid rgba(0, 0, 0, 0.2);
}
```

### Result

명세서
---

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1 # flex-grow-property |

|  |  |
| --- | --- |
| 초기값 | `0` |
| 적용대상 | flex items, including in-flow pseudo-elements |
| 상속 | no |
| 계산 값 | as specified |
| Animation type | a number |

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

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

See also
--------

* CSS Flexbox Guide: *Basic Concepts of Flexbox*
* CSS Flexbox Guide: *Controlling Ratios of flex items along the main axis (en-US)*
* `flex-grow` is weird. Or is it? article by Manuel Matuzovic on CSS-Tricks, which illustrates how flex-grow works


background-attachment - CSS: Cascading Style Sheets

background-attachment
=====================

CSS **`background-attachment`** 속성은 배경 이미지를 뷰포트 내에서 고정할지, 아니면 자신의 컨테이닝 블록과 함께 스크롤할지 지정합니다.

시도해보기
-----

구문
--

```css
/\* 키워드 값 \*/
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;

/\* 전역 값 \*/
background-attachment: inherit;
background-attachment: initial;
background-attachment: unset;
```

`background-attachment` 속성은 다음 목록의 키워드 중 하나를 선택해 지정할 수 있습니다.

### 값

`fixed`

배경을 뷰포트에 대해 고정합니다. 요소에 스크롤이 존재해도 배경은 함께 스크롤되지 않습니다. 이 값은 `background-clip: text`와 호환되지 않습니다.

`local`

배경을 요소 콘텐츠에 대해 고정합니다. 요소에 스크롤이 존재하면 배경은 콘텐츠와 함께 스크롤됩니다. 배경 페인트 영역과 배경 위치 영역은 테두리 틀이 아닌 스크롤 가능 영역을 기준점으로 삼습니다.

`scroll`

배경을 요소 자체에 대해 고정합니다. 요소에 스크롤이 존재해도 배경은 함께 스크롤되지 않습니다. 즉 요소의 테두리에 배경 이미지를 부착한 것과 같은 효과입니다.

형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | `scroll` |
| 적용대상 | all elements. It also applies to `::first-letter` (en-US) and `::first-line` (en-US). |
| 상속 | no |
| 계산 값 | as specified |
| Animation type | discrete |

형식 구문
-----
```

background-attachment =
  <attachment>#

<attachment> =
  scroll  |
  fixed   |
  local

```

예제
--

### 간단한 예제

#### HTML

```html
<p>
  There were doors all round the hall, but they were all locked; and when Alice
  had been all the way down one side and up the other, trying every door, she
  walked sadly down the middle, wondering how she was ever to get out again.
</p>
```

#### CSS

```css
p {
  background-image: url("starsolid.gif");
  background-attachment: fixed;
}
```

#### 결과

### 다중 배경 이미지

`background-attachment`는 다중 배경 이미지를 지원합니다. 각 배경에 대해 `<attachment>`를 지정하려면 쉼표로 구분하여 다수의 값을 제공하세요. 주어진 순서대로 배경에 적용합니다.

#### HTML

```html
<p>
  There were doors all round the hall, but they were all locked; and when Alice
  had been all the way down one side and up the other, trying every door, she
  walked sadly down the middle, wondering how she was ever to get out again.
  Suddenly she came upon a little three-legged table, all made of solid glass;
  there was nothing on it except a tiny golden key, and Alice's first thought
  was that it might belong to one of the doors of the hall; but, alas! either
  the locks were too large, or the key was too small, but at any rate it would
  not open any of them. However, on the second time round, she came upon a low
  curtain she had not noticed before, and behind it was a little door about
  fifteen inches high: she tried the little golden key in the lock, and to her
  great delight it fitted!
</p>
```

#### CSS

```css
p {
  background-image: url("starsolid.gif"), url("startransparent.gif");
  background-attachment: fixed, scroll;
  background-repeat: no-repeat, repeat-y;
}
```

#### 결과

명세
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-background-attachment |

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

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

같이 보기
-----

* 한 번에 여러 배경 사용하기


CSS Images - CSS: Cascading Style Sheets

CSS Images
==========

**CSS Images**는 사용할 수 있는 이미지의 유형(`<image>` 자료형, 포함하는 URL, 그레이디언트 및 그 외의 다른 유형 이미지), 이미지의 크기 조정 방법, 그리고 이미지 및 다른 대체 콘텐츠가 각기 다른 레이아웃 모델과 상호작용하는 법을 정의하는 CSS 모듈입니다.

참고서
---

### 속성

* `image-orientation` (en-US)
* `image-rendering`
* `image-resolution` (en-US)
* `object-fit`
* `object-position`
### 함수

* `linear-gradient()` (en-US)
* `radial-gradient()` (en-US)
* `repeating-linear-gradient()` (en-US)
* `repeating-radial-gradient()` (en-US)
* `conic-gradient()` (en-US)
* `repeating-conic-gradient()` (en-US)
* `url()`
* `element()` (en-US)
* `image()` (en-US)
* `cross-fade()` (en-US)
### 자료형

* `<image>`
* `<uri>()` (en-US)
안내서
---

CSS 그레이디언트 사용하기 (en-US)

CSS 이미지의 특정 유형인 "그레이디언트"를 소개하고, 그 사용법을 보입니다.

CSS에서 이미지 스프라이트 구현하기

다수의 이미지를 하나의 문서로 합쳐서 다운로드 요청을 절약하고 페이지 속도를 향상하는 방법을 소개합니다.

명세
--

| Specification |
| --- |
| CSS Images Module Level 3  |
| Compatibility Standard # css-%3Cimage%3E-type |
| CSS Values and Units Module Level 4 # urls |


:active - CSS: Cascading Style Sheets

:active
=======

**`:active`** CSS 의사 클래스는 사용자가 활성화한 요소(버튼 등)를 나타냅니다. 마우스를 사용하는 경우, "활성"이란 보통 마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미합니다.

```css
/\* 활성화된 모든 <a> 태그를 선택 \*/
a:active {
  color: red;
}
```

`:active` 의사 클래스는 대개 `<a>`, `<button>`과 함께 사용합니다. 다른 흔한 대상으로는 활성화된 요소를 포함한 다른 요소와, 연결된 `<label>`로 선택한 입력 폼 요소 등이 있습니다.

`:active` 의사 클래스로 정의한 스타일은 자신보다 뒤에 위치하고 동등한 명시성을 가진 다른 링크 의사 클래스(`:link`, `:hover`, `:visited`)가 덮어씁니다. 링크를 적절히 디자인하려면 *LVHA-순서(*`:link` — `:visited` — `:hover` — `:active`)를 따라, `:active` 규칙을 다른 모든 링크 규칙들보다 뒤에 배치하세요.

**참고:** CSS3 명세에 따르면, 다수의 버튼을 가진 마우스라도 `:active` 의사 클래스는 주 버튼에만 적용돼야 합니다. 오른손잡이 마우스 기준, 주 버튼은 보통 맨 왼쪽 버튼입니다.

구문
--

Error: could not find syntax for this item예제
--

### 활성화 링크

#### HTML

```html
<p>
  링크를 포함하는 문단입니다.
  <a href="#">이 링크는 클릭하는 동안 색이 빨갛게 됩니다.</a>
  이 문단은 클릭하는 동안 배경색이 회색이 됩니다.
</p>
```

#### CSS

```css
a:link {
  color: blue;
} /\* 방문하지 않은 링크 \*/
a:visited {
  color: purple;
} /\* 방문한 링크 \*/
a:hover {
  background: yellow;
} /\* 마우스를 올린 링크 \*/
a:active {
  color: red;
} /\* 활성화한 링크 \*/

p:active {
  background: #eee;
} /\* 활성화한 문단 \*/
```

#### 결과

### 활성화 폼 요소

#### HTML

```html
<form>
  <label for="my-button">내 버튼: </label>
  <button id="my-button" type="button">제 라벨이나 저를 클릭해보세요!</button>
</form>
```

#### CSS

```css
form :active {
  color: red;
}

form button {
  background: white;
}
```

#### 결과

명세
--

| Specification |
| --- |
| HTML Standard # selector-active |
| Selectors Level 4 # the-active-pseudo |

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

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

같이 보기
-----

* 링크 관련 의사 클래스: `:link`, `:visited`, `:hover`.


CSS Text Decoration - CSS: Cascading Style Sheets

CSS Text Decoration
===================

**CSS Text Decoration**은 밑줄, 텍스트 그림자 및 강조 표시 등 텍스트 장식에 관련된 기능을 정의하는 CSS 모듈입니다.

참고서
---

### 속성

* `letter-spacing`
* `text-align`
* `text-decoration`
* `text-decoration-color` (en-US)
* `text-decoration-line` (en-US)
* `text-decoration-style` (en-US)
* `text-emphasis` (en-US)
* `text-emphasis-color` (en-US)
* `text-emphasis-position` (en-US)
* `text-emphasis-style` (en-US)
* `text-indent` (en-US)
* `text-rendering` (en-US)
* `text-shadow` (en-US)
* `text-transform` (en-US)
* `white-space`
* `word-spacing`
명세서
---

| Specification |
| --- |
| CSS Text Decoration Module Level 3  |


:hover - CSS: Cascading Style Sheets

:hover
======

**`:hover`** CSS 의사 클래스는 사용자가 포인팅 장치를 사용해 상호작용 중인 요소를 선택합니다. 보통 사용자의 커서(마우스 포인터)가 요소 위에 올라가 있으면 선택됩니다.

```css
/\* "호버링" 중인 <a> 요소 선택 \*/
a:hover {
  color: orange;
}
```

`:hover` 의사 클래스로 정의한 스타일은 자신보다 뒤에 위치하고 동등한 명시성을 가진 다른 링크 의사 클래스(`:link`, `:visited`, `:active`)가 덮어씁니다. 링크를 적절히 디자인하려면 LVHA-순서(`:link` — `:visited` — `:hover` — `:active`)를 따라, `:hover` 규칙을 `:link`와 `:visited` 뒤, `:active` 앞에 배치하세요.

**참고:** `:hover` 의사 클래스는 터치스크린에서 문제가 많습니다. 브라우저에 따라서 :hover를 절대 활성화하지 않을 수도 있지만, 요소를 터치한 직후에만, 아니면 터치한 이후 다른 요소를 다시 터치하기 전까지 계속 활성화할 수도 있습니다. 웹 개발자는 호버링이 제한적이거나 아예 불가능한 장치에서도 콘텐츠에 접근할 수 있도록 개발해야 합니다.

구문
--

Error: could not find syntax for this item예제
--

### HTML

```html
<a href="#">이 링크를 가리켜보세요.</a>
```

### CSS

```css
a {
  background-color: powderblue;
  transition: background-color 0.5s;
}

a:hover {
  background-color: gold;
}
```

### 결과

명세
--

| Specification |
| --- |
| HTML Standard # selector-hover |
| Selectors Level 4 # the-hover-pseudo |

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

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

같이 보기
-----

* Chromium 버그 #370155: Don't make `:hover` sticky on tap on sites that set a mobile viewport
* Chromium 버그 #306581: Immediately show hover and active states on touch when page isn't scrollable.


:root - CSS: Cascading Style Sheets

:root
=====

CSS **`:root`** 의사 클래스는 문서 트리의 루트 요소를 선택합니다 HTML의 루트 요소는 `<html>` 요소이므로, `:root`의 명시도가 더 높다는 점을 제외하면 `html` 선택자와 똑같습니다.

```css
/\* 문서의 루트 요소 선택
 HTML에서는 <html> \*/
:root {
  background: yellow;
}
```

구문
--

Error: could not find syntax for this item예제
--

### 전역 CSS 변수 선언하기

`:root`는 전역 CSS 변수 선언에 유용하게 사용할 수 있습니다.

```css
:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}
```

명세
--

| Specification |
| --- |
| Selectors Level 4 # root-pseudo |

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

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

같이 보기
-----

* `<html>`
* `Document.rootElement` (en-US)
* `Node.getRootNode()` (en-US)
* `Node.rootNode` (en-US)
* `Element.shadowRoot` (en-US)
* `ShadowRoot` (en-US)


font-synthesis - CSS: Cascading Style Sheets

font-synthesis
==============

CSS **`font-synthesis`** 속성은 브라우저가 굵은 글꼴과 이탤릭 글꼴을 합성하는 것을 허용할지 설정합니다.

시도해보기
-----

구문
--

`font-synthesis`는 다음 방법 중 하나를 사용해 지정합니다.

* `none` 키워드.
* `weight` 또는 `style` 키워드.
* `weight`와 `style` 키워드.
### 값

`none`

굵은 글꼴과 이탤릭 글꼴의 합성을 금지합니다.

`weight`

필요한 경우 굵은 글꼴을 합성할 수 있습니다.

`style`

필요한 경우 이탤릭 글꼴을 합성할 수 있습니다.

설명
--

대부분의 표준 서양 글꼴은 이탤릭과 굵은 글꼴을 포함하고 있으나 상용 글꼴은 그렇지 않은 경우도 많습니다. 한국, 중국, 일본을 포함한 비 알파벳 문화권의 문자 체계는 보통 이런 변형을 포함하지 않으며 브라우저의 글꼴 합성으로 인해 가독성이 떨어질 수 있습니다. 이 두 가지 경우에 대해 `font-synthesis`를 사용해 기본 글꼴 합성을 끄는 것이 좋을 수도 있습니다.

형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | `weight style small-caps position`  |
| 적용대상 | all elements and text. It also applies to `::first-letter` (en-US) and `::first-line` (en-US). |
| 상속 | yes |
| 계산 값 | as specified |
| Animation type | discrete |

형식 구문
-----
```

font-synthesis =
  none                                           |
  [ weight || style || small-caps || position ]

```

예제
--

### 글꼴 합성 비활성화

#### HTML

```html
<em class="syn">절 합성하세요! Synthesize!</em>
<br />
<em class="no-syn">절 합성하지 마세요! Synthesize!</em>
```

#### CSS

```css
em {
  font-weight: bold;
}
.syn {
  font-synthesis: style weight;
}
.no-syn {
  font-synthesis: none;
}
```

#### 결과

명세
--

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-synthesis |

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

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

같이 보기
-----

* `font-style` (en-US)
* `font-weight`


CSS 그리드 레이아웃 - CSS: Cascading Style Sheets

CSS 그리드 레이아웃
============

**CSS 그리드 레이아웃(Grid Layout)**은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의하는 데 아주 탁월합니다.

테이블과 마찬가지로 그리드 레이아웃은 세로 열과 가로 행을 기준으로 요소를 정렬할 수 있습니다. 하지만, 테이블과 달리 CSS 그리드는 다양한 레이아웃을 훨씬 더 쉽게 구현할 수 있습니다. 예를 들어, 그리드 컨테이너 속 자식 요소를, 마치 CSS로 일일이 위치를 지정해 준 것처럼, 실제로 겹치게 층을 지면서 자리를 잡도록 각 요소의 위치를 지정해 줄 수도 있습니다.

기본 예제
-----

아래 예제는 3개의 세로 열 트랙으로 이루어졌으며, 저절로 채워지며 생성되는 가로 행 트랙은 높이가 최소 100픽셀 이상, 콘텐츠 최대치까지 자동으로 늘어나는 구조의 그리드를 보여줍니다. 각 아이템은 그리드 라인을 기준으로 배치되었습니다.
```

\* {
  box-sizing: border-box;
}
.wrapper {
  max-width: 940px;
  margin: 0 auto;
}

.wrapper > div {
  border: 2px solid rgb(233, 171, 88);
  border-radius: 5px;
  background-color: rgba(233, 171, 88, 0.5);
  padding: 1em;
  color: #d9480f;
}
```

### HTML

```html
<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>
```

### CSS

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-column: 1;
  grid-row: 2 / 5;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}
```

참고
--

### CSS 프로퍼티

* `grid-template-columns`
* `grid-template-rows` (en-US)
* `grid-template-areas` (en-US)
* `grid-template` (en-US)
* `grid-auto-columns` (en-US)
* `grid-auto-rows` (en-US)
* `grid-auto-flow` (en-US)
* `grid` (en-US)
* `grid-row-start` (en-US)
* `grid-column-start` (en-US)
* `grid-row-end` (en-US)
* `grid-column-end` (en-US)
* `grid-row` (en-US)
* `grid-column` (en-US)
* `grid-area` (en-US)
* `grid-row-gap` (en-US)
* `grid-column-gap` (en-US)
* `grid-gap` (en-US)
### CSS 함수

* `repeat()` (en-US)
* `minmax()` (en-US)
* `fit-content()` (en-US)
### CSS 데이터 타입

* `<flex>` (en-US)
### 용어집 목록

* Grid
* Grid Lines
* Grid Tracks
* Grid Cell
* Grid Area
* Gutters
* Grid Axis
* Grid row (en-US)
* Grid column
가이드
---

* 그리드 레이아웃의 기본 개념
* 그리드 레이아웃과 다른 레이아웃 방법과의 관계
* 라인을 기준으로 한 아이템 배치
* 그리드 템플릿 영역
* 이름이 주어진 그리드 라인을 이용한 레이아웃
* Auto-placement in CSS Grid Layout (en-US)
* Box alignment in CSS Grid Layout (en-US)
* CSS Grid, Logical Values and Writing Modes (en-US)
* CSS Grid Layout and accessibility (en-US)
* CSS Grid and progressive enhancement (en-US)
* Realising common layouts using CSS Grid (en-US)
외부 문서
-----

* Examples from Jen Simmons
* Grid by Example - a collection of usage examples and video tutorials
* Codrops Grid Reference
* Firefox DevTools CSS Grid Inspector (en-US)
* CSS Grid Playground
* Grid Garden - A game for learning CSS grid
안내서
---

* 그리드 레이아웃의 기본 개념
* 다른 레이아웃 방법과의 관계
* 라인을 기준으로 한 아이템 배치
* 그리드 템플릿 영역
* 이름이 주어진 그리드 라인을 이용한 레이아웃
* Auto-placement in grid layout (en-US)
* Box alignment in grid layout (en-US)
* Grids, logical values and writing modes (en-US)
* CSS Grid Layout and Accessibility (en-US)
* CSS Grid Layout and Progressive Enhancement (en-US)
* Realizing common layouts using grids (en-US)
* Subgrid (en-US)
* Masonry layout (en-US)
Experimental
명세서
---

| Specification |
| --- |
| CSS Grid Layout Module Level 2  |

같이 보기
-----

* Glossary terms:
    + Grid
    + Grid lines
    + Grid tracks
    + Grid cell
    + Grid area
    + Gutters
    + Grid axis
    + Grid row (en-US)
    + Grid column
* Grid by Example - A collection of usage examples and video tutorials
* CSS Grid Reference - Codrops
* CSS Grid Inspector - Firefox DevTools
* CSS Grid Playground
* CSS Grid Garden - A game for learning CSS grid


clip-path - CSS: Cascading Style Sheets

clip-path
=========

**`clip-path`** CSS 속성은 요소의 클리핑 범위를 지정합니다. 클리핑 범위 안의 부분은 보여지고, 바깥은 숨겨집니다.

시도해보기
-----

구문
--

```css
/\* 키워드 값 \*/
clip-path: none;

/\* <clip-source> 값 \*/
clip-path: url(resources.svg#c1);

/\* <geometry-box> 값 \*/
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;

/\* <basic-shape> 값 \*/
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path(
  "M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z"
);

/\* 박스와 도형 값 조합 \*/
clip-path: padding-box circle(50px at 0 100px);

/\* 전역 값 \*/
clip-path: inherit;
clip-path: initial;
clip-path: unset;
```

`clip-path` 속성은 아래의 값을 하나 이상 조합해 지정할 수 있습니다.

### 값

`<clip-source>`

SVG `<clipPath>` (en-US) 요소를 가리키는 `<url>()`.

`<basic-shape>` (en-US)

`<geometry-box>` 값으로 크기와 위치가 정해지는 도형. `<geometry-box>`를 지정하지 않는다면 `border-box`를 참조 박스로 사용합니다.

`<geometry-box>`

`<basic-shape>`와 함께 지정하면, `<basic-shape>`의 참조 박스를 정의합니다. 단독으로 지정한 경우, 값으로 주어진 상자와 그 상자의 모서리 형태(`border-radius` 등)를 클리핑 패스로 적용합니다. 가능한 값은 다음과 같습니다.

`margin-box`

바깥 여백 상자 (en-US)를 참조로 사용합니다.

`border-box`

테두리 상자 (en-US)를 참조로 사용합니다.

`padding-box`

안쪽 여백 상자 (en-US)를 참조로 사용합니다.

`content-box`

콘텐츠 상자 (en-US)를 참조로 사용합니다.

`fill-box`

객체의 바운딩 상자를 참조로 사용합니다.

`stroke-box`

테두리 바운딩 상자를 참조로 사용합니다.

`view-box`

가장 가까운 SVG 뷰포트를 참조 상자로 사용합니다. SVG 뷰포트를 생성한 요소가 `viewBox` 속성을 가진 경우, 참조 상자의 위치는 `viewBox` 속성이 정의하는 좌표계의 원점에 위치하고, 크기는 `viewBox` 속성의 너비와 높이 값과 동일합니다.

`none`

클리핑 패스를 생성하지 않습니다.

**참고:** `opacity`가 1이 아닌 값일 때와 마찬가지로, **`none`** 외의 계산값은 새로운 쌓임 맥락을 생성합니다.

### 형식 구문
```

clip-path =
  <clip-source>                        |
  [ <basic-shape> (en-US) || <geometry-box> ]  |
  none

<clip-source> =
  <url>

<geometry-box> =
  <shape-box>  |
  fill-box     |
  stroke-box   |
  view-box

<url> =
  <url()>  |
  <src()>

<shape-box> =
  <visual-box>  |
  margin-box

<url()> =
  url( <string> (en-US) <url-modifier>\* )  |
  <url-token>

<src()> =
  src( <string> (en-US) <url-modifier>\* )

<visual-box> =
  content-box  |
  padding-box  |
  border-box

```

Examples
--------

### Comparison of HTML and SVG
```

<svg class="defs">
  <defs>
    <clipPath id="myPath" clipPathUnits="objectBoundingBox">
      <path
 d="M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z" />
    </clipPath>
  </defs>
</svg>

<div class="grid">
  <div class="col">
    <div class="note">clip-path: none</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="none">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="none">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">
      clip-path: url(#myPath)<br /><br />
      Assuming the following clipPath definition:
      <pre>
<svg>
  <clipPath id="myPath" clipPathUnits="objectBoundingBox">
    <path d="M0.5,1
      C 0.5,1,0,0.7,0,0.3
      A 0.25,0.25,1,1,1,0.5,0.3
      A 0.25,0.25,1,1,1,1,0.3
      C 1,0.7,0.5,1,0.5,1 Z" />
  </clipPath>
</svg></pre
 >
    </div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="svg">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="svg">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">
      clip-path: path('M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45
      Q135,90,75,130 Q15,90,15,45 Z')
    </div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="svg2">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="svg2">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: circle(25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape1">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape1">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape2">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape2">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: fill-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape3">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape3">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: stroke-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape4">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape4">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: view-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape5">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape5">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: margin-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape6">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape6">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: border-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape7">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape7">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: padding-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape8">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape8">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: content-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape9">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape9">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>
  </div>
</div>
```

```css
html,
body {
  height: 100%;
  box-sizing: border-box;
  background: #eee;
}

.grid {
  width: 100%;
  height: 100%;
  display: flex;
  font: 1em monospace;
}

.row {
  display: flex;
  flex: 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
}

.col {
  flex: 1 auto;
}

.cell {
  margin: 0.5em;
  padding: 0.5em;
  background-color: #fff;
  overflow: hidden;
  text-align: center;
  flex: 1;
}

.note {
  background: #fff3d4;
  padding: 1em;
  margin: 0.5em 0.5em 0;
  font: 0.8em sans-serif;
  text-align: left;
  white-space: nowrap;
}

.note + .row .cell {
  margin-top: 0;
}

.container {
  display: inline-block;
  border: 1px dotted grey;
  position: relative;
}

.container:before {
  content: "margin";
  position: absolute;
  top: 2px;
  left: 2px;
  font: italic 0.6em sans-serif;
}

.viewbox {
  box-shadow:
    1rem 1rem 0 #efefef inset,
    -1rem -1rem 0 #efefef inset;
}

.container.viewbox:after {
  content: "viewbox";
  position: absolute;
  left: 1.1rem;
  top: 1.1rem;
  font: italic 0.6em sans-serif;
}

.cell span {
  display: block;
  margin-bottom: 0.5em;
}

p {
  font-family: sans-serif;
  background: #000;
  color: pink;
  margin: 2em;
  padding: 3em 1em;
  border: 1em solid pink;
  width: 6em;
}

.none {
  clip-path: none;
}
.svg {
  clip-path: url(#myPath);
}
.svg2 {
  clip-path: path(
    "M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z"
  );
}
.shape1 {
  clip-path: circle(25%);
}
.shape2 {
  clip-path: circle(25% at 25% 25%);
}
.shape3 {
  clip-path: fill-box circle(25% at 25% 25%);
}
.shape4 {
  clip-path: stroke-box circle(25% at 25% 25%);
}
.shape5 {
  clip-path: view-box circle(25% at 25% 25%);
}
.shape6 {
  clip-path: margin-box circle(25% at 25% 25%);
}
.shape7 {
  clip-path: border-box circle(25% at 25% 25%);
}
.shape8 {
  clip-path: padding-box circle(25% at 25% 25%);
}
.shape9 {
  clip-path: content-box circle(25% at 25% 25%);
}

.defs {
  width: 0;
  height: 0;
  margin: 0;
}

pre {
  margin-bottom: 0;
}

svg {
  margin: 1em;
  font-family: sans-serif;
  width: 192px;
  height: 192px;
}

svg rect {
  stroke: pink;
  stroke-width: 16px;
}

svg text {
  fill: pink;
  text-anchor: middle;
}

svg text.em {
  font-style: italic;
}
```

### Complete example

#### HTML

```html
<img id="clipped" src="mdn.svg" alt="MDN logo" />
<svg height="0" width="0">
  <defs>
    <clipPath id="cross">
      <rect y="110" x="137" width="90" height="90" />
      <rect x="0" y="110" width="90" height="90" />
      <rect x="137" y="0" width="90" height="90" />
      <rect x="0" y="0" width="90" height="90" />
    </clipPath>
  </defs>
</svg>

<select id="clipPath">
  <option value="none">none</option>
  <option value="circle(100px at 110px 100px)">circle</option>
  <option value="url(#cross)" selected>cross</option>
  <option value="inset(20px round 20px)">inset</option>
  <option value="path('M 0 200 L 0,110 A 110,90 0,0,1 240,100 L 200 340 z')">
    path
  </option>
</select>
```

#### CSS

```css
#clipped {
  margin-bottom: 20px;
  clip-path: url(#cross);
}
```

```
const clipPathSelect = document.getElementById("clipPath");
clipPathSelect.addEventListener("change", (evt) => {
  document.getElementById("clipped").style.clipPath = evt.target.value;
});
```

#### Result

명세서
---

| Specification |
| --- |
| CSS Masking Module Level 1 # the-clip-path |
| CSS Shapes Module Level 1 # supported-basic-shapes |

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

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

See also
--------

* Shapes in clipping and masking – and how to use them
* CSS properties: `mask`, `filter`
* Applying SVG effects to HTML content (en-US)
* SVG attributes:
    + `clip-path (en-US)`
    + `clip-rule (en-US)`


구문 - CSS: Cascading Style Sheets

구문
==

종속형 스타일 시트(CSS) 언어의 기본 목표는 브라우저 엔진이 색상, 위치 지정 또는 장식과 같은 특정 기능을 사용하여 페이지에 요소를 그릴 수 있도록 하는 것입니다. 이러한 목표 달성을 위해 만들어진 *CSS 구문*을 이루고 있는 기본 구성 요소는 다음과 같습니다.

* **속성**(property)은 식별자, 즉 사람이 읽을 수 있는 *이름*이며 어떠한 CSS 기능을 구현할 것인지 결정합니다.
* **값**(value)은 앞서 지정한 속성이 브라우저에 의해 어떤 식으로 나타나야 할지 기술합니다. 각 속성의 의미적 표현을 형식 문법으로 정의한 유효한 값 집합과 함께 브라우저 엔진이 구현합니다.
CSS 선언
------

CSS 속성을 특정 값으로 설정하는 것은 CSS 언어의 핵심 기능입니다. 속성과 값 쌍은 **선언**(declaration)이라 부르며, 모든 CSS 엔진은 적절하게 요소를 배열하고 스타일을 입히기 위해서 요소 하나하나마다 어떤 선언을 적용할지 계산합니다.

CSS에서는 속성과 값 모두 대소문자를 구분합니다. 속성-값 쌍은 콜론, '`:`' (`U+003A COLON`)으로 구분하며 속성과 값 앞, 사이, 뒤에 오는 공백은 무시합니다.

![css syntax - declaration.png](/ko/docs/Web/CSS/Syntax/css_syntax_-_declaration.png)

CSS는 100가지 이상의 속성과 셀 수 없이 많은 값이 있습니다. 속성에 아무 값이나 넣는 것은 허용되지 않고, 대신 속성마다 유효한 값을 정의하고 있습니다. 주어진 속성에 대해 값이 유효하지 않은 경우, 그 선언은 부적합으로 간주하여 CSS 엔진이 완전히 무시합니다.

CSS 선언 블록
---------

선언은 **블록** 단위로 이루어져 있습니다. 즉, 여는 중괄호, '`{`' (`U+007B LEFT CURLY BRACKET`) 및 닫는 중괄호, '`}`' (`U+007D RIGHT CURLY BRACKET`)로 구분된 구조 입니다. 어떤 경우엔 블록을 중첩할 수 있으므로 열고 닫는 중괄호가 서로 맞아야 합니다.

![css syntax - block.png](/ko/docs/Web/CSS/Syntax/css_syntax_-_block.png)

이런 블록은 자연스럽게도 **선언 블록**이라고 부르며, 내부의 선언은 세미콜론, '`;`' (`U+003B SEMICOLON`)으로 구분합니다. 선언 블록은 아무런 선언도 들어가지 않은 빈 상태로도 존재할 수 있습니다. 선언 주위의 공백은 무시합니다. 마지막 선언에는 세미콜론을 생략해도 되지만, 다른 선언을 밑에다 덧붙여서 블록을 확장하면서 세미콜론 추가를 잊는 상황을 방지하기 위해 붙여주는 것이 *좋은 스타일*이라고 생각하는 경우가 자주 있기는 합니다.

CSS 선언 블록을 시각화하면 다음과 같습니다.

![css syntax - declarations block.png](/ko/docs/Web/CSS/Syntax/declaration-block.png)

**참고:** CSS 선언 블록의 콘텐츠, 즉 여닫는 중괄호 없이 세미콜론으로 분리한 선언 목록은 HTML `style` 특성의 값으로 사용할 수 있습니다.

CSS 규칙집합
--------

스타일 시트가 선언을 웹 페이지의 요소 하나씩에만 적용할 수 있다면 거의 쓸모가 없을 것입니다. 진짜 목표는 다양한 선언을 문서의 다양한 부분에 적용하는 것입니다.

CSS에서는 선언 블록에 조건을 붙여 해결할 수 있습니다. 각 (유효한) 선언 블록은 페이지의 일부 요소를 선택하는 조건인 선택자(*selector*)가 선행됩니다. 선택자-선언 블록 쌍은 **규칙집합** 또는 종종 간단히 **규칙**이라고 합니다.

![css syntax - ruleset.png](/ko/docs/Web/CSS/Syntax/ruleset.png)

페이지 요소는 여러 선택자로 그리고 결국 주어진 속성을 서로 다른 값으로 여러 번 포함하는 여러 규칙에 의해 일치될 수 있기에, CSS 표준은 어느 게 다른 것보다 우선하고 적용되어야 하는 지를 정의합니다: 이를 종속(cascade) 알고리즘이라고 합니다.

**참고:** 비록 선택자 그룹에 의해 특징지어진 규칙집합이 규칙집합을 각각 단일 선택자로 대체하는 일종의 단축(shorthand)일지라도, 이는 규칙집합 자체의 유효성에 적용되지는 않는다는 점에 유의하는 것이 중요합니다.

이는 중요한 결과로 이어집니다: 단일 기본 선택자 하나가 무효한 경우, 무명(unknown) 가상 요소(pseudo-element) 또는 가상 클래스(pseudo-class)를 사용할 때처럼, 모든 *선택자*는 무효하고 따라서 전체 규칙은 무시됩니다(유효하지도 않기에).

CSS 문
-----

규칙집합은 종종 큰 규칙집합 목록만으로 구성된 스타일 시트의 주요 구성 블록입니다. 하지만 문자 집합, import하려는 다른 외부 스타일 시트, 글꼴 모양 또는 목록 카운터 설명 및 더 많은 것처럼 웹 제작자가 스타일 시트에서 전하고 싶은 다른 정보가 있습니다. 이를 위해 다른 특정 종류의 문을 사용합니다.

**문**은 비 공백 문자로 시작하여 첫 번째 닫는 중괄호 또는 세미콜론 (문자열 외에, 이스케이프되지 않고 다른 {}, () 및 [] 쌍에 포함되지 않는) 으로 끝나는 구성 블록입니다.

![css syntax - statements Venn diag.png](/ko/docs/Web/CSS/Syntax/css_syntax_-_statements_venn_diag.png)

다음과 같은 다른 종류의 문이 있습니다:

* 본 것처럼, CSS 선언의 컬렉션과 선택자에 의해 기술된 조건을 연결짓는 **규칙집합** (또는 *규칙*).
* at 기호, '`@`' (`U+0040 COMMERCIAL AT`)로 시작하고 그런 다음 문의 끝, 즉 블록 밖 다음 세미콜론(;) 또는 다음 블록의 끝까지 계속 식별자가 뒤따르는 **At-규칙**. 식별자에 의해 정의된 각 유형의 at-규칙은, 물론 자체 내부 구문 및 의미(semantics)가 있을 수 있습니다. 그들은 메타 데이터 정보(`@charset` 또는 `@import` 같은), 조건부 정보(`@media` 또는 `@document` (en-US) 같은) 또는 설명 정보(`@font-face` 같은)를 전달하는 데 사용됩니다.

규칙집합 또는 at-규칙이 아닌 모든 문은 유효하지 않고 무시됩니다.

또 다른 문 그룹, **중첩 문**이 있습니다, 이들은 at-규칙, *조건부 그룹 규칙*의 특정 부분집합에서 사용될 수 있는 문입니다. 이러한 문은 오직 특정 조건이 일치되면 적용합니다: `@media` at-규칙 콘텐츠는 브라우저가 돌아가는 장치가 표현된 조건과 일치하는 경우에만 적용됩니다. 반면 `@document` at-규칙 콘텐츠는 현재 페이지가 일부 조건과 일치하는 경우에만 적용됩니다, 등등. CSS1 및 CSS2.1에서는, *규칙집합*만이 조건부 그룹 규칙 내에서 사용될 수 있습니다. 그것은 매우 제한됐고 이 제한은 CSS Conditionals 레벨 3에서 해제되었습니다. 현재, 여전히 실험 중이고 모든 브라우저에서 지원되지는 않지만, 조건부 그룹 규칙은 광범위한 콘텐츠, 규칙집합뿐만 아니라 전부는 아니지만 일부 at-규칙을 포함할 수 있습니다.

같이 보기
-----

* CSS 주요 개념
    + CSS 문법
    + @규칙
    + 주석
    + 명시도
    + 상속
    + 박스 모델
    + 레이아웃 모드
    + 시각적 서식 모델
    + 마진 중첩
    + 값
        - 초깃값
        - 계산값
        - 결정값
        - 지정값
        - 사용값
        - 실제값 (en-US)
    + 값 정의 구문
    + 단축 속성
    + 대체 요소


clear - CSS: Cascading Style Sheets

clear
=====

**`clear`** CSS 속성은 요소가 선행 부동(floating) 요소 다음일 수 있는지 또는 그 아래로 내려가(해제되어(cleared))야 하는 지를 지정합니다. `clear` 속성은 부동 및 비부동 요소 모두에 적용됩니다.

시도해보기
-----

비부동 블록에 적용되는 경우, 모든 관련 부동체(floats)의 마진 경계 아래로까지 요소의 보더 경계를 아래로 내립니다. 이 움직임(이 일어나는 경우)은 마진 상쇄가 일어나지 않도록 합니다.

부동 요소에 적용되는 경우, 모든 관련 부동체의 마진 경계 아래로 요소의 마진 경계를 옮깁니다. 이는 나중(later) 부동체의 위치에 영향을 줍니다, 나중 부동체가 앞선(earlier) 부동체보다 높게 위치될 수 없기에.

해제(cleared)와 관련된 부동체는 같은 블록 형성 문맥 (en-US) 내 앞선 부동체입니다.

**참고:** **주의:** 요소가 그 안에 모든 부동 요소를 포함하고 싶은 경우, 컨테이너도 부동하거나 컨테이너의 `::after` 대체 가상 요소에 `clear`를 쓸 수 있습니다.

```css
#container::after {
  content: "";
  display: block;
  clear: both;
}
```

구문
--

```css
/\* 키워드 값 \*/
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;

/\* 전역 값 \*/
clear: inherit;
clear: initial;
clear: unset;
```

### 값

`none`

요소가 지난 부동 요소를 해제하기 위해 아래로 이동되지 *않음*을 나타내는 키워드입니다.

`left`

요소가 지난 *left* 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다.

`right`

요소가 지난 *right* 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다.

`both`

요소가 지난 *both* left 및 right 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다.

`inline-start`

요소가 *포함 블록의 시작 쪽* 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다, 즉 ltr 스크립트의 *left* 부동체 및 rtl 스크립트의 *right* 부동체.

`inline-end`

요소가 *포함 블록의 끝 쪽* 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다, 즉 ltr 스크립트의 *right* 부동체 및 rtl 스크립트의 *left* 부동체.

### 형식 구문
```

clear =
  inline-start  |
  inline-end    |
  block-start   |
  block-end     |
  left          |
  right         |
  top           |
  bottom        |
  both-inline   |
  both-block    |
  both          |
  none

```

Examples
--------

### clear: left

#### HTML

```html
<div class="wrapper">
  <p class="black">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor.
  </p>
  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  <p class="left">This paragraph clears left.</p>
</div>
```

#### CSS

```css
.wrapper {
  border: 1px solid black;
  padding: 10px;
}
.left {
  border: 1px solid black;
  clear: left;
}
.black {
  float: left;
  margin: 0;
  background-color: black;
  color: #fff;
  width: 20%;
}
.red {
  float: left;
  margin: 0;
  background-color: pink;
  width: 20%;
}
p {
  width: 50%;
}
```

### clear: right

#### HTML

```html
<div class="wrapper">
  <p class="black">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor.
  </p>
  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  <p class="right">This paragraph clears right.</p>
</div>
```

#### CSS

```css
.wrapper {
  border: 1px solid black;
  padding: 10px;
}
.right {
  border: 1px solid black;
  clear: right;
}
.black {
  float: right;
  margin: 0;
  background-color: black;
  color: #fff;
  width: 20%;
}
.red {
  float: right;
  margin: 0;
  background-color: pink;
  width: 20%;
}
p {
  width: 50%;
}
```

### clear: both

#### HTML

```html
<div class="wrapper">
  <p class="black">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus
    ac dui.
  </p>
  <p class="red">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor.
  </p>
  <p class="both">This paragraph clears both.</p>
</div>
```

#### CSS

```css
.wrapper {
  border: 1px solid black;
  padding: 10px;
}
.both {
  border: 1px solid black;
  clear: both;
}
.black {
  float: left;
  margin: 0;
  background-color: black;
  color: #fff;
  width: 20%;
}
.red {
  float: right;
  margin: 0;
  background-color: pink;
  width: 20%;
}
p {
  width: 45%;
}
```

명세서
---

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-clear |
| CSS Logical Properties and Values Level 1 # float-clear |

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

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

See also
--------

* CSS basic box model


상속 - CSS: Cascading Style Sheets

상속
==

MDN 내 각 CSS 속성(property) 정의 페이지의 요약절은 그 속성이 기본(default)으로 상속되는지("Inherited: Yes") 혹은 상속되지 않는지("Inherited: no") 쓰여 있습니다. 이 상속 여부는 요소의 속성에 어떤 값이 지정되지 않을 때 일어나는 일을 제어합니다.

상속되는 속성
-------

요소의 **상속되는 속성**에 값이 지정되지 않은 경우, 요소는 부모 요소의 해당 속성의 계산값을 얻습니다. 오직 문서의 루트 요소만 속성의 요약절에 주어진 초기값을 얻습니다.

상속되는 속성의 대표적인 예는 `color` 속성입니다. 주어진 스타일 규칙:

```css
p {
  color: green;
}
```

과 마크업:

```html
<p>This paragraph has <em>emphasized text</em> in it.</p>
```

`em` 요소는 `p` 요소로부터 `color` 속성값을 상속했기 때문에, "emphasized text"는 녹색으로 보입니다. 속성의 초기값(페이지가 어떤 색을 지정하지 않았을 때 루트 요소에 사용된 색)을 얻지 *않*습니다.

상속되지 않는 속성
----------

요소의 **상속되지 않는 속성**(Mozilla 코드에서는 가끔 **reset 속성**으로 불림)에 어떤 값이 지정되지 않는 경우, 요소는 그 속성의 초기값을 얻습니다(속성의 요약절에 지정된 대로).

상속되지 않는 속성의 대표적인 예는 `border` 속성입니다. 주어진 스타일 규칙:

```css
p {
  border: medium solid;
}
```

과 마크업:

```html
<p>This paragraph has <em>emphasized text</em> in it.</p>
```

"emphasized text"는 테두리가 없습니다(`border-style`의 초기값이 `none`이기 때문에).

참고
--

`inherit` 키워드는 작성자가 명시적으로 상속을 지정할 수 있게 합니다. 상속되는 속성과 상속되지 않는 속성 모두에 작동합니다.

같이 보기
-----

* CSS 참고서
* CSS 주요 개념
    + CSS 문법
    + @규칙
    + 주석
    + 명시도
    + 상속
    + 박스 모델
    + 레이아웃 모드
    + 시각적 서식 모델
    + 마진 중첩
    + 값
        - 초깃값
        - 계산값
        - 결정값
        - 지정값
        - 사용값
        - 실제값 (en-US)
    + 값 정의 구문
    + 단축 속성
    + 대체 요소
* `inherit`


word-spacing - CSS: Cascading Style Sheets

word-spacing
============

CSS **`word-spacing`** 속성은 단어와 단어 사이, 태그와 태그 사이의 거리를 설정합니다.

시도해보기
-----

구문
--

```css
/\* 키워드 값 \*/
word-spacing: normal;

/\* <length> 값 \*/
word-spacing: 3px;
word-spacing: 0.3em;

/\* <percentage> 값 \*/
word-spacing: 50%;
word-spacing: 200%;

/\* 전역 값 \*/
word-spacing: inherit;
word-spacing: initial;
word-spacing: unset;
```

### 값

`normal`

현재 글씨체와 브라우저가 결정한 일반적인 단어 간격을 사용합니다.

`<length>`

지정한 길이를 기본 단어 간격에 더합니다.

`<percentage>`

영향 받는 문자 최대 폭의 백분율만큼을 기본 단어 간격에 더합니다.

예제
--

### HTML

```html
<div id="mozdiv1">다양한 단어...</div>
<div id="mozdiv2">...더 많은 단어</div>
```

### CSS

```css
#mozdiv1 {
  word-spacing: 15px;
}

#mozdiv2 {
  word-spacing: 5em;
}
```

접근성 고려사항
--------

큰 절댓값의 `word-spacing`을 적용한 문장은 거의 읽기 힘들어집니다. 큰 양의 값을 적용하면 단어의 사이가 너무나도 멀어져서 문장처럼 보이지 않습니다. 반면 지나친 음의 값을 적용하면 단어끼리 서로 겹쳐서 어느 단어의 시작과 끝을 알아차리지 못하게 됩니다.

글씨체마다 문자 너비가 다르므로, 가독성을 확보하는 수준의 `word-spacing` 역시 상황에 맞춰 결정해야 합니다. 모든 글씨체에서 가독성을 유지하는 단 하나의 값은 존재하지 않습니다.

* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0
형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | `normal` |
| 적용대상 | all elements. It also applies to `::first-letter` (en-US) and `::first-line` (en-US). |
| 상속 | yes |
| Percentages | refer to the width of the affected glyph |
| 계산 값 | absolute `length` |
| Animation type | a length |

형식 구문
-----
```

word-spacing =
  normal    |
  <length>

```

명세
--

| Specification |
| --- |
| CSS Text Module Level 3 # word-spacing-property |

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

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

같이 보기
-----

* `letter-spacing`