mask
====

**`mask`** CSS 속성은 아이템이 부분적으로만 보여지게 하거나 혹은 완전히 가려서 보여지지 않게 할 수 있는 기능을 가지고 있습니다. 이 속성은 마스킹 혹은 특정한 점을 기준으로 이미지를 잘라내는 기능을 함께 제공합니다.

**참고:** `mask` 는 `mask-border` (en-US)를 초기값으로 재정의합니다. 그러므로 캐스캐이드 이전 단계에 어떠한 마스크 설정을 덮어씌우는 개별 속성아니 여타 다른 속성보다는 `mask` 를 사용하는 것을 추천합니다. This will ensure that `mask-border` has also been reset to allow the new styles to take effect.

|  |  |
| --- | --- |
| 초기값 | as each of the properties of the shorthand:* `mask-image` (en-US): `none`
* `mask-mode` (en-US): `match-source`
* `mask-repeat` (en-US): `repeat`
* `mask-position` (en-US): `center`
* `mask-clip` (en-US): `border-box`
* `mask-origin` (en-US): `border-box`
* `mask-size` (en-US): `auto`
* `mask-composite` (en-US): `add`
 |
| 적용대상 | all elements; In SVG, it applies to container elements excluding the `defs` (en-US) element and all graphics elements |
| 상속 | no |
| Percentages | as each of the properties of the shorthand:* `mask-position` (en-US): refer to size of mask painting area minus size of mask layer image (see the text for `background-position` (en-US))
 |
| 계산 값 | as each of the properties of the shorthand:* `mask-image` (en-US): as specified, but with `url` values made absolute
* `mask-mode` (en-US): as specified
* `mask-repeat` (en-US): Consists of two keywords, one per dimension
* `mask-position` (en-US): Consists of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage.
* `mask-clip` (en-US): as specified
* `mask-origin` (en-US): as specified
* `mask-size` (en-US): as specified, but with relative lengths converted into absolute lengths
* `mask-composite` (en-US): as specified
 |
| Animation type | as each of the properties of the shorthand:* `mask-image` (en-US): discrete
* `mask-mode` (en-US): discrete
* `mask-repeat` (en-US): discrete
* `mask-position` (en-US): a repeatable list
* `mask-clip` (en-US): discrete
* `mask-origin` (en-US): discrete
* `mask-size` (en-US): a repeatable list
* `mask-composite` (en-US): discrete
 |
| Creates stacking context | yes |

구문
--


```css
/\* 키워드 값 \*/
mask: none;

/\* 이미지 값 \*/
mask: url(mask.png); /\* 마스크로 사용되는 이미지 \*/
mask: url(masks.svg#star); /\* 마스크로 사용되는 SVG 그래픽 내 요소 \*/

/\* 조합형 값 \*/
mask: url(masks.svg#star) luminance; /\* 밝기 조절용 마스크로 사용되는 SVG 그래픽 내 요소 \*/
mask: url(masks.svg#star) 40px 20px; /\* 위로부터 40px, 아래부터 20px에 위치하는 마스크로 사용되는 SVG 그래픽 내 요소 \*/
mask: url(masks.svg#star) 0 0/50px 50px; /\* 가로, 세로 각각 50px 사이즈의 마스크로 사용되는 SVG 그래픽 내 요소 \*/
mask: url(masks.svg#star) repeat-x; /\* 수평으로 반복되는 마스크로 사용되는 SVG 그래픽 내 요소 \*/
mask: url(masks.svg#star) stroke-box; /\* Element within SVG graphic used as mask extending to the box enclosed by the stroke \*/
mask: url(masks.svg#star) exclude; /\* Element within SVG graphic used as mask and combined with background using non-overlapping parts \*/

/\* 글로벌 값 \*/
mask: inherit;
mask: initial;
mask: unset;
```

### 값

`<mask-reference>`

마스크 이미지 파일 설정하기. `mask-image` (en-US)를 확인하세요.

`<masking-mode>`

마스크 이미지의 마스킹 모드 설정하기. `mask-mode` (en-US)를 확인하세요.

`<position>`

마스크 이미지의 위치 설정하기. `mask-position` (en-US)를 확인하세요.

`<bg-size>`

마스크 이미지의 크기 설정하기. `mask-size` (en-US)를 확인하세요.

`<repeat-style>`

마스크 이미지의 반복 설정하기. See `mask-repeat` (en-US)를 확인하세요.

`<geometry-box>`

단 하나의 <geometry-box> 값만 주어진다면 `mask-origin` (en-US)와(과)( `mask-clip` (en-US) 모두 같은 값으로 설정하는 것을 의미합니다. 두개의<geometry-box> 값이 주어진다면 첫번째 값은 `mask-origin` (en-US)을(를), 두번쨰 값은 `mask-clip` (en-US)를 설정하는 것을 의미합니다.

`<geometry-box> | no-clip`

마스크 이미지에 영향을 받는 구역을 설정하기. `mask-clip` (en-US)를 확인하세요.

`<compositing-operator>`

현재 마스크 레이어 위의 합성 설정하기. `mask-composite` (en-US)를 확인하세요.

### 형식 구문
```

mask =   
  <mask-layer>#    
  
<mask-layer> =   
  <mask-reference>              ||  
  <position> [ / <bg-size> ]?   ||  
  <repeat-style>                ||  
  <geometry-box>                ||  
  [ <geometry-box> | no-clip ]  ||  
  <compositing-operator>        ||  
  <masking-mode>                  
  
<mask-reference> =   
  none           |  
  <image>        |  
  <mask-source>    
  
<position> =   
  [ left | center | right | top | bottom | <length-percentage> ]  |  
  [ left | center | right ] && [ top | center | bottom ]  |  
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |  
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]    
  
<bg-size> =   
  [ <length-percentage [0,∞]> | auto ]{1,2}  |  
  cover                                      |  
  contain                                      
  
<repeat-style> =   
  repeat-x                                     |  
  repeat-y                                     |  
  [ repeat | space | round | no-repeat ]{1,2}    
  
<geometry-box> =   
  <shape-box>  |  
  fill-box     |  
  stroke-box   |  
  view-box       
  
<compositing-operator> =   
  add        |  
  subtract   |  
  intersect  |  
  exclude      
  
<masking-mode> =   
  alpha         |  
  luminance     |  
  match-source    
  
<image> =   
  <url>       |  
  <gradient>    
  
<mask-source> =   
  <url>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
<shape-box> =   
  <visual-box>  |  
  margin-box      
  
<url> =   
  <url()>  |  
  <src()>    
  
<visual-box> =   
  content-box  |  
  padding-box  |  
  border-box     
  
<url()> =   
  url( <string> (en-US) <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> (en-US) <url-modifier>\* )    
  
```

예제
--


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

.anothertarget {
  mask: url(resources.svg#c1) 50px 30px/10px 10px repeat-x exclude;
}
```

명세
--

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask |

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

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

같이 보기
-----

* `clip-path`, `filter`
* HTML에 SVG 효과 적용하기 (en-US)
* SVG