겁나 빠른 웹 레시피

핀터레스트 스타일 레이아웃 만들기 (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. jimmyzip
    9개월 전 이슈이긴 하지만 이제 새로 접하시는 분들을 위해
    설명을 조금 바로잡을 필요가 있는 것 같아 적어봅니다.

    figure : 블록태그 :: figure태그 다음에 figure태그가 또 들어오면 밑으로 줄바뀜
    img : 인라인태그 :: 연속으로 오면 옆으로 나열됨
    figcaption : 블록태그 :: 밑으로 줄바뀜

    이라서
    figure{display:inline-block;}의 의미는 기본적으로 블록태그인 figure에 인라인 속성을 부여한게 맞는 것 같습니다.

    inline속성을 부여하지 않은 figure는 기본이 블록속성이기 때문에
    컬럼이 3열이니까 맨 왼쪽 1열 부터 차곡차곡 밑으로 쌓다가
    div#columns에 부여된 너비에 비례해 일정하게 지정된 height가 넘치면
    잘리는 요소를 두 번째 열로 보내고
    그 뒤 부터 다시 아래로 뒷 요소들을 채우고 3열까지 갑니다.

    요약하자면,
    inline을 안잡아줬을 때에는 figure 내부의 image와 figcaption이 차지하는 높이값들의 합이 넘쳐서
    열의 끝에 있는 녀석이 다음 열로 밀려난 것입니다.

    그런데 figure에 inline속성을 잡아주면(display:inline-block)
    블록이라서 밑으로 떨어지는 기본속성과
    옆으로 당겨붙이는 inline 속성이 함께 작용해서
    height가 넘칠 것 같으면 figcaption만 옆 열로 보내는게 아니라
    figure를 통째로 보내버리기 때문에
    옆 열 침범이 해소된 것 처럼 보이는 것 같습니다.

    <figure><img><figcaption></figcaption></figure> 갯수를 무작위로 늘리고

    감싼 div#columns의 단을 5 정도로 늘려보시면 더욱 명확해지실 것 같습니다.


    =====================================================
    이게 아니라면 저도 매우 궁금한 상황이라

    아시는 분 갈켜주시면 감사하겠습니다.
    대화보기
    • 강의 감사합니다
    • 김진호
      강의 너무 잘 보고있습니다. 항상 감사합니다.
      궁금한것이 있는데요. 핀터레스트에서 화면을 줄이면 사진과 사진의 여백, 그리고 사진크기는 변동이 없고
      단만 줄어드는데, 본 예제에서는 화면을 줄이면 사진과 사진의 여백이 줄어들면서 사진의 크기가 커지는데요.
      핀터레스트처럼 효과를 주려면 어떻게 해야하나요?ㅜㅜ
    • Eunryeong Cha
      ㅎㅎ 왕초보인데 재미있게 했어요. html강의 순서대로 듣다가 이거 들으니까 더 잘 이해되요
    • 강의 세개째 보고 있는 중인데 목소리가 너무 좋으시네용!!
      귀에 쏙쏙 잘 들어와요
      감사합니다.
    • psj9504
      익스8에서는 적용안되는데 익스8에서도 이렇게 구현하려면 어떻게 해야할까요?
    • Soyoung Park
      display: inline-block 속성에 대해 궁금해서 찾아봤는데
      http://aboooks.tistory.com/85 이 링크보고 이해가 좀 됐습니다.
      요소는 inline인데 내부는 block처럼 표시하는 것이라는데,
      여전히 figure의 display속성이 block일때는 텍스트와 이미지가 한번에 표시되지 않고
      inline-block일때에만 제대로 나오는가에 대해서는 아직도 확신이 들지 않네요..
    • 쾌남죠
      동영상강의를 보면 제일 아랫쪽 이미지가 왼쪽에 정렬되지않고 3번째 이미지 아래에 붙은데 이 이미지를 제일 왼쪽으로 정렬되게 하려면 어떻게 해야할까요^^
    • 이제명
      IE 9.0 이하 버젼에서는 다 깨지면 display:block; 넣으면 됩니다. ;;;;
    • 이벤트
      잘 봤습니다
    • 김신실
      아하! 감사합니다~
      대화보기
      • 오준석
        잘못말씀드렸네요 ㅠ
        <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
              실용적인게 나오니깐 더 재밌습니다. 감사합니다.
            • Frank
              고맙습니다.
            • 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 자세히 보기