CSS 및 SVG 클리핑 및 마스킹 기술을 사용하는 방법

SVG는 웹 작업에 적합하며 클리핑 및 마스킹을 사용하면 웹 그래픽의 일부를 표시하거나 숨길 수 있는 흥미로운 방법이 있습니다. 또한 이러한 기술을 사용하면 수동으로 변경하고 새 이미지를 만들 필요가 없기 때문에 디자인에 더 많은 유연성을 제공합니다. 이 모든 작업이 코드로 완료됩니다. CSS 클리핑과 마스킹 기술의 조합을 사용하여 웹사이트 그래픽에 대한 많은 옵션을 갖게 됩니다.

명확하게 하기 위해 마스킹과 클리핑은 CSS로 이미지를 조작할 수 있는 두 가지 다른 방법입니다. 클리핑부터 시작하겠습니다.

클리핑 기본

Photoshop을 사용해 본 적이 있다면 클리핑 마스크에 이미 익숙할 것입니다. 비슷한 접근 방식입니다. 클리핑은 이미지나 요소 위에 원이나 삼각형과 같은 벡터 모양을 놓는 것입니다. 모양 뒤에 있는 이미지의 모든 부분이 표시되고 모양의 경계 외부에 있는 모든 부분은 숨겨집니다.

예를 들어 삼각형 클리핑 마스크가 숲의 이미지 위에 있는 경우 삼각형 모양 안에 숲 이미지가 표시됩니다. 셰이프의 경계를 클립 경로라고 하며 감가상각된 clip 속성과 혼동하지 마십시오. clip-path 속성을 사용하여 클립 경로를 만듭니다.

참고: 라이브 사이트에서 시도하지 마십시오.

기억하세요: 손상되지 않도록 사이트에서 직접 코드를 변경해서는 안 됩니다. 무료 로컬 개발 앱인 Local은 이 튜토리얼을 안전하게 따를 수 있는 테스트 환경을 설정하는 데 도움이 될 것입니다.

작동 중인 클리핑

클립은 항상 벡터 경로입니다. 이해하기 어려울 수 있지만 경로 외부의 모든 항목은 숨겨지고 경로 내부의 모든 항목이 표시됩니다. 더 잘 이해하고 직접 테스트하려면 CodePen의 샘플을 참조하십시오.

다음은 예제의 HTML 구조 스니펫입니다.

<svg class="clip-svg">
	<defs>
		<clipPath id="polygon-clip-triangle-equilateral" clipPathUnits="objectBoundingBox">
			<polygon points="0 0.87, 0.5 0, 0.5 0, 1 0.87" />
		</clipPath>
	</defs>
</svg>

이것은 클리핑을 발생시키는 CSS입니다.

.polygon-clip-triangle-equilateral {
	-webkit-clip-path: polygon(0% 87%, 50% 0%, 50% 0%, 100% 87%);
	clip-path: polygon(0% 87%, 50% 0%, 50% 0%, 100% 87%);
	-webkit-clip-path: url("#polygon-clip-triangle-equilateral");
	clip-path: url("#polygon-clip-triangle-equilateral");
}

HTML에서 clipPath id가 참조되는 위치와 clip-path URL을 사용하여 클리핑을 수행하는 방법을 볼 수 있습니다.

클리피 도구

Clippy는 CSS 클립 경로를 생성하는 훌륭한 도구입니다. 사용자 정의할 수 있는 다양한 스타터 모양과 크기가 있습니다.

마스킹 기본

마스킹은 페이지에서 이미지의 일부 또는 다른 요소를 숨기기 위해 PNG 이미지, CSS 그라디언트 또는 SVG 요소를 사용하여 수행됩니다. 우리는 SVG 그래픽에 초점을 맞출 것이지만 이것은 다른 이미지 유형이나 스타일로 수행할 수 있음을 명심하십시오.

마스크 속성 및 마스크 요소

시각화를 돕기 위한 간단한 설명으로, 마스크된 요소는 "원본"(마스크가 적용되기 전) 이미지라는 점을 염두에 두는 것이 중요합니다. 전체 이미지를 보고 싶지 않을 수 있으므로 CSS mask 속성을 사용하여 이미지의 일부를 숨깁니다. mask 는 개별 속성 그룹의 CSS 약칭이며 잠시 후에 자세히 살펴보겠습니다. SVG <mask> 요소는 SVG 그래픽 내부에서 마스킹 효과를 추가하는 데 사용됩니다. 이 예에서 마스크는 원이며 적용된 그라디언트도 있습니다.

SVG 그래픽에서 SVG 마스크 요소 사용

SVG <mask> 에 대한 느낌을 얻기 위해 SVG 그래픽으로 마스킹할 것입니다.

언뜻보기에는 다소 복잡할 수 있지만 기본 이미지를 마스킹하기 위해 모두 함께 작동합니다. 실제 이미지를 배경으로 가지고 있는데 SVG는 어디에서 작동합니까? 클리핑 예제와 달리 이 배경 이미지는 기술적으로 SVG 요소 내부에 있습니다. CSS를 사용하여 이 마스크를 이미지에 적용합니다. 속성은 SVG 마스크 요소에서 가져오고 CSS에서 masked-element 의 ID를 지정합니다.

이것이 실제로 작동하는지 보려면 이 Codepen 샘플을 확인하십시오. 마스킹된 SVG 그래픽의 작업 코드는 다음과 같습니다.

<svg class="masked-element" width="300" height="300" viewBox="0 0 300 300">
	<image xlink:href="image link" width="300px" height="300px" />
</svg>

이 CSS를 사용하여 마스크를 찾을 위치를 지정합니다. #mask-this:

/* Here’s the CSS for masking */
.masked-element image {
  mask: url(#mask1);
}

원 모양의 그라데이션이 보이시나요? 마스크의 원 모양을 설정하고 그라디언트가 적용되었습니다.

<svg class="svg-mask">
 	<defs>
 		<mask id="mask1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
    <linearGradient id="grad" gradientUnits="objectBoundingBox" x2="0" y2="1">
      <stop stop-color="white" offset="0"/>
      <stop stop-color="green" stop-opacity="0" offset="1"/>
    </linearGradient>
    <circle cx="0.50" cy="0.50" r="0.50" id="circle" fill="url(#grad)"/>
  	</mask>
 	</defs>
</svg>

SVG 텍스트 마스킹

텍스트 마스킹은 텍스트 블록을 통해 이미지를 표시하는 것과 같이 꽤 멋진 일을 할 수 있습니다. 좋은 소식은 텍스트 요소가 SVG 마스크 내부에서 사용될 수 있다는 것입니다. 앞으로 브라우저 지원이 증가함에 따라 이미지와 타이포그래피를 결합하는 정말 흥미로운 방법이 될 수 있습니다.

다음은 진행 상황에 대한 기본적인 설명입니다. SVG 마스크 안에 SVG 텍스트 요소가 있습니다. 마스크된 텍스트 주위에 타원형 영역을 만드는 흰색에 대해 RGB 값을 지정했습니다. 타원 영역 뒤에 있는 모든 것이 텍스트를 통해 표시되어 잘라낸 느낌을 줍니다.

<div class="text-wrap">
    <svg class="text-demo" viewBox="0 0 600 400" width="600" height="400">
    <defs>
      <mask id="myMask">
        <rect width="100%" height="100%" fill="#fff" />
        <text x="50" y="200" id="myText">My Text</text>
        <text x="125" y="293" id="mySubtext">SVG</text>
      </mask>
    </defs>
    <ellipse class="masked" cx="300" cy="200" rx="300" ry="150" fill="rgba(255, 255, 255, 0.8)" />
  </svg>
  </div>

/* Here’s the CSS for text element */
#myText {
font-size: 125px;
font-style: bold;
fill: #000;
}

/* Here’s the CSS for masking */
.masked {
mask: url("#myMask");
}

완전히 이해하려면 코드를 가지고 놀고 실험하는 것이 좋습니다. 이 Codepen에서 색상을 변경하고, 텍스트를 변경하고, 크기를 조정해 보십시오.

마스크 이미지 속성

이미지를 선언할 수 있고 mask-image 를 URL 값으로 설정할 수 있습니다. mask-image 는 PNG, SVG 또는 이전 예제에서 설명한 것처럼 SVG mask 요소에 대한 참조일 수 있습니다.

마스킹은 개체 또는 요소의 일부를 부분적으로 또는 완전히 숨기는 데 사용되기 때문에 먼저 마스킹될 요소에 대한 파일에 대한 이미지 링크가 필요합니다. 다음은 그 이미지의 모습입니다. 마스크가 어떤 부분을 보여주고 숨기고 있는지 매우 명확하게하기 위해 컬러풀합니다.

<img class="mask-img example-mask" src="https://linktoimage.com/img/image-example.jpg" alt="Masked image">

지금까지 많은 SVG 코드가 있었지만 이 예제는 SVG로 마스킹된 래스터 이미지가 있기 때문에 약간 다릅니다.

.example-mask {
  mask-image: url(https://linktoimage.com/browser-icon-01.svg);
  webkit-mask-image: url(https://linktoimage.com/browser-icon-01.svg);
  mask-mode: alpha;
  webkit-mask-mode: alpha;
  mask-repeat: no-repeat;
  webkit-mask-repeat: no-repeat;
  mask-size: 200px;
  webkit-mask-size: 200px;
  mask-position: center;
  webkit-mask-position: center;
}

mask-image 속성은 마스크 모양이 선언되는 위치입니다. 이 경우 마스크 이미지는 SVG 그래픽입니다. URL 링크가 포함되어 있으면 마스크가 만들어집니다.

여기 Codepen에 있습니다.

여러 마스크 이미지 결합

마스킹이 더 이상 개선될 수 없다고 생각했을 때 하나 이상의 마스크 이미지 레이어를 설정하는 옵션이 있습니다. 쉼표로 구분된 두 개의 URL 값(또는 야망이 있는 경우 더 많은 값)을 추가하기만 하면 됩니다.

위의 간단한 마스크를 확장하기 위해 원래 그래픽에 화살표가 추가됩니다. 두 개의 마스크를 결합하는 방법은 다음과 같습니다.

.combined-mask {
   mask-image: url(https://linktoimage.com/arrow-01.svg), url(https://linktoimage.com/browser-icon-01.svg);
  webkit-mask-image: url(https://linktoimage.com/arrow-01.svg), url(https://linktoimage.com/browser-icon-01.svg);
}

두 개의 값(쉼표 포함)을 추가하기만 하면 이제 두 개의 결합된 마스크가 있으므로 마스킹 가능성이 무한합니다.

여기 Codepen에 있습니다.

mask-image 로 간단한 그라디언트 만들기

모든 마스크가 복잡한 모양일 필요는 없습니다. 때로는 마스크가 특정 이미지가 아니라 그라데이션과 같은 단순한 마스크입니다. 이를 달성하는 빠른 방법을 찾고 있다면 mask-image 속성이 옵션이며 구현하기가 매우 쉽습니다.

이 예제에서는 mask-image 속성으로 설정된 그래디언트에 클래스가 적용되었습니다. 이 간단한 선언으로 이미지에 그라디언트 마스크를 쉽게 만들 수 있었습니다.

mask-image: linear-gradient(black, white, transparent);
-webkit-mask-image: linear-gradient(black, white, transparent);

Codepen에서 이것을 참조하십시오.

마스크 반복 속성

마스크를 한 번 만들면 더 만들기가 매우 쉽습니다. 이것은 사용자 정의 패턴을 만들려는 경우에 정말 유용합니다. mask-repeat 속성은 마스크의 반복을 허용합니다. 이전에 타일 배경을 만든 적이 있다면 이와 유사합니다.

완벽한 패턴이 생성되도록 선언해야 하는 크기 및 마스크 반복 유형과 같이 염두에 두어야 할 몇 가지 중요한 사항이 있습니다.

mask-size 는 특히 여기에 설정된 픽셀 값으로 시각화하기가 매우 쉽습니다.

mask-size: 200px;
webkit-mask-size: 200px;

패턴에 대해 다른 효과를 찾고 있다면 몇 가지 마스크 반복 옵션이 더 있습니다.

• repeat-x 는 x 좌표를 따라 반복합니다.
• Repeat-y 는 y 좌표 아래로 반복합니다.
• space 은 사용 가능한 영역에서 반복되고 퍼집니다.
• round 는 사용 가능한 영역에서 여러 번 반복됩니다(필요한 경우 크기를 조정하면 공간을 채우는 데 도움이 됩니다).

브라우저 지원

이 새로운 그래픽 작업 방식을 적용하기 전에 브라우저 지원이 클리핑 및 마스킹과 일치하지 않는다는 점에 유의해야 합니다. 클리핑은 마스킹보다 더 많이 지원되지만 Internet Explorer는 클리핑을 완전히 지원하지 않습니다. CSS 마스크에 대한 현재 브라우저 지원도 상당히 제한되어 있으므로 몇 가지 장식 요소의 향상으로 사용하는 것이 좋습니다. 이렇게 하면 사용자의 브라우저에서 지원하지 않는 경우 콘텐츠 보기 환경에 영향을 주지 않습니다.

문제를 테스트하고 마스크와 클리핑이 지원되는지 확인하려면 JSFiddle 또는 Codepen을 만든 다음 다른 브라우저에서 시도하는 것이 좋습니다. 브라우저 지원은 최근 몇 년 동안 증가했으며 결국 완전히 지원되는 지점에 도달할 것입니다. 한계로 인해 좌절하지 마십시오. 항상 앞서가는 것이 좋으며 지원이 더 주류가 되면 그래픽을 혁신하는 방법을 정확히 알게 될 것입니다. 확실하지 않은 경우 신뢰할 수 있는 Can I Use를 참조하십시오.

이러한 예를 실험한 후에는 마스킹 및 클리핑에 대한 좋은 소개를 제공해야 합니다. 현재로서는 브라우저 지원이 제한되어 있지만 이는 향후 주류가 될 것입니다. 이러한 기술을 사용하여 흥미로운 영상을 만드는 방법에 대해 생각하는 것은 항상 재미있습니다. 웹 그래픽의 미래는 우리를 이미지 편집기에 덜 의존하게 만들고 브라우저에서 직접 이미지를 만들고 수정하는 보다 효과적인 방법을 허용할 것입니다.

다음: 더 빠르게 사이트를 디자인하십시오!

간소화된 웹 디자인 프로세스의 중요성을 이해하고 있습니다. 웹사이트를 더 빨리 디자인하기 위해 할 수 있는 모든 일은 주머니에 더 많은 돈을 들인다는 의미입니다. 그렇기 때문에 Flywheel은 시간을 절약하고 최고의 작업을 계속할 수 있도록 호스팅 플랫폼을 설계했습니다! 이러한 웹 디자인 팁과 도구를 사용하면 더 많은 프로젝트를 완료하고 비즈니스 성장에 더 많은 시간을 할애할 수 있습니다.

이 가이드에서는 작업 속도를 높이고 WordPress 워크플로의 속도를 높이는 방법에 대한 팁을 다룹니다. 초기 사이트 설정에서 라이브 푸시에 이르기까지 일상 업무에서 작업 시간을 줄이는 방법을 알아보십시오! 지금 다운로드하세요.

이 기사는 원래 2016년 8월 3일에 게시되었습니다. 마지막 업데이트는 2018년 11월 6일입니다.