HTML/CSS Grid로 Image Gallery 만들기

0. 만들게 된 계기

아래와 같은 이미지 구성이 요즘 유행하는 것 같아서 내가 직접 만들어 보기로 했다. 여러 자료들을 찾아봤지만 단순히 CSS로만 만들거나 span(2)와 같은 인위적인 고정값을 주길래 grid로 직접 만들어보기로 했다.
처음 Grid로 width 부분을 잡고 안에 Grid로 세부적인 조정을 하는 식이다.

1. 준비

- 이미지들과 (큰 고화질로) index.html, index.css 파일을 만든다.

- index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./index.css">
  <title>Image Gallery</title>
</head>
<body>
  <h1>HeeYouNi Gallery</h1>
  <div class="container">
    <div class="images">
      <div class="imageFlex1">
        <img src="./image1.jpg">
        <img src="./image4.jpg">
        <img src="./image7.jpg">
        <img src="./image10.jpg">
        <img src="./image13.jpg">
        <img src="./image16.jpg">
      </div>
    </div>
    <div class="images">
      <div class="imageFlex2">
        <img src="./image2.jpg">
        <img src="./image5.jpg">
        <img src="./image8.jpg">
        <img src="./image11.jpg">
        <img src="./image14.jpg">
      </div>
    </div>
    <div class="images">
      <div class="imageFlex3">
        <img src="./image3.jpg">
        <img src="./image6.jpg">
        <img src="./image9.jpg">
        <img src="./image12.jpg">
        <img src="./image15.jpg">
      </div>
    </div>
  </div>
</body>
</html>

- index.css

body {
  margin: 0;
}
h1 {
  text-align: center;
}
.container {
  width: 70%;
  margin: auto;
  overflow: hidden;
}
.images {
  width: 100%;
  height: auto;
}
.images img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (min-width: 640px) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
    grid-auto-flow: row dense;
  }
  .imageFlex1 {
    display: grid;
    row-gap: 20px;
  }
  .imageFlex2 {
    display: grid;
    row-gap: 20px;
  }
  .imageFlex3 {
    display: grid;
    row-gap: 20px;
  }
}

현재는 @media tag로 하나만 정의했지만 이 곳을 여러개 만들면 그것이 바로 반응형!

2. 결과

아래와 같은 결과가 나온다.

크롬 개발자도구를 켜보면 grid라고 누르면 어떻게 적용되고 있는지 알 수 있다.

색깔별로 각자 다른 grid가 잘 적용되고 있음을 볼 수 있다.

3. 마치며

지금은 단순한 하드코딩으로 3개의 div를 따로 만들어서 고정값을 넣어줬지만 실제 서비스시에는 JS 또는 TS로 서버에서 불러온 값을 처리하는 코드가 필요하다.

프론트엔드에서 API Key를 숨기는 법
JUnit5와 JUnit4를 같이 사용할 때 유의해야할 점

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage