13장 핀터레스트 스타일의 반응형 웹 갤러리 제작하기

📖 최성일, ⌈Do it! 인터랙티브 웹 페이지 만들기⌋, 이지스퍼블리싱, 2021

오른쪽 메인 영역에 갤러리 이미지 추가하기

✨ Emmet 사용

<main>
  section>article*20>div>img[src="/assets/images/p$.jpg"]+h2>lorem3^p>lorem7
</main>

🔽 결과

<main>
  <section>
    <article>
      <div>
        <img src="/assets/images/p1.jpg" alt="" />
        <h2>Lorem, ipsum dolor.</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
      </div>
    </article>
    ...
    <article>
      <div>
        <img src="/assets/images/p20.jpg" alt="" />
        <h2>Ut, corrupti incidunt!</h2>
        <p>Dignissimos beatae quidem saepe, nisi ipsum dolores!</p>
      </div>
    </article>
  </section>
</main>

float 배치한 레이아웃 재정렬하기

미디어 쿼리를 이용하여 반응형 웹 제작하기

@media screen and (max-width: 1599px) {
  header {
    width: 350px;
  }
  main {
    margin-left: 350px;
  }
  main section article {
    width: 25%;
  }
}

이번 스터디에서 특별히 좋았던 점이나 어려웠던 점, 새로 알게 된 부분

Isotope 플러그인을 사용해서 번거롭고 복잡한 동적 기능을 쉽게 추가하여 반응형 웹 페이지를 제작했다. 브라우저 폭에 따라 article의 배치가 재정렬되게 했고, 짝수 또는 홀수 번째의 article만 분류해서 보여주는 기능을 담은 버튼을 추가했다.