겁나 빠른 웹 레시피

핀터레스트 스타일 레이아웃 만들기 (masonry)

소개

masonry는 벽돌을 쌓는 공사, 석조라는 의미를 가지고 있습니다. 사진 공유 서비스인 핀터레스트가 인기를 끈 이후에 핀터레스트와 같은 스타일의 레이아웃이 크게 인기를 끌었는데요. 이러한 모양의 레이아웃을 masonry 레이아웃이라고 합니다. 여기서는 masonry을 만드는 방법을 알아보겠습니다. 

pinterest

사용기술

관련기술

 

예제

<!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>

참고

댓글

댓글 본문
작성자
비밀번호
  1. 김신실
    아하! 감사합니다~
    대화보기
    • 오준석
      잘못말씀드렸네요 ㅠ
      <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="http://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/pocahontas_2.jpg">
      <figcaption>Pocahontas based on 17th century Powhatan costume</figcaption>
      </figure>

      이렇게네요 ㅠ
      대화보기
      • 김신실
        감사합니다 근데 www를 어디다 붙이나요? file:///C:/Users/user/Desktop/Web/겁나%20빠른%20웹%20레시피/Masonry%20layout/Masonry%20Layout%201.html 이렇게 나오면 www를 http://www.file......tml 이렇게 하나요? 방법좀 알려주세요 ㅜㅜ
        대화보기
        • 오준석
          전부다 www붙이니까 나오더라구여..
          대화보기
          • 김신실
            그대로 따라 작성했는데 다른건 다 잘 되는데... 사진이 안 나오네요... 크롬을 사용했는데 혹시 방법 아시면 댓글 좀 달아주세요
          • ckocko
            column이란 속성은 피규어 갯수에 따라서 화면을 키워도 끝까지 채워지냐 아니냐가 상관 있나요?
            피규어를 6개만 만들었을 때 column-width를 100픽셀정도 주고 화면을 키워도 위에 3개 아래 3개 이렇게 나오지 일렬로 6개가 나오지 않네요? ㅠ 근데 피규어 갯수를 9개 정도 하면 또 위에 5개 아래 4개 이렇게 배치 되서요
          • 코호호
            정말 재밌어보이네요, 꼭 시간내서 들어야겠어요 찜!
          • 조성경
            간단하게 만들어졌네요..!! 이런 디자인이 아니라 페이지를 이렇게 보여준 적이 있기는 한데.. 와우..
            간단하네용
          • sSll바버미니llSs
            실용적인게 나오니깐 더 재밌습니다. 감사합니다.
          • 고맙습니다.
          • egoing
            아하 그렇군요~ 고맙습니다!
          • #columns figure {
            display: inline-block;
            }
            이렇게 했을 때 이미지와 텍스트가 분리되는 현상이 왜 사라지는지에 대한 원리는 파악을 못하셨다고 이해했다면 댓글로 알려달라고 강의에서 그러셔서요ㅋ 이렇게 해서 inline-block했을 때 분리되는 현상이 사라지는 원리가 아닌가 라고 댓글 남긴거에요
            대화보기
            • egoing
              수업을 만든지 조금 되서 제가 맥락을 잘 파악을 못했는데요. 설명을 조금만 더해주시면 좋을 것 같습니다. ^^;
              대화보기
              • display: inline-block;
                요소를 블록 박스로 만들지만, 같은 줄에 다른 요소가 위치하는 것을 허용한다.


                div (여러 figure들을 전체로 묶고 있는)에 display: inline-block;을 적용하면,
                <div> 블록레벨요소 틀 하나에 적용시키려는 것이기 때문에 변화가 없다.

                <div>
                <figure>
                <figcaption></figcaption>
                </figure>
                </div>

                여기서 div안에 있는 figure에 display:inline-block;을 적용하면,
                <div>틀 안에서 각 figure(figcaption 포함)들이 같은 줄에 블록박스 형식으로 위치하게 된다.


                ↑ 이래서
                #columns figure {
                display: inline-block;
                }
                이렇게 하는게 아닐까요?
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기