CSS로 핀터레스트/피키캐스트 같은 리스트 구현하기

트렌디적인 리스트 디자인 혹은 UI를 꼽자면 핀터레스트를 뺄 수 없습니다.

한국 서비스로는 피키캐스트가 유명하죠!

아마 리스트에서 각각의 목록이 이미지가 중요한 리스트라면 단순한 2,3단 배열보다 훨씬 볼만합니다.

백번의 말보다 한번의 예제!

샘플 만들어봤어요.

아래 이미지 처럼 리스트 카드가 겹쳐서(?) 나오는 형식의 디자인 입니다.

이런 리스트는 자바스크립트로도 개발할 수 있고 CSS로도 개발할 수 있는데요.

저는 CSS로 할 수 있는 거면 CSS단에서 끝내자는 주의라서 CSS로 구현해보았습니다!

소스코드는 제 깃허브에 올렸습니다.

github : https://github.com/kkotkkio/pinterest-list

원본 출처 : https://opentutorials.org/course/2473/13712