이 페이지는 Cloud Translation API를 통해 번역되었습니다.

CSS 도형 시작하기

맞춤 경로를 둘러싼 콘텐츠 래핑

Razvan Caliman

오랫동안 웹 디자이너는 직사각형의 제약 조건 내에서 작업해야 했습니다. 직사각형이 아닌 레이아웃을 시도하는 대부분의 창의적인 시도는 실패로 끝나기 때문에 웹의 대부분의 콘텐츠는 여전히 단순한 상자에 갇혀 있습니다. Chrome 37부터 사용할 수 있는 CSS 도형이 도입되면서 변경될 예정입니다. CSS 도형을 사용하면 웹 디자이너가 원, 타원, 다각형과 같은 맞춤 경로를 중심으로 콘텐츠를 래핑하여 직사각형의 제약조건에서 벗어날 수 있습니다.

도형은 수동으로 정의하거나 이미지에서 추론할 수 있습니다.

아주 간단한 예를 살펴보겠습니다.

투명한 부분이 있는 이미지를 처음 플로팅할 때 콘텐츠가 줄어들고 틈새가 채워질 것으로 기대했지만 요소 주위에 직사각형 래핑 도형이 유지되어 실망하신 경험이 있을 것입니다. CSS 도형은 이 문제를 해결하는 데 사용할 수 있습니다.

<img class="element" src="image.png" />
<p>Lorem ipsum…</p>

<style>
.element{
  shape-outside: url(image.png);
  shape-image-threshold: 0.5;
  float: left;
}
</style>

shape-outside: url(image.png) CSS 선언은 브라우저에서 도형을 추출하도록 지시합니다.

shape-image-threshold 속성은 도형을 만드는 데 사용될 최소 불투명도 수준을 정의합니다. 값은 0.0(완전 투명)과 1.0(완전 불투명) 사이의 범위여야 합니다. 따라서 shape-image-threshold: 0.5는 불투명도가 50% 이상인 픽셀만 도형을 만드는 데 사용됨을 의미합니다.

여기서는 float 속성이 핵심입니다. shape-outside 속성은 콘텐츠가 래핑할 영역의 모양을 정의하지만 부동 소수점을 사용하지 않으면 도형의 효과는 볼 수 없습니다.

요소의 float 값의 반대쪽에 부동 소수점 영역이 있습니다. 예를 들어 커피 컵 이미지가 있는 요소가 왼쪽으로 플로팅되면 컵의 오른쪽에 플로팅 영역이 생성됩니다. 양쪽에 간격이 있는 이미지를 설계할 수 있지만 콘텐츠는 float 속성으로 지정된 반대쪽(왼쪽 또는 오른쪽)의 도형만 래핑하며 양쪽 모두를 래핑하지는 않습니다.

향후 CSS 제외 도입으로 플로팅되지 않은 요소에 shape-outside를 사용할 수 있게 됩니다.

수동으로 도형 만들기

이미지에서 도형을 추출하는 것 외에도 수동으로 코딩할 수도 있습니다. 도형을 만들기 위해 circle(), ellipse(), inset(), polygon()과 같은 몇 가지 기능 값 중에서 선택할 수 있습니다. 각 도형 함수는 좌표 집합을 허용하며 좌표계를 설정하는 참조 상자와 페어링됩니다. 참조 상자에 대한 자세한 내용은 잠시 후에 설명해 드리겠습니다.

circle() 함수

원 도형 값의 전체 표기는 circle(r at cx cy)입니다. 여기서 r는 원의 반경이고 cx 및 cy는 X축과 Y축의 원 중심 좌표입니다. 원 중심의 좌표는 선택사항입니다. 생략하면 요소의 중심(대각선의 교차점)이 기본값으로 사용됩니다.

.element{
  shape-outside: circle(50%);
  width: 300px;
  height: 300px;
  float: left;
}

위의 예에서는 콘텐츠가 원형 경로의 외부로 래핑됩니다. 단일 인수 50%는 원의 반지름을 지정하며, 이 특정 경우에는 요소의 너비 또는 높이의 절반입니다. 요소의 크기를 변경하면 원 모양의 반경에 영향을 미칩니다. 다음은 CSS 도형을 반응형으로 만드는 방법을 보여주는 기본 예입니다.

계속 진행하기 전에 잠시 언급할 점은 CSS 도형은 요소 주위의 플로팅 영역의 모양에만 영향을 미친다는 것입니다. 요소에 배경이 있으면 도형에 의해 잘리지 않습니다. 이 효과를 얻으려면 CSS 마스킹의 속성인 clip-path 또는 mask-image를 사용해야 합니다. clip-path 속성은 CSS 도형과 동일한 표기법을 따르므로 값을 재사용할 수 있어 매우 유용합니다.

이 문서 전체에서 일러스트레이션에서는 클리핑을 사용하여 도형을 강조 표시하고 효과를 이해하는 데 도움을 줍니다.

원 모양으로 돌아갑니다.

원 반지름에 백분율을 사용하는 경우 값은 실제로 sqrt(width^2 + 높이^2) / sqrt(2)와 같이 약간 더 복잡한 수식으로 계산됩니다. 이를 이해하면 요소의 크기가 같지 않은 경우 결과적으로 어떤 원 모양이 만들어질지 상상하는 데 도움이 됩니다.

모든 CSS 단위 유형은 도형 함수 좌표(px, em, rem, vw, vh 등)에서 사용할 수 있습니다. 필요에 따라 유연하거나 충분히 엄격한 방법을 선택할 수 있습니다.

원의 중심 좌표에 명시적 값을 설정하여 원의 위치를 조정할 수 있습니다.

.element{
  shape-outside: circle(50% at 0 0);
}

이렇게 하면 원의 중심이 좌표계의 원점에 배치됩니다. 좌표계란 무엇인가요? 여기에서 참조 상자를 소개합니다.

CSS 도형의 참조 상자

참조 상자는 도형을 그리고 배치하는 데 사용되는 좌표계를 설정하는 요소 주위의 가상 상자입니다. 좌표계의 원점은 왼쪽 상단에 있으며 X축은 오른쪽을, Y축은 아래를 가리킵니다.

shape-outside는 콘텐츠가 래핑되는 플로팅 영역의 모양을 변경합니다. 플로팅 영역은 margin 속성으로 정의된 상자의 외부 가장자리까지 확장됩니다. 이를 margin-box라고 하며 명시적으로 언급되지 않은 경우 도형의 기본 참조 상자입니다.

다음 두 CSS 선언은 동일한 결과를 갖습니다.

.element{
  shape-outside: circle(50% at 0 0);
  /* identical to: */
  shape-outside: circle(50% at 0 0) margin-box;
}

아직 요소에 여백을 설정하지 않았습니다. 이 시점에서 좌표계의 원점과 원 중심이 요소의 콘텐츠 영역 왼쪽 상단에 있다고 가정해도 됩니다. 여백을 설정하면 다음과 같이 변경됩니다.

.element{
  shape-outside: circle(50% at 0 0) margin-box;
  margin: 100px;
}

이제 좌표계의 원점은 원 중심과 마찬가지로 요소의 콘텐츠 영역(위쪽 100픽셀, 왼쪽 100픽셀) 외부에 있습니다. 또한 margin-box 참조 상자로 설정된 좌표계의 증가된 표면을 고려하여 원 반경의 계산된 값도 증가합니다.

CSS 도형 시작하기

수동으로 도형 만들기

circle() 함수

CSS 도형의 참조 상자

ellipse() 함수

polygon() 함수

inset() 함수

참조 상자에서 도형 만들기

도형 여백

도형에 애니메이션 적용

도형 내부에서 콘텐츠 래핑

점진적 개선

CSS 제외의 모호성 제거

CSS 도형을 사용하는 도구

결론