Notice
Recent Posts
Recent Comments
Link
«   2025/04   »
일 월 화 수 목 금 토
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
Tags
more
Archives
Today
Total
관리 메뉴

개발자입니다

[생활코딩 CSS] Masonry layout 만들기 본문

HTML & CSS/생활코딩 - 겁나 빠른 웹 레시피

[생활코딩 CSS] Masonry layout 만들기

끈기JK 2022. 9. 29. 13:53

masonry: 벽도을 쌓는 공사, 석조

 

 

<figure>: 독립적인 콘텐츠를 표현한다. 피규어, 설명, 콘텐츠는 하나의 단위로 참조된다. 이미지, 삽화, 도표, 코드 조각 등을 넣을 수 있다.

<figure>
    <img src="/media/cc0-images/elephant-660-480.jpg"
         alt="Elephant at sunset">
    <figcaption>An elephant at sunset</figcaption>
</figure>

 

-CSS 설명

column-width: 350px : 350 px의 너비를 가진 열로 나눠준다.

column-gap: 15px : column 간격을 15px 준다.

box-shadow: 바깥 영역에 그림자를 준다. /* offset-x | offset-y | blur-radius | color */

<html>
<head>
  <title></title>
  <style>
    #columns{
      column-width: 350px;
      column-gap: 15px;
    }
    #columns figure{
      display: inline-block;
      margin: 0;
      margin-bottom: 15px;
      padding: 10px;
      box-shadow: 2px 2px 3px 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: 0px;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <div id="columns">
    <figure>
      <img src="img/0.jpg">
      <figcaption>Cinderella wearing European fashion of the mid-1860’s</figcaption>
    </figure>

    <figure>
      <img src="img/1.jpg">
      <figcaption>Rapunzel, clothed in 1820’s period fashion</figcaption>
    </figure>

    <figure>
      <img src="img/2.jpg">
      <figcaption>Belle, based on 1770’s French court fashion</figcaption>
    </figure>

    <figure>
      <img src="img/3.jpg">
      <figcaption>Mulan, based on the Ming Dynasty period</figcaption>
    </figure>

    <figure>
      <img src="img/4.jpg">
      <figcaption>Sleeping Beauty, based on European fashions in 1485</figcaption>
    </figure>

    <figure>
      <img src="img/5.jpg">
      <figcaption>Pocahontas based on 17th century Powhatan costume</figcaption>
    </figure>

    <figure>
      <img src="img/6.jpg">
      <figcaption>Snow White, based on 16th century German fashion</figcaption>
    </figure>

    <figure>
      <img src="img/7.jpg">
      <figcaption>Ariel wearing an evening gown of the 1890’s</figcaption>
    </figure>

    <figure>
      <img src="img/8.jpg">
      <figcaption>Tiana wearing the <i>robe de style</i> of the 1920’s</figcaption>
    </figure>
 </div>
</body>
</html>

 

아래 예제 분석하면 조금 더 예쁜 모양 만들수 있다.

https://codepen.io/dudleystorey/full/AqzKdv

저작자표시

'HTML & CSS > 생활코딩 - 겁나 빠른 웹 레시피' 카테고리의 다른 글

[생활코딩 CSS] 리로딩 없이 URL 바꾸기 (음악앱)  (0) 2023.02.06
[생활코딩 CSS] 랜덤 이미지 생성기  (0) 2023.02.05
[생활코딩 CSS] Parallax(시차를 이용한 효과)  (0) 2023.02.04
[생활코딩 CSS] 링크를 버튼으로 만들기  (0) 2023.02.04
[생활코딩 CSS] 자바스크립트 없이 tree 만들기  (0) 2023.02.04
'HTML & CSS/생활코딩 - 겁나 빠른 웹 레시피' Related Articles more