목록핀터레스트레이아웃 (1)

이진욱의코딩

(HTML,CSS)핀터레스트 스타일 레이아웃 만들기

이번 시간에는 앞서 배웠던 html과 css를 이용해서 핀터레스트 스타일의 레이아웃을 만들 겁니다. 핀터레스트 사이트에 접속하시면 이렇게 구조화가 되어있습니다. 이것을 masonry라고 하며 masonry는 벽돌을 쌓는 공사, 석조라는 의미를 가지고 있습니다. 사진 공유 서비스인 핀터레스트가 인기를 끈 이후에 핀터레스트와 같은 스타일의 레이아웃이 크게 인기를 끌었는데요. 이러한 모양의 레이아웃을 masonry 레이아웃이라고 합니다. 여기서는 masonry을 만드는 방법을 알아보겠습니다. change view로 코드들을 먼저 살펴보겠습니다. 여기 이 코드 들을 참조해서 만들어볼게요. 스파이더맨 배경화면 이렇게 여러 개를 만들고 나면 이렇게 일자로 쭉 나열되어 있습니다. 위의 핀터레스트 형태로 만들기 위해 ..
HTML 2019. 10. 3. 21:08
이전 Prev 1 Next 다음