[CSS 스타일 샘플] 이미지 빈 공간에 글자 채우기 - shape-outside
이미지른 넣다 보면 float : left, float: right로는 해결이 안되는 경우가 생깁니다.
이렇게 공간이 애매하게 남을 때가 있어요.
이미지가 하나로 연결돼 있어 중간을 잘라 float을 쓸 수도 없는 이미지.
이렇게 텍스트가 들어가면 조금 더 깔끔하게 편집을 할 수 있습니다.
ㅓ처럼 여러 각도로 꺾인 이미지
이런 대각선 이미지도 애매하지요.
종이책에서는 전체 이미지인데 float으로 넣으면 작아보이고
그렇다고 center로 넣자니 빈 공간이 너무 많아 보기 좋지 않습니다.
이런 그림도 마찬가지지요.
오른쪽 부분만 잘라 float : right을 쓰고 싶지만 그림이 붙어 있어 자르기 어렵습니다.
이럴 때 쓸 수 있는 속성이 shape-outside예요.
shape-outside는 크롬 브라우저에서 사용하려면 webkit 속성을 추가해야합니다.
-webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%);
shape-outside: polygon(0 0, 100% 100%, 0 100%);
국내 전자책 뷰어는 대부분 webkit을 사용하니 두 코드를 같이 넣어줘야돼요.
shape-outside에 ploygon 속성을 적용하면 이렇게 편집할 수 있습니다.
△ 모양의 이미지
ㄱ, ㄴ 같은 이미지
shape-outside는 여러 속성이 있습니다.
삼각형, 별 등 다각형을 표현할 때 polygon
원형은 circle
타원형은 ellipse,
그리고 다각형 안쪽에 글자를 넣을 수도, 바깥 쪽에 넣을 수도 있습니다.
shape-outside에 대한 설명은 여기로
https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside
shape-outside를 적용한 스타일은 여기를 참고하세요.