shape-outside 속성

shape-outside 속성을 사용하면 부유 요소에 대한 비표준 흐름 형태를 정의할 수 있습니다. 인접한 요소는 직사각형 컨테이너가 아닌 정의된 형태 주위로 흐르게 됩니다.

구문

선택자 {
	shape-outside: 값;
}

값

값	설명
`circle()`	원형 흐름 형태
`ellipse()`	타원형 흐름 형태
`polygon()`	임의의 다각형 형태
`url()`	이미지의 알파 채널을 기반으로 한 형태
`margin-box`	margin 경계 사용 (기본값)

예시

부유 요소에 원형 흐름 형태를 만들어 보겠습니다. shape-outside 속성과 clip-path 속성을 사용합니다:

<div class="shape"></div>
<p>
	some long text
</p>

.shape {
	width: 150px;
	height: 150px;
	float: left;
	shape-outside: circle(50%);
	clip-path: circle(50%);
	background: #3498db;
}

p {
	width: 500px;
	text-align: justify;
}

예시

shape-margin 속성을 통해 여백을 설정합니다:

<div class="shape"></div>
<p>
	some long text
</p>

.shape {
	width: 150px;
	height: 150px;
	float: left;
	shape-outside: circle(50%);
	shape-margin: 10px;
	clip-path: circle(50%);
	background: #3498db;
}

p {
	width: 500px;
	text-align: justify;
}

예시

clip-path 속성 없이도 텍스트는 원 주위로 흐르지만 요소 자체는 원형 모양을 갖지 않습니다:

<div class="shape"></div>
<p>
	some long text
</p>

.shape {
	width: 150px;
	height: 150px;
	float: left;
	shape-outside: circle(50%);
	background: #3498db;
}

p {
	width: 500px;
	text-align: justify;
}

예시

다른 형태의 요소:

<div class="shape"></div>
<p>
	some long text
</p>

.shape {
	width: 200px;
	height: 200px;
	background-color: #4CAF50;
	float: left;
	shape-outside: polygon(0% 0%, 100% 50%, 0% 100%);
	clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
	margin-right: 20px;
	margin-bottom: 20px;
}

p {
	width: 500px;
	text-align: justify;
}

예시

다른 형태의 요소:

<div class="shape"></div>
<p>
	some long text
</p>

.shape {
	width: 200px;
	height: 200px;
	background-color: #4CAF50;
	float: left;
	shape-outside: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	margin-right: 20px;
	margin-bottom: 20px;
}

p {
	width: 500px;
	text-align: justify;
}

함께 보기

요소의 가시적 형태를 생성하는 속성,
clip-path
shape-outside 작동에 필요한 속성,
float
형태 주위에 여백을 추가하는 속성,
shape-margin