css

Shape-outside

img{
	float:left;
    shape-outside:circle(50%);
}
<div>
    <img src=""/>
    <p>Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration fro</p>
</div>

이미지에 float을 주고 shape-outside로 요소의 테두리를 설정해주면, 자연스럽게 텍스트가 붙는다.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes

object-fit

img에 background-size 같은 속성을 준다.

img{
	object-fit:contain
}

contain : 이미지 요소가 img박스 크기에 맞춰지면서 원본의 비율을 유지한다. 컨테이너의 가로 세로 비율이 소스의 가로세로 비율과 다를 경우, 길이가 짧은 쪽을 기준으로 맞춘다.
cover : 이미지 요소가 img박스를 비율을 유지하면서 꽉 채운다. 박스의 가로세로 비율이 소스와 다를 경우, 길이가 긴쪽을 기준으로 맞춘다.
fill : 이미지요소를 img박스에 채운다. 단 소스의 비율을 유지 하지 않고, 박스의 비율로 변경된다.
scale-down : cover가 박스의 가로 세로중 긴 것을 기준으로 맞췄다면, scale-down은 짧은 것을 기준으로 소스를 맞춘다.
none : 사이즈를 변경하지 않는다.
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

blend

하나의 요소 안에서 두 개의 배경 이미지를 섞는다.

div{
	background:url(""),url("");
    background-blend-mode: normal
}

normal : 첫 번째 배경 이미지가 위로 옵니다.
multiply : 두 장의 이미지가 겹쳐지는 효과(색의 삼원색 효과
screen : 두 장의 이미지가 겹쳐지는 효과(빛의 삼원색 효과
등등..

backdrop-filter

배경을 흐리게 해주는 속성
배경 위 텍스트 박스에서 보이는 배경에 효과를 줄 수 있다.

.box{
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.3);
}