HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🙂
달리팀 노션/
👨🏻‍💻
달리 2팀 (deprecated 문제 없으면 삭제 예정)/
Today We Learned
Today We Learned/
정사각형 이미지 갤러리 만들기 (feat. flex)
정사각형 이미지 갤러리 만들기 (feat. flex)
정사각형 이미지 갤러리 만들기 (feat. flex)

정사각형 이미지 갤러리 만들기 (feat. flex)

TL;DR설명결과물마크업CSSSee also

TL;DR

  • 플렉스 아이템의 너비를 플렉스 컨테이너의 너비에서 n 분할한 값으로 지정한다
  • 플렉스 아이템의 너비가 고정되었으므로 이미지 컨테이너는 너비를 100% 사용하고 비율(aspect-ratio)을 1:1로 지정한다

설명

  • Q. 모든 플렉스 아이템의 너비를 어떻게 동일하게 만들지? (ex. 3분할)
    • 플렉스 아이템의 너비를 부모 너비의 1/3로 나눈다 ⇒ width: calc(100% / 3)
  • Q. 모든 플렉스 아이템에 10px 간격(gutter)를 만들려면 어떻게 하지?
    • 플렉스 아이템에 margin을 10px을 추가한다 ⇒ margin: 10px
    • 플렉스 아이템의 너비를 부모 너비의 1/3로 나눈 값에 아이템 3개에 대한 마진(3 * 10px)을 뺀다 ⇒ width: calc(100% / 3 - 30px)
  • Q. 이미지의 크기는 제각각이다. 어떻게 동일한 크기로 만들지?
    • 이미지를 감싸는 div 컨테이너를 마크업에 추가한다
    • 플렉스 아이템의 너비가 이미 부모 너비의 3분할로 나뉘었으므로 이미지 컨테이너는 전체 너비를 사용한다 ⇒ width: 100%
    • 이미지 컨테이너의 비율을 1:1로 지정한다 ⇒ aspect-ratio: 1 / 1;

결과물

마크업

CSS

See also

  • codepen
생성일
Nov 2, 2021 11:38 AM
기록자
해결 여부
해결 여부
속성
CSS
카테고리
CSS 스타일링
<ul class="container">
  <li class="item">
    <div class="image-container">
      <img class="image" src="https://picsum.photos/2300/300" alt="" />
    </div>
  </li>
  <li class="item">
    <div class="image-container">
      <img class="image" src="https://picsum.photos/200/3200" alt="" />
    </div>
  </li>
  <li class="item">
    <div class="image-container">
      <img class="image" src="https://picsum.photos/600/200" alt="" />
    </div>
  </li>
  <li class="item">
    <div class="image-container">
      <img class="image" src="https://picsum.photos/200/300?1" alt="" />
    </div>
  </li>
  <li class="item">
    <div class="image-container">
      <img class="image" src="https://picsum.photos/230/300?2" alt="" />
    </div>
  </li>
  <li class="item">
    <div class="image-container">
      <img class="image" src="https://picsum.photos/200/300?3" alt="" />
    </div>
  </li>
</ul>
* {
  box-sizing: border-box;
}

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
  width: 1000px;
}

.item {
  width: calc(100% / 3 - 30px);
  margin: 10px;
}

.item:nth-child(1) {
  width: calc(66% - 30px);
}

.image-container {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid red;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}