🧚🏻‍♂️ HTML , CSS

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

ji-hyun 2021. 9. 29. 01:59

 

 

 

 

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

 

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

 

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

이 튜토리얼에서 다수의 일반 섬네일 링크를 가져와서 흐린 hover 효과를 이용한 반응형 CSS 그리드 갤러리로 변신시키겠습니다. 터치 스크린 사용자들도 놓치지 않도록 훌륭한 CSS 트릭도 사용합

webdesign.tutsplus.com

 

 

 

 

 

 

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

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

 

 

 

 

 

 

 

먼저 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;
        }

 

 

 

결과 완성!

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

 

 

 

 

 

 

'🧚🏻‍♂️ HTML , CSS' 카테고리의 다른 글

검색창 만들기  (0) 2021.11.02
CSS - 애니메이션 속성  (0) 2021.09.28
CSS - transition 속성  (0) 2021.09.28
CSS - grid 속성  (0) 2021.09.27
CSS - 가변형 그리드 (옛날 방식)  (0) 2021.09.27