CSS 그리드를 이용한 이미지 갤러리

 

 

 

 

이런 효과를 만들고 싶어 구글링하다 보니 어떤 외국 사람이 만든 게시물에서 도움을 얻었다.

 

출처 : https://webdesign.tutsplus.com/ko/tutorials/create-a-css-grid-image-gallery-with-blur-effect-and-interaction-media-queries--cms-32287

CSS 그리드 이미지 갤러리 제작하기 (Blur 효과와 인터랙션 미디어 쿼리 이용)

 

 

 

 

 

 

내가 만들 결과물은 아래와 같다.

전부 다 마라탕으로 도배....ㅎㅎ

 

 

 

 

 

 

 

먼저 html 이다.

 

<div class="wrap">
        <div><a class="first" href="">maratang</a><img src="./image/maratang.jpg" /></div>
        <div><a class="second" href="">maratang</a><img src="./image/maratang.jpg" /></div>
        <div><a class="third" href="">maratang</a><img src="./image/maratang.jpg" /></div>
    </div>

 

 

 

 

 

먼저 감싸고 있는 태그 wrap 에다가 그리드를 선언하였다.

 

.wrap {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            grid-gap: 1em;
        }

 

해석해보면...

원래 grid-template-columns : repeat(3, 1fr) 을 하면 화면에서 무조건 삼등분을 차지하라 는 의미이다. 브라우저 창을 줄여도 이미지가 줄어들며 삼등분이 유지된다!

 

 

마찬가지로 위 코드에서 보면

auto-fill : 화면에 맞게 자동적으로 채워라.

minmax(min, max) : min 보다 크거나 같고 max 보다 작거나 같은 크기 범위를 정의하는 기능적 표기법.

 

 

 

-> 그럼 전체 화면에서 삼등분이었다가 브라우저 창을 줄이면 3...2....1 개 씩으로 줄어들게 할 수 있다! 

 

 

 

 

 

 

img { width: 100%; height: 100%; }

 

이는 이미지를 div 태그에 100% 다 채우라는 의미이다.

외국분은 height: auto 를 선언하였지만, 나는 height: 100% 를 하고 나서 hover 효과가 더 깔끔해진 느낌이 들었다. 

 

 

 

 

 

 

 

 

현재까지의 결과이다!

 

 

 

 

 

이제 hover 효과를 줄 것이다.

 

제목이 이미지 안에 위치시키기 위해서는 바깥 태그에다가는 position: relative 속성을, 제목은 position: absolute 속성을 주어야 한다.

 

이거 모르면 곤란... 개념은 아래 내 게시글을 참고

2021.09.21 - [html , css] - CSS - 수직 가운데 정렬, position 속성

 

 

	.wrap div {
            position: relative;
        }

        .wrap .first, .second, .third {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background: rgba(90,0,10,0.4);
            }

 

다음과 같이 제목을 이미지에 들어가도록 배치시켜주었다.

그리고 a 태그의 배경색을 rgba 로 설정해주었다.

 

 

 

 

 

 

 

.wrap .first, .second, .third {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background: rgba(90,0,10,0.4);
            
            /* typographic styles */
            color: white;
            font-size: 1.5em;
            font-weight: bold;
            text-decoration: none;
            
            /* position the text centrally*/
            display: flex;
            align-items: center;
            justify-content: center;
        }

 

이제 글자를 이쁘게 바꿔주고, 글자를 이미지의 가운데로 배치하게 할 것이다. a 태그의 글자를 flexbox 를 이용해서 수직으로 가운데, 수평으로 가운데 배치한다.

 

 

 

 

 

 

이제 마우스를 hover 할 때만 제목을 볼 수 있게 만들 것이다.

제목에는 opacity : 0 을 줘서 안보이게 하고 hover 됬을때 opacity : 1 을 하여 보이게 한다.

 

	/* hide the title by default */
  	opacity: 0;
  	transition: opacity .5s;
  
  	.first:hover, .second:hover, .third:hover {
            opacity: 1;
        }

 

 

 

결과 완성!

내 나름대로 속성 변경을 더 해보았다.