CSS 도형 시작하기

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

Razvan Caliman
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() 도형 값의 그림

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

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

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

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

`circle()` 도형 + clip-path의 이미지

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

원 모양으로 돌아갑니다.

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

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

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

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

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

CSS 도형의 참조 상자

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

CSS 도형의 좌표계

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 참조 상자로 설정된 좌표계의 증가된 표면을 고려하여 원 반경의 계산된 값도 커집니다.

여백 유무와 관계없는 마진 박스 좌표계
선택할 수 있는 참조 상자 옵션에는 `margin-box`, `border-box`, `padding-box`, `content-box`가 있습니다. 이름은 경계를 나타냅니다. 이전에 `margin-box`를 설명했습니다. `border-box` 는 요소의 테두리 외부 가장자리에 의해 제약되고, `padding-box` 는 요소의 패딩에 의해 제약되며, `content-box` 는 요소 내 콘텐츠에서 사용하는 실제 노출 영역과 동일합니다.
모든 참조 상자의 그림

shape-outside 선언과 함께 특정 시점에 하나의 참조 상자만 사용할 수 있습니다. 각 참조 상자는 모양에 서로 다른 영향을 미치며 때로는 미묘한 영향을 미칩니다. CSS 도형의 참조 상자를 이해하는 데 도움이 되는 자세한 내용은 다른 도움말을 참고하세요.

ellipse() 함수

ellipse() 도형 값을 보여주는 그림

타원은 눌린 원처럼 보입니다. ellipse(rx ry at cx cy)로 정의되며, 여기서 rxry는 X축과 Y축의 타원의 반지름이고 cxcy는 타원의 중심 좌표입니다.

.element{
  shape-outside: ellipse(150px 300px at 50% 50%);
  width: 300px;
  height: 600px;
}

백분율 값은 좌표계의 크기에서 계산됩니다. 복잡한 수학은 필요하지 않습니다. 타원 중앙의 좌표는 생략할 수 있으며 좌표계의 중앙에서 추론됩니다.

X 및 Y 축의 반지름은 키워드로 정의할 수도 있습니다. farthest-side는 타원 중심과 가장 먼 참조 상자의 측면 사이의 거리와 같은 반지름을 산출하고 closest-side는 정확히 반대의 의미를 갖습니다. 즉, 중심과 측면 사이의 최단 거리를 사용합니다.

.element{
  shape-outside: ellipse(closest-side farthest-side at 50% 50%);
  /* identical to: */
  shape-outside: ellipse(150px 300px at 50% 50%);
  width: 300px;
  height: 600px;
}

이는 요소의 크기 (또는 참조 상자)가 예기치 않게 변경될 수 있지만 타원 도형이 적응하도록 하려는 경우에 유용할 수 있습니다.

동일한 farthest-sideclosest-side 키워드는 circle() 도형 함수의 반지름에도 사용할 수 있습니다.

polygon() 함수

polygon() 도형 값을 보여주는 그림

원과 타원이 너무 제한적이라고 생각되면 다각형 도형 함수를 사용해 다양한 옵션을 살펴보세요. 형식은 polygon(x1 y1, x2 y2, ...)이며 여기서 다각형의 각 꼭짓점 (점)에 대한 x, y 좌표 쌍을 지정합니다. 다각형을 지정하는 데 필요한 최소 쌍 수는 3개, 즉 삼각형입니다.

.element{
  shape-outside: polygon(0 0, 0 300px, 300px 600px);
  width: 300px;
  height: 600px;
}

꼭짓점이 좌표 시스템에 배치됩니다. 반응형 다각형의 경우 일부 또는 모든 좌표에 비율 값을 사용할 수 있습니다.

.element{
  /* polygon responsive to font-size*/
  shape-outside: polygon(0 0, 0 100%, 100% 100%);
  width: 20em;
  height: 40em;
}

SVG에서 가져온 선택적 fill-rule 매개변수가 있습니다. 이 매개변수는 자체 교차 경로 또는 폐쇄된 도형의 경우 브라우저에 다각형의 '내부'를 고려하는 방법을 지시합니다. Joni Trythall은 SVG에서 fill-rule 속성이 작동하는 방식을 아주 잘 설명합니다. 정의되지 않은 경우 fill-rule의 기본값은 nonzero입니다.

.element{
  shape-outside: polygon(0 0, 0 100%, 100% 100%);
  /* identical to: */
  shape-outside: polygon(nonzero, 0 0, 0 100%, 100% 100%);
}

inset() 함수

inset() 도형 함수를 사용하면 콘텐츠를 래핑할 직사각형 도형을 만들 수 있습니다. CSS 도형이 간단한 상자에서 웹 콘텐츠를 해방한다는 초기 전제를 고려할 때 이는 직관에 반하는 것처럼 들릴 수 있습니다. 맞을 수도 있습니다. 아직 플로트 및 마진이나 polygon()로 실행할 수 없는 inset()의 사용 사례를 찾지 못했습니다. 하지만 inset()polygon()보다 직사각형 도형을 더 읽기 쉽게 표현합니다.

inset 도형 함수의 전체 표기는 inset(top right bottom left border-radius)입니다. 처음 네 개의 위치 인수는 요소의 가장자리에서 안쪽으로의 오프셋입니다. 마지막 인수는 직사각형 도형의 테두리 반경입니다. 이 속성은 선택사항이므로 생략할 수 있습니다. CSS에서 이미 사용 중인 border-radius 축약 표기법을 따릅니다.

.element{
  shape-outside: inset(100px 100px 100px 100px);
  /* yields a rectangular shape which is 100px inset on all sides */
  float: left;
}

참조 상자에서 도형 만들기

shape-outside 속성에 도형 함수를 지정하지 않으면 브라우저가 요소의 참조 상자에서 도형을 파생하도록 허용할 수 있습니다. 기본 참조 상자는 margin-box입니다. 지금까지는 별다른 문제가 없습니다. 부동 소수점 수의 작동 방식이 그렇습니다. 하지만 이 기법을 적용하면 요소의 도형을 재사용할 수 있습니다. border-radius 속성을 살펴보겠습니다.

이를 사용하여 플로팅된 요소의 모서리를 둥글게 만들면 잘림 효과가 있지만 플로팅 영역은 직사각형으로 유지됩니다. shape-outside: border-box를 추가하여 border-radius로 생성된 윤곽선을 래핑합니다.

border-box 참조 상자를 사용하여 요소의 border-radius에서 도형 추출
.element{
  border-radius: 50%;
  shape-outside: border-box;
  float: left;
}

물론 모든 참조 상자를 이러한 방식으로 사용할 수 있습니다. 파생 도형의 또 다른 용도인 오프셋 풀커트도 있습니다.

content-box 참조 상자를 사용하여 오프셋 풀쿼트 만들기

float 및 margin 속성만 사용하여 오프셋 풀쿼트 효과를 얻을 수 있습니다. 하지만 이렇게 하려면 HTML 트리에서 따옴표 요소를 렌더링할 위치에 배치해야 합니다.

유연성을 추가하여 동일한 오프셋 풀커트 효과를 얻는 방법은 다음과 같습니다.

.pull-quote{
  shape-outside: content-box;
  margin-top: 200px;
  float: left;
}

도형의 좌표계에 대한 content-box 참조 상자를 명시적으로 설정합니다. 이 경우 풀쿼트의 콘텐츠 양에 따라 외부 콘텐츠가 래핑되는 도형이 정의됩니다. 여기서 margin-top 속성은 HTML 트리의 위치와 관계없이 풀쿼트의 위치를 지정 (오프셋)하는 데 사용됩니다.

도형 여백

도형을 중심으로 콘텐츠를 래핑하면 콘텐츠가 요소에 너무 밀착될 수 있습니다. shape-margin 속성을 사용하여 도형 주위에 간격을 추가할 수 있습니다.

.element{
  shape-outside: circle(40%);
  shape-margin: 1em;
  float: left;
}

효과는 일반 margin 속성을 사용할 때와 비슷하지만 shape-marginshape-outside 값 주변의 공간에만 영향을 미칩니다. 좌표 시스템에 여유 공간이 있는 경우에만 도형 주위에 간격이 추가됩니다. 그렇기 때문에 위 예에서는 원 반지름이 50%가 아닌 40%로 설정됩니다. 반지름을 50%로 설정하면 원이 좌표계의 모든 공간을 차지하여 shape-margin의 효과를 적용할 여지가 없게 됩니다. 도형은 궁극적으로 요소의 margin-box (요소와 주변 margin)로 제한됩니다. 도형이 더 크고 오버플로되면 margin-box로 잘려 직사각형 도형이 됩니다.

shape-margin는 단일 양수 값만 허용한다는 점에 유의해야 합니다. 긴 수식 표기가 없습니다. 원 shape-margin-top은 무엇인가요?

도형에 애니메이션 적용

CSS 도형을 전환, 애니메이션과 같은 다른 많은 CSS 기능과 혼합할 수 있습니다. 하지만 사용자가 읽는 동안 텍스트 레이아웃이 변경되면 매우 불편해한다는 점을 강조해야 합니다. 도형 애니메이션을 사용하기로 결정한 경우 환경에 세심한 주의를 기울이세요.

브라우저에서 보간할 수 있는 값으로 정의된 경우 circle()ellipse() 도형의 반지름과 중심을 애니메이션할 수 있습니다. circle(30%)에서 circle(50%)로 이동할 수 있습니다. 하지만 circle(closest-side)에서 circle(farthest-side)로 애니메이션을 적용하면 브라우저가 제한됩니다.

.element{
  shape-outside: circle(30%);
  transition: shape-outside 1s;
  float: left;
}

.element:hover{
  shape-outside: circle(50%);
}
원 모양 애니메이션 GIF

polygon() 도형을 애니메이션하면 더 흥미로운 효과를 얻을 수 있습니다. 단, 다각형의 두 애니메이션 상태 간에 정점 수가 동일해야 합니다. 정점을 추가하거나 삭제하면 브라우저에서 보간할 수 없습니다.

한 가지 방법은 필요한 최대 개수의 정점을 추가하고 도형의 인식된 가장자리가 더 적어지는 애니메이션 상태에서 정점을 함께 모아 배치하는 것입니다.

.element{
  /* four vertices (looks like rectangle) */
  shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: shape-outside 1s;
}

.element:hover{
  /* four vertices, but second and third overlap (looks like triangle) */
  shape-outside: polygon(0 0, 100% 50%, 100% 50%, 0 100%);
}
애니메이션 삼각형 GIF

도형 내부에서 콘텐츠 래핑

CSS 도형을 사용하여 콘텐츠를 래핑하는 이상한 나라의 앨리스 데모의 스크린샷

CSS 도형 사양의 초안에는 도형 내부에서 콘텐츠를 래핑할 수 있는 shape-inside 속성이 포함되어 있었습니다. 한동안 Chrome과 Webkit에 구현도 있었습니다. 하지만 임의로 배치된 콘텐츠를 맞춤 경로 내에 래핑하려면 가능한 모든 시나리오를 다루고 버그를 방지하기 위해 훨씬 더 많은 노력과 연구가 필요합니다. 따라서 shape-inside 속성이 CSS 도형 수준 2로 연기되었으며 구현이 철회되었습니다.

하지만 약간의 노력과 타협을 통해 맞춤 도형 내부에서 콘텐츠를 래핑하는 효과를 얻을 수 있습니다. 해킹은 shape-outside와 함께 플로팅된 두 요소를 사용하여 컨테이너의 반대쪽에 배치하는 것입니다. 단점은 의미론적 의미는 없지만 내부에 도형의 환상을 만드는 스트럿 역할을 하는 빈 요소를 하나 또는 두 개 사용해야 한다는 점입니다.

<div>
  <div class='left-shape'></div>
  <div class='right-shape'></div>

  Lorem ipsum...
</div>

컨테이너 상단의 .left-shape.right-shape 스트럿 요소의 위치는 콘텐츠를 양옆으로 배치하기 위해 왼쪽과 오른쪽으로 플로팅되므로 중요합니다.

.left-shape{
  shape-outside: polygon(0 0, ...);
  float: left;
  width: 50%;
  height: 100%;
}

.right-shape{
  shape-outside: polygon(50% 0, ...);
  float: right;
  width: 50%;
  height: 100%;
}
Alice 데모의 shape-inside 해결 방법을 보여주는 그림

이 스타일링을 사용하면 두 개의 플로팅 스트럿이 요소 내의 모든 공간을 차지하지만 shape-outside 속성은 나머지 콘텐츠를 위한 공간을 확보합니다.

브라우저에서 CSS 도형을 지원하지 않으면 모든 콘텐츠가 아래로 밀려나서 보기 좋지 않은 효과가 발생합니다. 따라서 점진적으로 개선된 방식으로 이 기능을 사용하는 것이 중요합니다.

앞의 도형 애니메이션 예시에서 텍스트가 움직이는 것이 불편할 수 있습니다. 모든 사용 사례에 애니메이션이 적용된 도형이 필요한 것은 아닙니다. 하지만 CSS 도형과 상호작용하는 다른 속성에 애니메이션을 적용하여 적절한 위치에 효과를 추가할 수 있습니다.

CSS 도형의 이상한 나라의 앨리스 데모에서는 스크롤 위치를 사용하여 콘텐츠의 상단 여백을 변경했습니다. 텍스트가 두 플로팅 요소 사이에 끼어 있습니다. 아래로 이동할 때 두 플로팅 요소의 shape-outside에 따라 레이아웃을 다시 설정해야 합니다. 이렇게 하면 텍스트가 깊은 곳으로 들어가는 것 같은 느낌을 주고 스토리텔링 경험을 향상시킵니다. 선정적이지 않은가요? 아마도요. 하지만 멋있어 보이긴 합니다.

텍스트 레이아웃은 브라우저에서 기본적으로 실행되므로 JavaScript 솔루션을 사용하는 것보다 성능이 우수합니다. 하지만 스크롤 시 margin-top을 변경하면 많은 재구성 및 페인트 이벤트가 트리거되므로 성능이 눈에 띄게 저하될 수 있습니다. 주의해서 사용하세요. 그러나 CSS 도형을 애니메이션 처리하지 않고 사용해도 성능 저하가 감지되지 않습니다.

점진적 개선

먼저 브라우저에 CSS 도형 지원이 없다고 가정하고 기능을 감지하면 이를 기반으로 빌드합니다. Modernizr는 기능 감지를 수행하는 데 적합한 솔루션이며 '비핵심 감지' 섹션에 CSS 도형 테스트가 있습니다.

일부 브라우저는 외부 라이브러리가 필요하지 않은 @supports 규칙을 통해 CSS에서 기능 감지를 제공합니다. CSS 도형도 지원하는 Google Chrome은 @supports 규칙을 이해합니다. 다음과 같은 기능을 점진적으로 개선하는 데 이를 사용할 수 있습니다.

.element{
  /* styles for all browsers */
}

@supports (shape-outside: circle(50%)){
  /* styles only for browsers which support CSS Shapes */
  .element{
    shape-outside: circle(50%);
  }
}

Lea VerouCSS @supports 규칙을 사용하는 방법에 대해 자세히 설명했습니다.

CSS 제외의 모호성 제거

오늘날 CSS 도형이라고 하는 것은 사양 초기에 CSS 제외 및 도형이라고 불렸습니다. 이름 지정의 전환은 미묘한 차이로 보일 수 있지만 실제로는 매우 중요합니다. 이제 별도의 사양인 CSS 제외를 사용하면 플로트 속성 없이 임의로 배치된 요소를 중심으로 콘텐츠를 래핑할 수 있습니다. 절대 위치 지정된 요소를 중심으로 콘텐츠를 래핑한다고 가정해 보겠습니다. 이는 CSS 제외의 사용 사례입니다. CSS 도형은 콘텐츠가 래핑되는 경로만 정의합니다.

따라서 도형과 제외는 동일한 것이 아니지만 서로 보완적입니다. 현재 CSS 도형은 브라우저에서 사용할 수 있지만 CSS 제외는 아직 도형 상호작용으로 구현되지 않았습니다.

CSS 도형을 사용하는 도구

기존 이미지 제작 도구에서 경로를 만들 수 있지만 이 글을 작성하는 시점에서는 CSS 도형 값에 필요한 문법을 내보내는 도구가 없습니다. 그렇게 한다고 해도 그렇게 일하는 것은 실용적이지 않습니다.

CSS 도형은 페이지의 다른 요소에 반응하는 브라우저에서 사용하도록 설계되었습니다. 도형을 수정할 때 도형을 둘러싼 콘텐츠에 미치는 영향을 시각화하는 데 매우 유용합니다. 이 워크플로를 지원하는 몇 가지 도구가 있습니다.

Brackets: Brackets용 CSS 도형 편집기 확장 프로그램은 코드 편집기의 실시간 미리보기 모드를 사용하여 도형 값을 수정하기 위한 대화형 편집기를 오버레이합니다.

Chrome: Chrome용 CSS 도형 편집기 확장 프로그램은 도형을 만들고 수정하는 컨트롤을 사용하여 브라우저의 개발자 도구를 확장합니다. 선택한 요소 위에 대화형 편집기를 배치합니다.

Google Chrome의 검사기에는 도형 강조 표시가 기본적으로 지원됩니다. shape-outside 속성이 있는 요소 위로 마우스를 가져가면 요소가 밝게 표시되어 도형을 보여줍니다.

이미지의 도형: 이미지를 생성하고 브라우저에서 이미지에서 도형을 추출하도록 하려면 Rebecca Hauck이 작성한 Photoshop 튜토리얼을 참고하세요.

다양한 구현: Chrome은 CSS 도형을 제공하는 최초의 주요 브라우저입니다. Apple의 iOS 8 및 Safari 8에서 이 기능이 곧 지원될 예정입니다. 다른 브라우저 공급업체는 향후 이를 고려할 수 있습니다. 그때까지는 기본 지원을 제공하는 CSS 도형 폴리필이 있습니다.

결론

콘텐츠가 대부분 단순한 상자에 갇혀 있는 웹에서 CSS 도형은 표현력이 뛰어난 레이아웃을 만들어 웹과 인쇄 디자인 간의 충실도 격차를 해소하는 방법을 제공합니다. 물론 도형을 악용하여 방해가 될 수도 있습니다. 하지만 센스와 좋은 판단력을 발휘하여 적용하면 도형을 통해 콘텐츠를 효과적으로 표현하고 사용자의 관심을 고유한 방식으로 집중시킬 수 있습니다.

직사각형이 아닌 레이아웃의 흥미로운 사용 사례를 보여주는 다른 아티스트의 작품 모음을 소개합니다. 대부분 인쇄물입니다. CSS 도형을 사용해 보고 새로운 디자인 아이디어를 실험해 보시기 바랍니다.

이 도움말을 검토하고 유용한 정보를 제공해 주신 펄 첸, 앨런 스턴스, 졸탄 호르바스님께 감사드립니다.