Google은 AI 기술을 사용하여 콘텐츠를 사용자의 기본 언어로 번역합니다. AI 번역에는 오류가 있을 수 있습니다.

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 값 반대쪽에 플로트 영역이 있습니다. 예를 들어 커피잔 이미지가 있는 요소가 왼쪽으로 플로팅되면 플로팅 영역이 커피잔 오른쪽에 생성됩니다. 양쪽에 간격이 있는 이미지를 만들 수 있지만 콘텐츠는 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 + height^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;
}

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

CSS 도형 시작하기

수동으로 도형 만들기

circle() 함수

CSS 도형의 참조 상자

ellipse() 함수

polygon() 함수

inset() 함수

참조 상자에서 도형 만들기

도형 여백

도형에 애니메이션 적용

도형 내부에 콘텐츠 줄바꿈

점진적 개선

CSS 제외에서 명확화

CSS 도형 작업 도구

결론

CSS 도형 시작하기 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

수동으로 도형 만들기

circle() 함수

CSS 도형의 참조 상자

ellipse() 함수

polygon() 함수

inset() 함수

참조 상자에서 도형 만들기

도형 여백

도형에 애니메이션 적용

도형 내부에 콘텐츠 줄바꿈

점진적 개선

CSS 제외에서 명확화

CSS 도형 작업 도구

결론

CSS 도형 시작하기