겁나 빠른 웹 레시피

핀터레스트 스타일 레이아웃 만들기 (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. nahbee
    bracket>

    실시간미리보기(크롬)

    #columns{
    column-width: 200px;
    }

    이렇게 멀티 컬럼만 쓰면 이미지가 겹쳐서 나열되요

    그래서 이미지 크기도 같이 적용 시키니 겹치지 않고 column-width 크기도 같이 적용이 됩니다.

    또 크롬말고 파이어폭스 브라우저에서 실행 시키니 이미지가 나오지 않아서 각 이미지 src 주소에
    http: 를 삽입하니 사진이 나옵니다.
  2. 저도 궁금하네요ㅠㅠ
    대화보기
    • 이충기
      수강완료,
      본 Coding 예제에서 Test한 부분으로 Image의 Width가 서로 상이한 경우,
      Image가 우측의 Column을 침범하여 만들어 놓은 형식이 깨질 수 있네요.

      이 경우 #Columns figure tag의 width를 100% 이내로 지정하여 방지 할 수 있습니다.
      위 경우 통상 100%로 지정하면 될 것 같으나 padding 등의 Code를 추가로
      기입 할 시 우측 padding이 깨져 본인이 보기 편한 정도로 지정하면 되는거 같습니다.

      혹시 다른 좋은 방법이 있다면 공유 부탁드립니다.
    • 이미지가 안떠욤
      예제 이미지 링크를 클릭하면 뜨는데 html을 크롬에서 실행할때 이미지가 안뜨는 경우는 왜인지 아시는 분 계실까요?
    • ㅇ_ㅇ
      감사합니다 bb
    • ㅇㅇ
      감사합니다 ㅠ퓨ㅠㅠㅠ
    • beginer
      감사합니다
    • incursio
      감사합니다
    • lygon
      2019-03-14 완료
    • 레이블랙
      좌측으로 5개 이상 나열하려면 어떻게 해야하나요 ㅠㅠ
    • atnskynst
      감사합니다
      대화보기
      • 코디잉
        figure의 정렬 순서가 위에서 아래로 채워지는 식으로 되는데
        (아래처럼)
        1 4 7

        2 5 8

        3 6 9

        좌측에서 시작해서 우측으로 순서대로 정렬하려면 어떻게 해야 할까요..???
        (아래와 같이)
        1 2 3 4

        5 6 7 8

        9 10 11 12
      • daaawnstar
        새로운 마음으로 ...
      • Midoriya
        혹시 이미지가 안나오시는 분들을 위해서
        img src에서 //앞에 http:를 붙여서 http://로 만들어주시면 이미지나옴
      • 코딩잘하고싶어요 ㅎ
        180222
      • 박인호
        12-12
        수강완료.
        감사합니다 ㅎ
      • 고스트프리
        감사합니다.
      • 푸른하늘
        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 정도로 늘려보시면 더욱 명확해지실 것 같습니다.


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

        아시는 분 갈켜주시면 감사하겠습니다.
        대화보기
        • oasis
          강의 감사합니다
        • 김진호
          강의 너무 잘 보고있습니다. 항상 감사합니다.
          궁금한것이 있는데요. 핀터레스트에서 화면을 줄이면 사진과 사진의 여백, 그리고 사진크기는 변동이 없고
          단만 줄어드는데, 본 예제에서는 화면을 줄이면 사진과 사진의 여백이 줄어들면서 사진의 크기가 커지는데요.
          핀터레스트처럼 효과를 주려면 어떻게 해야하나요?ㅜㅜ
        • Eunryeong Cha
          ㅎㅎ 왕초보인데 재미있게 했어요. html강의 순서대로 듣다가 이거 들으니까 더 잘 이해되요
        • jihye
          강의 세개째 보고 있는 중인데 목소리가 너무 좋으시네용!!
          귀에 쏙쏙 잘 들어와요
          감사합니다.
        • 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 자세히 보기