겁나 빠른 웹 레시피

핀터레스트 스타일 레이아웃 만들기 (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. 레이블랙
    좌측으로 5개 이상 나열하려면 어떻게 해야하나요 ㅠㅠ
  2. 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 자세히 보기