[css] shape-outside

[모양에 맞춰 텍스트 배치하기]

 

- 모든 이미지 파일은 사각형이다. 동그랗게 자른 png 파일도 어쨌든 사각형임을 기억해야함.

- 이미지 바깥으로 아예 나가버리면 적용안됨

- img에 클래스 줘서 직접 걸어야함

 

 

shape-outside: 모양(크기 at 중심점좌표(위치)) 

float: left 등으로 일단 글씨가 달려들게해야함!

ex) circle(50px at 50% 50%); : 50px 크기에 해당 이미지의 x축 중앙, y축 중앙(50%)에 있는 정 원(%대신 px등 사용가능)

 

 

모양에 넣을 수 있는 것

: circle, ellipse(타원형, 수치 2개 필요), inset(이미지의 안에서, 수치 4개필요), polygon

 

 

이미지모양대로 흐르게

: 반드시 png여야함. 사방 투명은 안되고 텍스트가 채워질 부분만 투명이어야함

margin등이 먹지 않기 때문에 이미지 편집할때 미리 여백생각해서 해야함

채워질부분만 투명하게 편집 : 포토샵- 이미지불러오고 - 새 레이어를 만들고 이미지보다 아래쪽으로 내림

- 마퀴툴로 흰색으로 채울부분 선택- ctrl+Delete

 

ex) shape-outside: url('https~');