Properties

Properties

  • account_tree
  • bug_report

Masking

개체의 일부를 완전히 또는 부분적으로 숨기는 두 가지 다른 그래픽 작업인 클리핑(clipping)과 마스킹(masking)을 정의한다.

이 모듈에 관한 참고 사항

이 모듈에서 다루는 기술들은 2021년 8월 5일에 W3C에서 후보로 추천된 초안을 기준으로 한다. 따라서 아직까지는 모든 웹브라우저에서 포함되지 않을 확률이 높다. 현재는 파이어폭스(firefox) 웹브라우저에서 가장 빠르게 반영중이며 다른 웹브라우저에서도 조금씩 반영되는 상태이다.

더불어 mask-border-* 속성들은 현재 대부분의 웹브라우저에서는 후보안과는 다르게 속성 명이 mask-box-image-*로 사용되고 있다. 물론 아직은 벤더프리픽스(vender prifix)가 적용된 테스트 단계에서 사용이 가능함을 고려하더라도 이례적이다. 아마도 조정 단계에서 충분히 발생할 수 있는 사안들이니 곧 모듈의 지위가 상향되면서 정립되지 않을까 생각한다. 

관련 속성

  • clip

    이미지가 포함하는 컨테이너보다 클 경우 사각 형태로 클리핑한다.
  • clip-path

    요소의 클리핑 범위를 설정한다.
  • mask

    마스크 설정에 필요한 관련 속성들을 빠르게 작성할 수 있는 속기 속성이다.
  • mask-border

    요소 테두리의 가장자리를 따라 마스크를 만들 수 있는 속기 속성이다.
  • mask-border-mode

    마스크 테두리에 사용되는 혼합 모드(blending mode)를 지정한다.
  • mask-border-outset

    마스크 테두리를 적용할 상자로부터의 거리를 지정한다.
  • mask-border-repeat

    소스 이미지의 가장자리 영역이 요소의 마스크 테두리 크기에 맞게 조정되는 방식을 지정한다.
  • mask-border-slice

    mask-border-source 속성에 의해 설정된 이미지를 영역으로 나눈다. 이 영역은 요소의 마스크 테두리 구성 요소를 형성하는데 사용된다.
  • mask-border-source

    요소의 마스크 테두리를 만드는 데 사용되는 소스 이미지를 설정한다.
  • mask-border-width

    요소의 마스크 테두리 너비를 설정한다.
  • mask-clip

    마스크의 영향을 받는 영역을 결정한다.
  • mask-composite

    현재 마스크 레이어 아래에 마스크 레이어가 있는 합성 작업을 나타낸다.
  • mask-image

    요소의 마스크 레이어로 사용되는 이미지를 설정한다.
  • mask-mode

    mask-image 속성에 의해 정의된 마스크 참조가 휘도 또는 알파 마스크로 처리되는지 여부를 설정한다.
  • mask-origin

    마스크의 원점을 지정한다.
  • mask-position

    정의된 각 마스크 이미지에 대해 mask-origin에서 설정한 마스크 위치 레이어를 기준으로 초기 위치를 설정한다.
  • mask-repeat

    마스크 이미지가 반복되는 방식을 설정한다.
  • mask-size

    마스크 이미지의 크기를 지정한다. 이미지의 크기는 원래 비율을 유지하기 위해 완전히 또는 부분적으로 제한될 수 있다.
  • mask-type

    SVG의 <mask> 요소가 휘도 또는 알파 마스크로 사용되는지 여부를 설정한다.

W3C Modules