겁나 빠른 웹 레시피

핀터레스트 스타일 레이아웃 만들기 (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. Oh Cho
    그.. 줄 바뀌는 부분을 inline-block 하면 바뀌지 않는 이유가... 피규어에 inline-block 을 주어서 피규어 차체가 라인으로 취급된 후에 블럭처리 되는건 아닌가 싶습니다. 피규어 안에 들어있는 태그 요소들이 하나의 덩어리로 인식되어서 이미지와 피규어캡션이 붙게 되는건 아닌가.. 그냥 저도 유추해볼 뿐입니다. ㅎㅎ 이런 식으로 가설을 세워두고 나중에 다른 유형의 같은 문제를 여러번 겪어보면 어느새 확신? 이 되더라고요 ㅎㅎㅎ 많은 생각의 공유가 활발해졌으면 좋겠습니다~^^
  2. vogueupp
    완료
  3. jeisyoon
    2021.06.27 Masonry Layout - OK
  4. 이은용
    좋은 자료 감사합니다 !
  5. good34p
    감사합니다 210517
  6. 한번가보자
    영상이 안보이네요 ㅠㅠ
  7. 마릴곰이
    감사합니다
  8. 201218
  9. 늦은나이가아님
    2020.12.14 감사합니다
  10. nahbee
    bracket>

    실시간미리보기(크롬)

    #columns{
    column-width: 200px;
    }

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

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

    또 크롬말고 파이어폭스 브라우저에서 실행 시키니 이미지가 나오지 않아서 각 이미지 src 주소에
    http: 를 삽입하니 사진이 나옵니다.
  11. hoxy
    저도 궁금하네요ㅠㅠ
    대화보기
    • 이충기
      수강완료,
      본 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
                  실용적인게 나오니깐 더 재밌습니다. 감사합니다.
                • 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 자세히 보기