경로, 모양, 클리핑, 마스크

HTML 렌더링은 박스 모델을 기반으로 빌드되지만, 직사각형보다 더 많은 요소가 있습니다 (웹 디자인도 마찬가지). CSS는 요소의 어떤 영역이 렌더링되는지 변경하는 여러 방법을 지원하므로 개발자는 모든 모양과 크기를 지원하는 디자인을 자유롭게 만들 수 있습니다. 클리핑은 기하학적 모양을 허용하는 반면 마스크는 픽셀 수준에서 공개 상태에 영향을 미칩니다.

경로 및 도형

CSS는 함수를 사용하여 도형을 정의합니다. 함수에 관한 일반적인 내용은 CSS 함수 모듈에서 다룹니다. 이 섹션에서는 CSS로 도형을 만드는 방법을 알아봅니다. 다음 예에서는 모두 clip-path 속성으로 만든 도형을 사용하므로 보이는 영역이 도형 내부로만 줄어듭니다. 이를 통해 요소가 요소의 상자와 시각적으로 다를 수 있습니다. 클리핑에 대해서는 나중에 자세히 다룹니다.

CSS로 정의된 도형은 기본 도형 (예: 원, 직사각형, 다각형) 또는 경로 (복잡한 도형과 복합 도형을 정의할 수 있음)일 수 있습니다.

기본 도형

circle() 및 ellipse()

circle() 및 ellipse() 함수는 요소에 상대적인 반지름을 갖는 원형 및 타원형 모양을 정의합니다. circle() 함수는 단일 크기 또는 백분율을 인수로 허용합니다. 기본적으로 두 함수는 요소의 중앙을 기준으로 도형을 배치합니다. 두 속성 모두 at 키워드 뒤에 선택적 위치를 허용하며, 위치는 길이, 백분율 또는 위치 키워드로 표현할 수 있습니다.

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: circle(50%);
}

위의 예에서는 circle() 함수를 사용하는 원형 클리핑 경로를 보여줍니다. 반지름이 50%이면 요소의 전체 너비에 해당하는 원이 만들어집니다. ellipse() 함수는 도형의 가로 및 세로 반지름을 나타내는 두 인수를 허용합니다.

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: ellipse(50% 25%);
}

위의 예에서는 ellipse() 함수를 사용하여 타원형 클리핑 경로를 보여줍니다. 반지름이 50% 이면 요소의 전체 너비에 해당하는 타원이 생성됩니다. 다음 예에서는 요소의 상단에 중심이 위치한 동일한 타원을 표시합니다.

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: ellipse(50% 25% at center top);
}

rect() 및 inset()

rect() 및 inset() 함수는 요소의 측면을 기준으로 측면의 위치를 설정하여 직사각형을 정의하는 다양한 방법을 제공합니다. 이렇게 하면 요소의 기본 상자와 시각적으로 다른 직사각형을 만들 수 있습니다. border-radius 약식 속성과 동일한 구문을 사용하여 둥근 모서리가 있는 직사각형을 만들기 위해 round 키워드를 선택적으로 허용합니다.

rect() 함수는 요소의 상단 가장자리를 기준으로 한 직사각형의 상단 및 하단 측면 위치와 요소의 왼쪽 가장자리를 기준으로 한 왼쪽 및 오른쪽 측면 위치를 정의합니다. 이 함수는 상단, 오른쪽, 하단, 왼쪽을 정의하는 크기 또는 백분율 단위 4개를 인수로 허용합니다. 요소의 크기가 변경될 때 크기가 조정되지 않는 직사각형이나 요소가 변경될 때 동일한 비율을 유지하는 직사각형을 원하는 경우 rect() 함수를 선택할 수 있습니다.

.my-element {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: rect(15px 75px 45px 10px);
}

위의 예에서는 rect() 함수를 사용하여 정의된 직사각형 클리핑 경로를 보여줍니다. 측정기준은 다이어그램에 표시된 대로 요소의 상단 및 왼쪽 가장자리를 기준으로 합니다.

inset() 함수는 요소의 각 면에서 안쪽으로의 거리를 기준으로 직사각형의 면 위치를 정의합니다. 이 함수는 크기 또는 백분율 단위를 1~4개 인수로 허용하므로 여러 면을 한 번에 정의할 수 있습니다. 요소에 따라 크기가 조정되는 직사각형이나 요소의 가장자리에서 일정한 거리를 유지하는 직사각형이 필요한 경우 inset() 함수를 선택할 수 있습니다.

.my-element {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: inset(15px 5px 15px 10px);
}

위의 예에서는 inset() 함수를 사용하여 정의된 직사각형 클리핑 경로를 보여줍니다. 크기는 요소의 측면을 기준으로 합니다.

rect() 및 inset() 함수는 border-radius 약식 속성과 동일한 구문을 사용하여 round 키워드를 선택적으로 허용하여 모서리가 둥근 사각형을 만듭니다. 다음 예에서는 이전에 표시된 직사각형의 둥근 버전을 보여줍니다.

.rounded-rect {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: inset(15px 5px 15px 10px round 5px);
}

.rounded-inset {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: inset(15px 5px 15px 10px round 5px);
}

polygon()

삼각형, 오각형, 별 등의 다른 도형의 경우 polygon() 함수를 사용하면 여러 점을 직선으로 연결하여 도형을 만들 수 있습니다. polygon() 함수는 길이가 2인 길이 또는 백분율 단위로 구성된 쌍 목록을 허용합니다. 각 쌍은 다각형의 한 점을 설명합니다. 첫 번째 값은 요소의 왼쪽 가장자리로부터의 거리이고 두 번째 값은 요소의 상단 가장자리로부터의 거리입니다. 마지막 점을 첫 번째 점과 연결하여 다각형이 완성되므로 다각형을 닫을 필요는 없습니다.

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: polygon(
    50% 0,
    0 100%,
    100% 100%
  );
}

앞의 예에서는 세 점을 정의하여 삼각형 클리핑 경로를 만듭니다.

기본적으로 polygon() 함수는 겹치는 영역을 채워진 영역으로 렌더링합니다. 선택적 첫 번째 인수인 채우기 규칙을 사용하여 이 동작을 변경할 수 있습니다. 채워진 영역과 채워지지 않은 영역을 번갈아 표시하려면 채우기 규칙을 evenodd로 설정하세요. 기본 채우기 규칙을 사용하려면 nonzero로 설정합니다.

위 예에서는 삼각함수가 있는 polygon() 함수를 사용하여 정다각형과 별 모양을 만듭니다. 이렇게 하면 요소 내부에 들어가는 가장 큰 정다각형이 생성되거나 가운데에 배치되지는 않습니다. 이는 여러분이 직접 해보시기 바랍니다. 이 예의 별 모양은 nonzero 및 evenodd 채우기 규칙도 보여줍니다.

복잡한 도형

기본 도형 함수가 복잡한 도형을 설명하기에 충분하지 않은 경우 CSS는 더 정교한 구문을 사용하여 곡선, 선과 같은 기능을 설명하는 함수를 제공합니다. 이러한 함수는 복합 도형 (구멍이 있는 원과 같이 여러 도형으로 구성된 도형)에도 유용합니다.

path()

path() 함수는 모양을 설명하는 SVG 경로 구문 문자열을 허용합니다. 이를 통해 도형을 구성하는 선과 곡선을 설명하는 안내를 사용하여 복잡한 도형을 만들 수 있습니다. SVG 구문을 직접 수정하는 것은 복잡할 수 있으므로 path() 함수로 도형을 만들 때 구문을 내보낼 수 있는 전용 시각적 편집기를 고려하는 것이 좋습니다.

path() 함수는 CSS 크기 조정 단위를 사용하지 않으며 모든 값은 픽셀로 해석됩니다. 즉, path 함수로 만든 도형은 요소나 컨테이너의 크기에 반응하지 않습니다. path()는 고정된 크기의 도형에만 사용하는 것이 좋습니다.

shape()

shape() 함수는 path() 함수와 마찬가지로 명령어 구문을 사용하여 도형을 설명합니다. 하지만 shape() 함수 명령어는 네이티브 CSS이며 CSS 크기 단위를 사용할 수 있습니다. 이렇게 하면 shape() 함수를 사용하여 정의된 도형의 크기를 반응형으로 조정할 수 있습니다.

위의 예에서는 path() 및 shape() 함수를 사용하여 하트 모양과 가운데에 구멍이 있는 원을 정의합니다. 이 예에서는 두 함수 모두에 동일한 픽셀 값을 사용하지만 shape() 함수는 백분율이나 컨테이너 상대 단위와 같은 다른 CSS 크기 단위를 사용할 수도 있습니다.

클리핑

클리핑은 요소의 어떤 영역이 표시되는지 정의합니다. 이는 잡지에서 이미지를 잘라내는 것과 비슷합니다. clip-path 속성은 클립 영역을 정의하는 데 사용되는 경로를 설정합니다.

이전 섹션의 예에서 본 것처럼 기본 모양 또는 경로 함수는 clip-path로 사용할 수 있습니다. clip-path 속성은 SVG clipPath 요소에 정의된 경로도 지원하며, 이 경로는 삽입되거나 별도의 파일에 있을 수 있습니다.

위 다이어그램은 이미지 요소에 clip-path를 추가하면 이미지의 표시 영역이 어떻게 변경되는지 보여줍니다. 상단 클립 경로는 circle() 함수를 사용하고 하단은 SVG clipPath를 사용합니다. circle() 함수를 사용하여 만든 원은 기본적으로 요소의 중앙에 배치됩니다.

clip-path 속성은 단일 경로만 허용합니다. 겹치지 않는 여러 모양으로 요소를 클리핑하려면 path() 또는 shape() 함수를 사용하여 복합 경로를 정의하거나 SVG clipPath를 사용하세요. 복잡한 시나리오의 또 다른 옵션은 클리핑 대신 마스크를 사용하는 것입니다. 이 내용은 나중에 설명합니다.

도형으로 자르기

기본 도형이나 경로 함수를 사용하여 클리핑하려면 앞의 예와 같이 clip-path 속성을 함수에서 반환된 값으로 설정합니다. 각 함수는 요소에 대해 클리핑 모양을 다르게 배치하므로 각 함수의 참조를 확인하세요.

위의 예시에서는 .clipped 클래스를 사용하여 원형 clip-path가 적용된 두 개의 요소가 있습니다. clip-path은 각 요소에 상대적으로 배치되며 clip-path 내의 텍스트는 모양을 따르도록 리플로우되지 않습니다.

클리핑 경로의 참조 상자

기본적으로 요소의 클리핑 경로에는 요소의 테두리가 포함됩니다. 기본 도형 함수 중 하나를 사용할 때 테두리 내의 요소 영역만 포함하도록 클립 경로의 참조 상자를 설정할 수 있습니다. 참조 상자의 유효한 값은 stroke-box (기본값) 및 fill-box (테두리 안쪽 영역만 포함)입니다.

앞의 예시에서는 20px 테두리가 큰 요소를 보여주며, 각 요소는 inset() 함수를 사용하여 clip-path를 설정합니다. 요소의 테두리를 기준으로 클리핑되는 요소는 여전히 테두리의 일부를 표시합니다. 테두리 내 영역을 기준으로 클리핑되는 요소는 테두리가 표시되지 않으며 동일한 인셋 값을 사용하더라도 더 작습니다.

그래픽으로 클리핑

클리핑 경로는 HTML 문서에 삽입되거나 외부에서 참조되는 SVG 문서에 정의될 수 있습니다. 이는 그래픽 프로그램에서 만든 복잡한 클리핑 경로 또는 여러 도형을 결합한 클리핑 경로를 정의하는 데 유용할 수 있습니다.

<img id="kitten" src="kitten.png">

<svg>
  <defs>
    <clipPath id="kitten-clip-shape">
      <circle cx="130" cy="175" r="100" />
    </clipPath>
  </defs>
</svg>

<style>
  #kitten {
    clip-path: url(#kitten-clip-shape);
  }
</style>

위의 예시에서는 id이 kitten-clip-shape인 clipPath가 <img> 요소에 적용됩니다. 이 경우 SVG 문서는 HTML에 삽입됩니다. SVG 문서가 kitten-clipper.svg라는 외부 파일인 경우 clipPath은 대신 url(kitten-clipper.svg#kitten-clip-shape)로 참조됩니다.

마스킹

마스킹은 요소의 어떤 영역을 표시하거나 숨길지 정의하는 또 다른 방법입니다. 클리핑은 기본 도형이나 경로를 사용하는 반면 마스크는 이미지나 그라데이션의 픽셀을 사용하여 표시 여부를 결정합니다. 클리핑과 달리 마스크를 사용하면 요소의 영역을 부분적으로 투명하게 만들 수 있습니다. 요소에 여러 마스크 이미지를 적용하여 다양한 효과를 만들 수 있습니다.

마스크를 적용하려면 mask-image 속성을 설정합니다. 이 속성은 SVG 문서에서 하나 이상의 이미지, 그라데이션 또는 <mask> 요소에 대한 참조를 허용합니다. 마스크 이미지를 여러 개 적용하려면 쉼표로 구분하면 됩니다.

.my-element {
  mask-image: url(my-mask.png),
              linear-gradient(black 0%, transparent 100%);
}

위의 예에서 .my-element은 PNG 이미지를 사용하여 마스크 처리된 후 선형 그라데이션이 적용됩니다. 기본적으로 여러 마스크가 함께 추가되어 최종 마스크가 생성됩니다.

위의 예에서는 하나 이상의 마스크가 적용된 이미지를 보여줍니다. 각 마스크를 전환하여 마스크가 합쳐져 최종 효과를 생성하는 방식을 확인합니다.

알파 마스크와 휘도 마스크 비교

이미지의 alpha 또는 luminance를 사용하여 마스크를 적용할 수 있습니다. alpha를 기반으로 마스크를 적용하면 마스크 이미지의 각 픽셀 투명도가 요소에 적용되며 해당 픽셀의 색상 정보는 무시됩니다. luminance를 기반으로 마스크를 적용하면 투명도와 각 픽셀의 값 (밝기 또는 어두움)이 요소에 적용됩니다. 휘도에 의한 마스크 처리는 밝은 색상을 표시되고 어두운 색상을 표시되지 않는 것으로 처리합니다.

마스킹 모드를 설정하려면 mask-mode 속성을 사용합니다. 기본적으로 mask-mode 속성은 match-source로 설정되며, 이는 마스크 이미지의 유형에 따라 모드를 설정합니다. 이미지 및 그라데이션의 경우 기본값은 alpha입니다. SVG 마스크의 경우 mask-type이 정의되지 않은 경우 <mask> 요소의 mask-type 속성 값 또는 luminance이 기본값으로 설정됩니다.

앞의 예에서는 다양한 색상과 알파 값을 보여주는 테스트 패턴이 마스크로 사용됩니다. mask-mode를 전환하면 alpha 모드는 투명도를 기반으로 하고 luminance 모드는 색상 밝기와 투명도를 모두 기반으로 하는 것을 확인할 수 있습니다.

추가 마스킹 속성

CSS는 마스크의 동작을 미세 조정할 수 있는 추가 속성을 제공합니다. 각 속성은 쉼표로 구분된 값 목록을 허용하며, 이 목록은 mask-image 속성으로 설정된 마스크 목록과 일치합니다. 마스크보다 값이 적으면 각 마스크에 값이 설정될 때까지 목록이 반복됩니다. 마스크보다 값이 많으면 초과 값은 삭제됩니다.

마스크 약식

마스크 약어를 사용하면 한 번에 여러 마스크 속성을 설정할 수 있습니다. 이렇게 하면 각 마스크의 모든 속성을 함께 그룹화하여 여러 마스크를 간단하게 설정할 수 있습니다. 마스크 약어는 mask-image, mask-mode, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-composite 속성을 순서대로 설정하는 것과 같습니다. 모든 속성을 포함할 필요는 없으며 포함되지 않은 속성은 초기 값으로 재설정됩니다. 마스크당 최대 8개의 속성을 지원하므로 전체 참조를 사용할 수 있으면 도움이 됩니다.

.longhand {
  mask-image: linear-gradient(white, black),
              linear-gradient(90deg, black, transparent);
  mask-mode: luminance, alpha;
  mask-position: bottom left, top right;
  mask-size: 50% 50%, 30% 30%;
}

.shorthand {
  mask: linear-gradient(white, black) luminance bottom left / 50% 50%,
        linear-gradient(90deg, black, transparent) alpha top right / 30% 30%;
}

위 예시에서는 각 클래스에 마스크가 두 개 적용되었습니다. 첫 번째는 개별 속성을 사용하고 두 번째는 mask 약어를 사용합니다. 두 스타일은 서로 동일합니다.

플로팅된 요소 주위로 텍스트 흐르기

요소를 클리핑하거나 마스크로 가리면 상자 내의 표시 영역만 변경되고 상자 자체는 변경되지 않습니다. 즉, 플로팅된 요소는 요소의 표시되는 부분이 아닌 원래 경계 상자를 기반으로 문서 흐름에 영향을 미칩니다. 요소 주위의 흐름을 정의하려면 클립 경로와 함께 shape-outside 속성을 사용하세요.

shape-outside 속성은 콘텐츠가 요소 주위로 흐르는 모양을 정의합니다. 이 도형은 기본 도형 함수 중 하나일 수 있지만 path() 또는 shape() 함수를 사용하여 정의된 도형이나 SVG 문서에 정의된 clipPath는 사용할 수 없습니다.

shape-outside 속성은 이미지 또는 그라데이션도 허용합니다. 마스크 처리와 마찬가지로 도형의 경계는 이미지 또는 그라데이션의 투명도에 따라 결정됩니다. shape-image-threshold 속성은 도형 내부에 투명도가 적용되는 수준을 설정합니다.

애니메이션의 도형

clip-path 애니메이션 처리

clip-path 속성에 애니메이션을 적용하여 도형 간에 블렌딩할 수 있습니다. 부드러운 애니메이션을 만들려면 각 키프레임에 동일한 모양 함수를 사용해야 합니다. polygon() 또는 shape() 함수를 사용할 때는 각 키프레임에서 동일한 수의 포인트를 사용해야 합니다.

위 예에서 요소의 clip-path은 polygon() 함수를 사용하여 정의된 오각형과 별 모양 사이에서 전환됩니다. 이 예에서는 evenodd 채우기 규칙을 사용하여 애니메이션 처리된 점이 겹치는 영역을 만드는 방법을 보여줍니다.

offset-path를 사용한 애니메이션

이러한 도형 함수로 만든 경로를 따라 요소를 애니메이션으로 만들 수도 있습니다. offset-path 속성은 경로로 사용할 모양을 설정하고 offset-distance은 해당 경로를 따라 위치를 설정합니다. offset-path 속성과 함께 ray() 함수를 사용하여 직선을 따라 애니메이션을 적용할 수도 있습니다.

위의 예에서는 clip-path와 offset-path에 동일한 다각형을 사용하는 방법을 보여줍니다. 애니메이션은 offset-distance를 사용하여 큰 별이 clip-path로 사용하는 동일한 다각형을 따라 작은 별을 이동합니다.

이해도 확인