Shapes/Box-value shapes

김동현·2026년 3월 21일

mdn 학습 번역 - CSS

목록 보기

150/190

안녕하세요! 프론트엔드 개발자 취업 준비에 한창이시군요. 만들고 계신 독후감 사이트나 웹 프로필 화면을 꾸밀 때, 텍스트가 이미지를 네모 반듯하게만 감싸는 게 지루하게 느껴진 적 있으신가요?

오늘 가져오신 문서는 바로 그럴 때 마법처럼 쓸 수 있는 shape-outside 속성과 CSS 박스 모델을 결합해 텍스트를 둥글게, 혹은 원하는 모양으로 흐르게 만드는 방법에 대한 문서입니다. 원본 문서의 모든 내용을 빠짐없이, 제 실무 팁과 함께 구어체로 알기 쉽게 번역해 드릴게요!

박스 값으로 도형 만들기 (Shapes from box values)

도형을 만드는 아주 직관적인 방법 중 하나는 CSS 박스 모델(CSS box model) 모듈의 값을 사용하는 것입니다. 이 문서에서는 이를 어떻게 활용하는지 설명합니다.

도형 값(shape value)으로 허용되는 <box-edge> 박스 값들은 다음과 같습니다:

content-box (콘텐츠 영역)
padding-box (패딩 영역)
border-box (테두리 영역)
margin-box (마진 영역)

여기에 border-radius 값들도 함께 지원됩니다. 즉, 요소에 둥근 테두리를 주고 그 도형의 모양을 따라 콘텐츠(텍스트 등)가 자연스럽게 흘러가도록(flow) 만들 수 있다는 뜻입니다.

💡 강사의 실무 팁 1
이 문서에서 말하는 기능의 핵심은 바로 shape-outside 속성입니다! 기본적으로 웹 요소는 전부 네모난 박스 형태라 텍스트가 네모 모양으로만 둘러싸지만, shape-outside와 박스 값, 그리고 border-radius를 결합하면 텍스트가 원형이나 타원형을 따라 예쁘게 흐르게 만들 수 있습니다. 독후감 사이트에서 책 표지를 원형으로 자르고 옆에 감상평이 둥글게 감싸도록 만들 때 아주 유용하겠죠?

CSS 박스 모델 (CSS box model)

위에서 나열한 값들은 CSS 박스 모델의 여러 부분에 해당합니다. CSS의 박스는 콘텐츠(content), 패딩(padding), 테두리(border), 마진(margin)으로 구성됩니다.

The Box Model consists of the margin, border, padding and content boxes.

도형(shapes)에 박스 값을 사용하면, 이 값들에 의해 정의된 경계선(edges)을 따라 콘텐츠가 감싸도록 만들 수 있습니다. 아래의 각 예제들에서는 콘텐츠가 어떻게 다르게 흐르는지 직접 눈으로 확인할 수 있도록, 패딩, 테두리, 마진이 모두 정의된 요소를 사용했습니다.

margin-box

margin-box는 바깥쪽 마진 경계선에 의해 정의되는 도형입니다. 만약 요소를 정의할 때 border-radius를 사용했다면 그 모서리의 둥근 반경까지 모두 포함하여 도형이 만들어집니다.

아래 예제에는 높이, 너비, 그리고 배경색이 있는 보라색 원형 아이템(<div>)이 있습니다. border-radius: 50%를 설정하여 원 모양을 만들었죠. 이 요소에는 마진(margin)이 적용되어 있기 때문에, 콘텐츠(텍스트)가 둥근 원의 모양과 그 바깥에 적용된 마진 영역을 따라 흐르는 것을 볼 수 있습니다.

HTML

<div class="box">
  <div class="shape"></div>
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney. Their names
    were Stephen and Joseph Montgolfier, they were papermakers by trade, and
    were noted as possessing thoughtful minds and a deep interest in all
    scientific knowledge and new discovery.
  </p>
</div>

CSS

body {
  font: 1.2em sans-serif;
}

.shape {
  background-color: rebeccapurple;
  height: 80px;
  width: 80px;
  padding: 20px;
  margin: 20px;
  border: 10px solid black;
  border-radius: 50%;
  float: left; /* 도형을 따라 텍스트가 흐르게 하려면 float가 필수입니다! */
  shape-outside: margin-box; /* 마진 영역을 기준으로 둥글게 텍스트가 흐릅니다 */
}

💡 강사의 실무 팁 2
shape-outside 속성이 제대로 동작하려면 해당 요소에 반드시 float: left 또는 float: right가 적용되어 있어야 합니다. 최신 레이아웃 기법인 Flexbox나 Grid에서는 float를 잘 안 쓰지만, 이렇게 텍스트가 이미지를 감싸며 흐르게 만드는(Wrapping) 타이포그래피 효과를 낼 때는 여전히 float와 shape-outside의 조합이 유일무이한 해결책이랍니다!

border-box

border-box 값은 바깥쪽 테두리(border) 경계선에 의해 정의되는 도형입니다. 이 도형은 테두리 바깥쪽에 대한 일반적인 border-radius 둥글기 규칙을 그대로 따릅니다. CSS border 속성을 지정하지 않았더라도 테두리 영역은 존재합니다. 테두리 두께가 0인 경우라면, 바깥쪽 패딩 경계선에 의해 정의되는 padding-box와 완벽히 동일한 도형이 됩니다.

아래 예제에서는 텍스트가 어떻게 테두리에 의해 생성된 선을 따라 흐르는지 확인할 수 있습니다. 테두리 두께(border size)를 변경해 보시면 콘텐츠도 그에 맞춰서 흐르는 위치가 바뀔 것입니다.

CSS

body {
  font: 1.2em sans-serif;
}
.box {
  width: 70%;
}

.shape {
  background-color: rebeccapurple;
  height: 80px;
  width: 80px;
  padding: 20px;
  margin: 20px;
  border: 10px solid black;
  border-radius: 50%;
  float: left;
  shape-outside: border-box; /* 이번엔 텍스트가 테두리 선에 바짝 붙어서 흐릅니다! */
}

padding-box

padding-box 값은 바깥쪽 패딩 경계선으로 둘러싸인 도형을 정의합니다. 이 도형은 테두리 안쪽(inside of the border)에 대한 일반적인 border-radius 규칙을 따릅니다. 만약 패딩(padding)을 아예 주지 않았다면 padding-box는 content-box와 동일해집니다.

CSS

body {
  font: 1.2em / 1.2 sans-serif;
}
.box {
  width: 70%;
}

.shape {
  background-color: rebeccapurple;
  height: 80px;
  width: 80px;
  padding: 20px;
  margin: 20px;
  border: 10px solid black;
  border-radius: 50%;
  float: left;
  shape-outside: padding-box; /* 텍스트가 테두리(border)를 무시하고 패딩 선 안쪽까지 파고듭니다! */
}

content-box

content-box 값은 바깥쪽 콘텐츠(content) 경계선으로 둘러싸인 도형을 정의합니다. 이 박스의 각 모서리 둥글기(corner radius)는 border-radius 값에서 border-width와 padding을 뺀 값, 또는 0 중에서 더 큰 값이 됩니다. 즉, 모서리 둥글기 값이 음수(negative value)가 되는 것은 불가능하다는 뜻입니다.

CSS

body {
  font: 1.2em / 1.2 sans-serif;
}
.box {
  width: 70%;
}

.shape {
  background-color: rebeccapurple;
  height: 80px;
  width: 80px;
  padding: 20px;
  margin: 20px;
  border: 10px solid black;
  border-radius: 50%;
  float: left;
  shape-outside: content-box; /* 텍스트가 패딩 영역까지 뚫고 들어와 콘텐츠 크기 바로 옆에 붙습니다! */
}

💡 강사의 부연 설명 3
위 4가지 box 값의 차이가 머릿속에 그려지시나요?
margin-box를 쓰면 요소와 텍스트 사이에 여백(마진)을 둥글게 남기며 예쁘게 배치할 수 있고, content-box를 쓰면 텍스트가 요소의 테두리(border)와 패딩 영역을 무시하고 깊숙이 파고들게 됩니다. 실무에서는 텍스트와의 여유 공간을 위해 margin-box를 가장 즐겨 쓴답니다!

박스 값을 사용해야 할 때 (When to use box values)

박스 값을 사용하는 것은 도형을 만드는 훌륭한 방법입니다. 하지만 이 방식은 당연하게도 border-radius 속성을 사용해 정의할 수 있는 매우 기본적인 도형(원, 타원, 둥근 사각형 등)에만 효과가 있습니다. 위에서 보여드린 예제들이 바로 그런 사용 사례입니다. border-radius를 사용해 둥근 원형을 만들고 그 주위로 텍스트를 감싸게 할 수 있죠.

단지 이 기본적인 기법만으로도 꽤 흥미로운 효과를 만들어낼 수 있습니다. 이 섹션의 마지막 예제에서는 두 개의 요소를 각각 왼쪽(float: left)과 오른쪽(float: right)으로 띄운 뒤, 텍스트와 가장 가까운 방향의 모서리에만 100%의 테두리 둥글기(border-radius)를 주었습니다.

HTML

<div class="box">
  <div class="shape-left"></div>
  <div class="shape-right"></div>
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney. Their names
    were Stephen and Joseph Montgrossier, they were papermakers by trade, and
    were noted as possessing thoughtful minds and a deep interest in all
    scientific knowledge and new discovery.
  </p>
</div>

CSS

body {
  font: 1.2em / 1.5 sans-serif;
}

.box {
  text-align: justify; /* 양쪽 정렬을 하면 둥근 텍스트 곡선이 더 예쁘게 보입니다 */
}

.shape-left,
.shape-right {
  height: 100px;
  width: 100px;
}

.shape-left {
  margin: 0 20px 20px 0;
  border-bottom-right-radius: 100%; /* 오른쪽 아래만 둥글게 */
  float: left;
  shape-outside: margin-box;
}
.shape-right {
  margin: 0 20px 20px;
  border-bottom-left-radius: 100%; /* 왼쪽 아래만 둥글게 */
  float: right;
  shape-outside: margin-box;
}