소개
masonry는 벽돌을 쌓는 공사, 석조라는 의미를 가지고 있습니다. 사진 공유 서비스인 핀터레스트가 인기를 끈 이후에 핀터레스트와 같은 스타일의 레이아웃이 크게 인기를 끌었는데요. 이러한 모양의 레이아웃을 masonry 레이아웃이라고 합니다. 여기서는 masonry을 만드는 방법을 알아보겠습니다.
사용기술
관련기술
예제
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | <!doctype html><html> <head> <style> #columns{ column-width:350px; column-gap: 15px; } #columns figure{ display: inline-block; border:1px solid rgba(0,0,0,0.2); margin:0; margin-bottom: 15px; padding:10px; box-shadow: 2px 2px 5px rgba(0,0,0,0.5);; } #columns figure img{ width:100%; } #columns figure figcaption{ border-top:1px solid rgba(0,0,0,0.2); padding:10px; margin-top:11px; } </style> </head> <body> <div id="columns"> <figure> <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/cinderella.jpg"> <figcaption>Cinderella wearing European fashion of the mid-1860’s</figcaption> </figure> <figure> <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/rapunzel.jpg"> <figcaption>Rapunzel, clothed in 1820’s period fashion</figcaption> </figure> <figure> <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/belle.jpg"> <figcaption>Belle, based on 1770’s French court fashion</figcaption> </figure> <figure> <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/mulan_2.jpg"> <figcaption>Mulan, based on the Ming Dynasty period</figcaption> </figure> <figure> <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/sleeping-beauty.jpg"> <figcaption>Sleeping Beauty, based on European fashions in 1485</figcaption> </figure> <figure> <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/pocahontas_2.jpg"> <figcaption>Pocahontas based on 17th century Powhatan costume</figcaption> </figure> <figure> <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/snow-white.jpg"> <figcaption>Snow White, based on 16th century German fashion</figcaption> </figure> <figure> <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/ariel.jpg"> <figcaption>Ariel wearing an evening gown of the 1890’s</figcaption> </figure> <figure> <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/tiana.jpg"> <figcaption>Tiana wearing the <i>robe de style</i> of the 1920’s</figcaption> </figure> </div> </body></html> |
