View My Stats

[웹.앱]CSS clip-path maker - 세상에는 천재가 참 많습니다.^^

엔게디
2019-07-28
조회수 3861

CSS로 레이아웃을 잡다보면 사선을 활용하는 디자인을 종종 사용하게 됩니다.

쉽게 하자면 이미지를 딱~ 넣으면 되지만...

반응형을 고려하거나, 코드 재사용, 디바이스의 화면 비율을 고려하자면.... 사선을 코드로 넣는것이 훨씬 좋습니다. 

가장 쉽게 생각할수 있는것이 보더의 속성을 이용하여 삼각형을 만드는 방법입니다. (이부분은 따로 포스팅할게요^^)

아니면 캔바스를 이용할수도 있습니다.

또는 -webkit-mask-image 를 활용하는 방법도 있습니다.

그러나.. 가장 깔끔한 방법은 clip-path 속성일듯 합니다. ^^


clip-path를 쉽게 구현할수 있는 코드를 여기서 한번 보세요.

정말~ 와우~ 감탄사가 터집니다. ^^

https://bennettfeely.com/clippy/

이 사이트를 가시면 [Clippy]항목을 만나실 수 있습니다.


요렇게 화면이 나오면 직관적으로 쭉쭉 움직여보세요^^ 아래 CSS 코드가 나옵니다. 와우~~~ 브라보~~~


물론 clip-path의 경우 브라우저의 미지원 버전도 확인해보아야 합니다.


이상... 수업준비를 하면서.. 사선 레이아웃을 구현하는 방법에 대한 정보 공유합니다. ^^


Bennett Feely, 이분.. 천재같아요^^

이분 지금.. 풀타임 잡을 구한다는데요? ㅎㅎㅎ

INSTAGRAM * engedicampus

INSTAGRAM engedicampus

웹퍼블리싱, 디자인, 일러스트, 디지털 아트워크, 쇼핑몰 등 다양한 정보와 알찬 소스 정보를 공유하며, 오픈되는 강의, 원데이 세미나 소식을 만나볼 수 있습니다.