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

CSS 도형 시작하기

맞춤 경로를 중심으로 콘텐츠 래핑

Razvan Caliman

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

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

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

아마도 저처럼 단순한 이미지를 떠다니면서 투명한 부분이 있는 이미지를 떠올렸을 때 콘텐츠가 공백을 채우고 래핑하기를 기대했지만, 요소 주위에 유지되는 직사각형 랩 모양 때문에 실망스러웠을 것입니다. CSS Shapes를 사용하여 이 문제를 해결할 수 있습니다.

<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 값의 반대쪽에 부동 소수점 영역이 있습니다. 예를 들어 커피 잔 이미지가 있는 요소가 왼쪽으로 떠 있으면 컵의 오른쪽에 플로팅 영역이 생성됩니다. 양쪽에 간격이 있는 이미지를 만들 수 있더라도 콘텐츠는 플로팅 속성으로 지정된 반대쪽(왼쪽 또는 오른쪽)의 도형만 래핑합니다.

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

수동으로 도형 만들기

이미지에서 도형을 추출하는 것 외에도 수동으로 코딩할 수도 있습니다. circle(), ellipse(), inset(), polygon() 등 몇 가지 기능 값 중에서 선택하여 도형을 만들 수 있습니다. 각 도형 함수는 좌표 집합을 취하며 좌표계를 설정하는 참조 상자와 쌍을 이룹니다. 참조 상자에 관해 잠시 후에 자세히 알아보겠습니다.

서클() 함수

원 도형 값의 전체 표기법은 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 + height^2) / sqrt(2))으로 계산됩니다. 이것을 이해하면 요소의 치수가 같지 않으면 결과적으로 원의 모양이 어떻게 될지 상상하는 데 도움이 되기 때문입니다.

px, em, rem, vw, vh 등의 모든 CSS 단위 유형을 셰이프 함수 좌표에 사용할 수 있습니다. 필요에 따라 유연하거나 견고한 유형을 선택할 수 있습니다.

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

.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 도형 시작하기

수동으로 도형 만들기

서클() 함수

CSS 도형용 참조 상자

ellipse() 함수

Polygon() 함수

inset() 함수

참조 상자에서 도형 만들기

도형 여백

도형에 애니메이션 적용

도형 내부에 콘텐츠 래핑하기

점진적 개선

CSS 제외와의 명확성

CSS 도형 사용 도구

결론