이미지 윤곽선 주위에 텍스트를 감싸는 방법

오늘 우리는 정사각형, 직사각형 또는 원형 이미지 대신 비전통적인 이미지 윤곽선 주위에 텍스트를 감싸는 방법을 배웁니다. Chadwick Boseman(R.I.P.)을 기리기 위해 Black Panther를 사용할 것입니다.

이미지와 텍스트로 시작하겠습니다. 이미지가 png인지 확인하십시오.

/*The image can be a link or a file*/
<img class="photo" src="https://image-link.png"/>
<div>
  <!-- Add as many paragraphs as you want -->
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

지금까지는 이렇게 보일 것입니다.



다음으로 이미지 옆에 있는 단어를 이동해 보겠습니다. css에서 우리는 float를 추가할 것입니다. 이미지의 클래스 이름은 "photo"입니다.

.photo{
  float: left;
}

이제 우리는 아직 들어보지 못한 CSS 스타일을 추가할 것입니다.

첫 번째는 shape-outside 입니다. Shape-outside는 일반적인 텍스트 줄 바꿈을 사용자 지정하는 방법을 제공하여 단순한 상자나 원이 아닌 복잡한 개체 주위에 텍스트를 줄 바꿈할 수 있습니다. 이 속성은 부동 요소에서만 작동합니다.

shape-outside에 가능한 값은 다음과 같습니다.

circle() : 원형 모양을 만들기 위한 것입니다.

ellipse() : 타원형 모양을 만드는 데 사용됩니다.

inset() : 직사각형 모양을 만들기 위한 것입니다.

polygon() : 정점이 3개 이상인 모양을 만드는 데 사용됩니다.

url() : 텍스트를 감싸는 데 사용할 이미지를 식별합니다.

initial : 플로트 영역이 영향을 받지 않습니다.

inherit : 부모로부터 shape-outside 값을 상속받습니다.

우리는 URL을 사용할 것입니다. 플로트 스타일 아래에 이것을 추가하십시오.

.photo{
  float: left;
  shape-outside: url("https://image-link.png");
}

이제 CSS가 마법이라고 말하는 것이 아닙니다. 하지만 CSS는 확실히 마법일 수 있습니다. 벌써 더 좋아 보인다! 😉

다음으로 shape-image-threshold 라는 항목을 추가하겠습니다. 항상 필요한 것은 아니지만(내 이미지의 경우에는 필요하지 않음) 알아두는 것이 좋습니다. 그래서 보여드릴께요!

주로 그래디언트 이미지나 그림자가 있는 이미지에 사용되며 "이것은 단어가 커버할 그래디언트의 양입니다."라고 말합니다. 내 이미지에는 필요하지 않으므로 여기에 예가 있습니다.



상단 이미지의 임계값은 0이고 두 번째 이미지의 임계값은 0.3입니다.

가능한 범위는 불투명도 측정과 동일하게 0에서 1까지입니다.

내 이미지의 경우 1을 입력하면 이미지의 가장자리를 약간만 감싸거나 완전히 덮습니다. 내 이미지에 없는 그림자나 그라데이션을 찾고 있습니다. 이제 Black Panther를 약간 안아주고 모양 임계값을 추가해 보겠습니다. 필요에 따라 조정하십시오.

.photo{
  float: left;
  shape-outside: url("https://image-link.png");
  shape-image-threshold: 0.9;
}

보시다시피 그라데이션이 적용되지 않은 제 이미지는 전혀 변경된 것이 없습니다.

이제 여백을 추가하여 Black Panther에게 숨을 쉴 수 있는 여지를 줍시다. 그러나 우리는 shape-whatever를 사용하고 있기 때문에 마진만 사용할 수는 없습니다. shape-margin를 사용해야 합니다.

.photo{
  float: left;
  shape-outside: url("https://image-link.png");
  shape-image-threshold: 0.9;
  shape-margin: 2%;
}

그게 훨씬 낫다!

이제 이미지 주위에 맞춤 텍스트 랩을 만들었습니다.

보기 좋게 만들기 위해 div에 몇 가지 스타일을 추가할 수 있습니다.

div{
  width: 90%;
  margin: 0 auto;
  padding: 0 1%;
  font-family: Arial;
  text-align: justify;
  color: silver;
  background-color: black;
  border: 10px purple solid;
  border-radius: 10px;
}
.photo{
  float: left;
  shape-outside: url("https://image-link.png");
  shape-image-threshold: 0.9;
  shape-margin: 2%;
}

오늘 우리는 shape-outside , shape-image-threshold 및 shape-margin 에 대해 알아보았습니다.

이것이 누군가가 더 나은 개발자가 되는 데 한 걸음 더 가까워지는 데 도움이 되었기를 바랍니다.