[CSS] 텍스트가 이미지를 감싸게 해보자!

👀 이번 시간에는 shape-outside, shape-margin, margin을 이용해 글자가 이미지 모양에 따라 배치되도록 해보자!

1. 미리보기

See the Pen word wrap image by KumJungMin (@kumjungmin) on CodePen.

2. 자세히 알아보기

1) html

• html 구조는 단순한데, 제목, 내용, 그리고 2개의 이미지만 배치하면 된다.

<section class="wrapper">
  <h2>Wrap Text Around Images</h2>        <!--제목-->
  <img src="..." class="image raccoon"/>  <!--이미지1-->
  <img src="..." class="image dog" />     <!--이미지2-->
  <p class="content"> ... </p>            <!--내용-->
</section>

2) (CSS) 기본 스타일 지정하기

🙂 기본 스타일은 본문의 핵심은 아니므로, 본론으로 넘어가고 싶다면 3) 이미지 설정하기를 보자

• body의 margin, padding을 0으로 초기화하고 배경색을 지정한다.

body {
  margin: 0;
  padding: 0;
  background: #111;
}

• 이미지와 제목, 내용을 감싸는 부모(wrapper)의 너비, 높이를 지정한다.
• 내용 (content)의 줄바꿈을 공백이 아닌 음절로 변경한다. (word-break: break-all)

.wrapper {
  position: relative;
  width: 100%;
  max-width: 800px;
  min-height: 100vh;
  padding: 50px;
  color: #fff;
}
.wrapper .content {
  word-break: break-all;  /* 줄바꿈을 음절로 변경 */
}

3) (CSS) 이미지 설정하기

💡 글자가 이미지 모양대로 배치되려면, shape-outside, shape-margin, margin 속성이 중요하다 단계별로 알아보자

(1) shape-outside, 이미지 모양대로 둘러싸이게 하기

• shape-outside은 인접한 인라인 콘텐츠가 둘러싸일 때, 사각형 외의 모양으로 둘러싸일 수 있게 지정한다.
• 단 요소(둘러싸일 대상)는 반드시 float 속성을 가져야한다.
• 예시처럼 글자가 이미지 모양대로 둘러싸려면, shape-outside: url(이미지)로 지정해야 한다.

.image.raccoon {
  width: 200px;
  shape-outside: url(너구리아이콘_이미지주소); /* 이미지 모양대로 글자가 둘러싸게 */
  float: left;                           /* shape-outside지정시, 필수 지정 */
}
.image.dog {
  width: 200px;
  shape-outside: url(강아지아이콘_이미지주소); /* 이미지 모양대로 글자가 둘러싸게 */
  float: right;                          /* shape-outside지정시, 필수 지정 */
  margin-top: 150px;
}

(2) shape-margin, 간격 조절하기

• shape-margin을 이용해, shape-outside를 지정한 요소와의 간격을 지정할 수 있다.

.image.raccoon {
  width: 200px;
  shape-outside: url(너구리아이콘_이미지주소); 
  float: left;        
  shape-margin: 10px;    /* this! */               
}
.image.dog {
  width: 200px;
  shape-outside: url(강아지아이콘_이미지주소); 
  float: right;                       
  margin-top: 150px;
  shape-margin: 10px;    /* this! */        
}

💡 그런데, 저 빨간 부분은 외곽선이 이미지 모양이 아닌 네모로 변경됐을까?

• 그 이유는 shape-margin은 기본 외곽선 범위를 넘을 수 없기 때문이다.
• 빨간색 박스는 이미지 요소의 기본 외곽선 범위이다.
• shape-margin은 네모 박스 영역을 넘을 수 없으며, 그렇기 때문에 각이 지는 현상이 발생한다.

See the Pen shape-margin demo by KumJungMin (@kumjungmin) on CodePen.

이 경우, 요소 자체에 margin을 주면 해결된다.

.image.raccoon {
  width: 200px;
  shape-outside: url(너구리아이콘_이미지주소); 
  float: left;       
  shape-margin: 10px;  
  margin: 10px;             /* this! */             
}
.image.dog {
  width: 200px;
  shape-outside: url(강아지아이콘_이미지주소); 
  float: right;                       
  margin-top: 150px;
  shape-margin: 10px;       
  margin: 150px 10px 10px;  /* this! */    
}