소개
masonry는 벽돌을 쌓는 공사, 석조라는 의미를 가지고 있습니다. 사진 공유 서비스인 핀터레스트가 인기를 끈 이후에 핀터레스트와 같은 스타일의 레이아웃이 크게 인기를 끌었는데요. 이러한 모양의 레이아웃을 masonry 레이아웃이라고 합니다. 여기서는 masonry을 만드는 방법을 알아보겠습니다.
사용기술
관련기술
예제
<!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>
