이런거 만들 수 있음
https://opentutorials.org/course/2473/13712
핀터레스트 스타일 레이아웃 만들기 (masonry) - 생활코딩
소개 masonry는 벽돌을 쌓는 공사, 석조라는 의미를 가지고 있습니다. 사진 공유 서비스인 핀터레스트가 인기를 끈 이후에 핀터레스트와 같은 스타일의 레이아웃이 크게 인기를 끌었는데요. 이러한 모양의 레이아웃을 masonry 레이아웃이라고 합니다. 여기서는 masonry을 만드는 방법을 알아보겠습니다. 사용기술 관련기술 예제 #columns{ column-width:350px; column-gap: 15px; } #columns figure{ disp
opentutorials.org
코드
<!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>
결과
'■ HTML > 화면단 구상 이쁘게★' 카테고리의 다른 글
| [HTML] 랜덤하게 이미지 나오게 하는거 (0) | 2020.07.24 |
|---|---|
| [HTML] 게시글 만들 때 사용(CKEditor) (0) | 2020.07.24 |
| [HTML] google fonts (폰트 바꾸기) (0) | 2020.07.24 |
| [HTML] 스크롤하면서 화면 내리는거 - Parallax(시차를 이용한 효과) (0) | 2020.07.24 |
| [HTML] 전체 구조 레이아웃 (0) | 2020.07.23 |