[CSS 스타일 샘플] 이미지 빈 공간에 글자 채우기 - shape-outside

카테고리 없음 2020. 11. 10. 09:20

이미지른 넣다 보면 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를 적용한 스타일은 여기를 참고하세요.

https://www.epubguide.net/215

 

https://www.epubguide.net/207

 

 

설정

트랙백

댓글