CSS - Shapes: A Beginner's Guide to Shaping Content Flow

안녕하세요, 웹 디자인을 꿈꾸는 분들께! 오늘 우리는 CSS shapes의 흥미로운 세상으로 뛰어들어 볼 거예요. 여러분의 친절한 이웃 컴퓨터 선생님이자 저는 이 여정을 단계별로 안내해드릴 거예요. 걱정하지 마세요, 코드를 한 줄도 적어본 적이 없어도 괜찮아요 - 우리는 가장 기본적인 것부터 시작해서 차근차근 올라갈 거예요. 그러니 커피 한 잔 (또는 여러분이 좋아하는 차 한 잔)을 챙기고, 시작해보세요!

CSS - Shapes

What are CSS Shapes?

먼저 CSS shapes에 대해 이해해보겠습니다. 방에 가구를 배치하는 상상해보세요. 모든 것이 완벽한 사각형이 되고 싶지 않을 거예요, 아닙니까? 여기서 CSS shapes가 등장합니다 - 그들은 텍스트가 흐를 수 있는 영역을 정의하여 흥미로운 레이아웃을 만들어줍니다.

The shape-outside Property

CSS shapes의 핵심은 shape-outside 프로퍼티입니다. 이 마법의 프로퍼티는 텍스트가 둘러 흐를形状을 정의할 수 있게 해줍니다. 텍스트에게 "이在这儿에 무형의形状이 있어. 그것에 부딪히지 마!"라고 말하는 것과 같습니다.

Syntax

shape-outside의 기본 문법은 매우 간단합니다:

.element {
shape-outside: value;
}

이렇게 간단하지만, 다양한 값을 시작하면서 진짜 재미가 시작됩니다!

Possible Values for shape-outside

이제 만들 수 있는 다양한 shapes를 살펴보겠습니다. 유용한 표를 준비해 두었습니다:

Value	Description
margin-box	요소의 margin box를 shape로 사용
content-box	요소의 content box를 shape로 사용
padding-box	요소의 padding box를 shape로 사용
border-box	요소의 border box를 shape로 사용
circle()	원形状을 만듭니다
ellipse()	타원形状을 만듭니다
url()	이미지를 사용하여 shape를 정의
polygon()	다각형 shape를 만듭니다
inset()	내테두리 사각형을 만듭니다
path()	SVG 경로를 사용하여 shape를 정의
linear-gradient()	선형 그라디언트를 사용하여 shape를 정의

와우, 그리 긴 목록이네요! 걱정하지 마세요, 모두 예제와 함께 하나씩 살펴보겠습니다.

Applies to

들어가기 전에, shape-outside는浮动된 요소에만 적용된다는 것을 기억하세요. 그러므로 요소에 float 프로퍼티를 설정해 두세요!

Let's Shape It Up!

CSS shape-outside - margin-box

.shape {
float: left;
width: 100px;
height: 100px;
background: red;
shape-outside: margin-box;
margin: 20px;
}

이 예제에서 텍스트는 우리의 빨간 정사각형의 margin box 주위로 흐릅니다. 텍스트가 shape에 약간의 개인 공간을 주는 것 같아요!

CSS shape-outside - content-box

.shape {
float: left;
width: 100px;
height: 100px;
background: blue;
shape-outside: content-box;
padding: 20px;
}

여기서 텍스트는 content box를紧抱하고, padding을 무시합니다. 텍스트가 shape과 가까이 다가가고 싶을 때 완벽합니다!

CSS shape-outside - padding-box

.shape {
float: left;
width: 100px;
height: 100px;
background: green;
shape-outside: padding-box;
padding: 20px;
}

padding-box의 경우, 텍스트는 padding을 존중하지만 border는 무시합니다. 예의를 지키는 손님처럼, 너무 많이 침범하지 않고자 하는 것 같아요!

CSS shape-outside - border-box

.shape {
float: left;
width: 100px;
height: 100px;
background: yellow;
shape-outside: border-box;
border: 20px solid black;
}

border-box 값은 border를 shape에 포함시킵니다. 텍스트가 요소 전체, border 포함하여 흐르고 싶을 때 좋습니다.

CSS shape-outside - circle()

.shape {
float: left;
width: 100px;
height: 100px;
background: purple;
shape-outside: circle(50%);
border-radius: 50%;
}

이렇게 하면 텍스트가 완벽한 원 주위로 흐릅니다. 레이아웃에 원을 추가하는 것 같아요!

CSS shape-outside - ellipse()

.shape {
float: left;
width: 150px;
height: 100px;
background: orange;
shape-outside: ellipse(40% 50%);
border-radius: 50%;
}

ellipse()를 사용하면 타원形状을 만들 수 있습니다. 디자인에 약간의 타원 모양을 추가하고 싶을 때 완벽합니다!

CSS shape-outside - url()

.shape {
float: left;
width: 200px;
height: 200px;
shape-outside: url('star.png');
background: url('star.png') no-repeat;
background-size: contain;
}

이렇게 하면 이미지를 사용하여 shape를 정의할 수 있습니다. 텍스트가 흐를 곳에 투명한 부분이 있어야 합니다!

CSS shape-outside - polygon()

.shape {
float: left;
width: 200px;
height: 200px;
shape-outside: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
background: pink;
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

polygon()를 사용하면 원하는 shape를 만들 수 있습니다. 이 예제에서는 별 모양을 만들었습니다. 도형 마법사처럼 느껴집니다!

CSS shape-outside - inset()

.shape {
float: left;
width: 200px;
height: 200px;
shape-outside: inset(20px 30px 40px 10px round 10px);
background: lightblue;
clip-path: inset(20px 30px 40px 10px round 10px);
}

inset()을 사용하면 둥근 모서리를 가진 사각형을 만들 수 있습니다. 대화 상자나 커스텀 버튼을 만드는 데 적합합니다.

CSS shape-outside - path()

.shape {
float: left;
width: 200px;
height: 200px;
shape-outside: path('M 0,0 C 50,0 50,100 100,100 L 100,0 Z');
background: lightgreen;
clip-path: path('M 0,0 C 50,0 50,100 100,100 L 100,0 Z');
}

path() 함수는 SVG 경로 데이터를 사용하여 복잡한 shape를 만들 수 있습니다. 디지털 예술가처럼 느껴집니다!

CSS shape-outside - linear-gradient()

.shape {
float: left;
width: 200px;
height: 200px;
shape-outside: linear-gradient(45deg, transparent 50%, black 50%);
background: linear-gradient(45deg, transparent 50%, black 50%);
}

이 트릭은 그라디언트를 사용하여 대각선 shape를 만듭니다. 디자인에 각도를 추가하는 좋은 방법입니다!

CSS shape-outside - Related Properties

shape-outside를 최대한 활용하기 위해 자주 사용하는 관련 프로퍼티가 있습니다:

shape-image-threshold: 이미지에서 shape를 추출하기 위한 알파 채널 임계값을 정의합니다.
shape-margin: shape에 마진을 추가합니다.

다음은 빠른 예제입니다:

.shape {
float: left;
width: 200px;
height: 200px;
shape-outside: url('star.png');
shape-image-threshold: 0.5;
shape-margin: 20px;
background: url('star.png') no-repeat;
background-size: contain;
}

이 코드는 이미지에서 별 모양을 추출하고, 임계값을 0.5로 설정하고, shape 주위에 20px의 마진을 추가합니다.

Wrapping Up

그렇게 해서 여러분! 우리는 CSS shapes의 세계를 여행했고, 간단한 상자에서 복잡한 경로까지 다양한 shape를 만들었습니다. CSS shapes의 핵심은 실험입니다. 다양한 값을 사용하여 어떤 일이 일어나는지 보고 싶어요.

마무리하면서, 한 학생이 저에게 말한 것을 떠올립니다. "CSS shapes는 마법처럼 보인다 - 불가능한 것을 가능하게 만든다!" 그녀는 정말로 옳았습니다. CSS shapes를 사용하면 지루한 상자형 레이아웃을 예술 작품으로 변환할 수 있습니다.

그러므로 웹 디자인을 꾸미고! 그리고 CSS의 세계에서는 실수가 없고, 오직 행복한 작은 사고들이 있을 뿐입니다 (Bob Ross가 말했던 것처럼). 행복하게 코딩하세요!

Credits: Image by storyset