Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS Grid Layout
Webdesign

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

by
Difficulty:IntermediateLength:MediumLanguages:

Korean (한국어) translation by Jin Ah Chon (you can also view the original English article)

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

다음은 우리가 제작할 결과물입니다.

작은 배경

레이첼 맥콜린은 최근에 워드프레스 테마에서 섬네일 링크가 있는 갤러리를 넣는 방법을 설명하는 튜토리얼을 작성했습니다.

링크들은 사용자가 현재 어느 페이지에 있든지 (혹은 여러분이 어느 페이지를 명시하든지) 자식 페이지에 대한 내비게이션 역할을 하며, 그 결과로 생긴 플러그인은 이와 같이 무언가를 출력합니다.

wordpress thumbnail links to child pages
Github의 repo에서 해당 플러그인과 테마 파일을 저장하세요.

레이첼의 플러그인에서 만들어진 마크업을 사용해 다음 작업을 하겠습니다.

  • 반응형 갤러리가 될 CSS Grid를 이용해 섬네일을 정렬합니다.
  • CSS filter와 transition으로 hover 효과를 만듭니다.
  • 터치 스크린 사용자들이 hover 못하더라도 각각의 섬네일 제목을 보도록 훌륭한 CSS 미디어 쿼리를 사용하겠습니다.

1. 마크업 변경하기 (약간)

레이첼의 코드에서 작성된 마크업을 재빨리 훑어봅시다. 코드를 정리하면, 사실상 이와 같이 보입니다.

<h2>와 몇 개의 <article> 요소를 가진 부모 <div>가 있습니다. CSS Grid를 쓸 때는 grid container를 먼저 정의합니다. 이 경우에 부모 <div>를 사용할 수 있으니, 그렇게 되면 <h2>를 포함하여 바로 아래에 있는 자식마다 grid item이 되어 버립니다. 고로 조금 바꾸겠습니다.

모든 <article> 요소들을 또다른 <div>(가장 적합하다고 보는 태그를 편히 사용하세요)로 감싸겠습니다. 머릿속에 그려지듯이 그 태그에 grid-container class를 줄 것입니다. 기본으로 여기 초보자용 pen을 사용해 보세요.

2. 세 줄의 반응형 CSS 그리드

몇 가지 규칙을 사용해 섬네일들을 grid로 바꿀 수 있습니다.

여기에 있는 단순한 코드 라인은 display: grid; (바로 아래의 자식들 전부 grid item으로 바꾸고 배치합니다)와 grid-gap: 1em; (gutter를 규정합니다).

Column들을 규정하는 grid-template-columns 속성에 준 값이 약간 혼동스럽습니다. 어쩌면 여러분은 200px의 column 3개를 만드는 repeat(3, 200px)과 같은 것을 볼 거라고 당연히 기대 했겠지요. 이 경우에 repeat() 용도로 auto-fill 키워드를 사용하고 값 몇 개를 주었습니다. 이는 grid 컨테이너 안을 꽉 채울 정도로 최소 300px과 최대 1fr인 column을 많이 생성합니다.

여러분의 브라우저 윈도우의 크기를 재조정해서 어떻게 변하는지 보세요!

추가해야 할 마지막 세부 사항 하나는 다음과 같습니다.

이는 이미지를 컨테이너에 적절하게 채워줍니다(레이첼의 데모로 사용할 목적에서는 특히 필요한데, 워드프레스에서 출력하는 inline width와 height 속성값을 덮어써야 하기 때문입니다).

3. Hover 효과

섬네일에 관한 제목을 오버레이로 사용해 hover시 노출시키겠습니다. 또한, hover된 이미지에 붉은 효과(red effect)를 주고, 오버레이된 텍스트의 가독성에 도움이 되도록 이미지를 약간 흐리게 만들겠습니다.

제목 overlay하기

제목을 overlay 하려면, 위치를 잡아야 합니다. 고로, article을 position: relative;로 하고 title을 position: absolute;로 정해주어 시작하겠습니다. 그와 더불어 붉은 배경을 주고 충분한 공간을 채워줍니다.

좋습니다!

thumbs step 1

하단에 생긴 여분의 공간을 포함해 벌써 개선할 한두 가지 것이 있네요(제목이 섬네일보다 약간 큽니다). 이는 이미지의 컨테이너에서 line-height를 제거하면 해결됩니다.

제목에 스타일 적용하기

일부 타이포그래피 스타일은 제목을 더 낫게 보여주며, 플렉스박스 마술인 코드 3줄은 제목을 중앙으로 정렬할 것입니다.

훨씬 낫네요.

제목을 숨기기

자, hover 시에만 제목을 볼 수 있게 opacity를 없애 제목을 숨겨봅시다. 이미 .location-title에 추가했던 속성 아래에 한두 가지 규칙들이 더 있어야 합니다.

여기에서 opacity가 (0.5초 동안) 점진적으로 되돌아가도록 transition 규칙도 정합니다. 지금 되돌려 봅시다.

훌륭하네요! 이제 제목이 hover할 때 다시 나타납니다.

title back on hover

흐려진 라인

벌써 멋지게 보이는 hover 효과를 만들었는데요, 진도를 더 나아가 볼까요? 이미지에 흐림(blur) 필터도 더해 봅시다. transition 할 무언가를 주기 위해 일반 상태에서 흐림 필터를 설정하는 작업으로 시작하겠습니다. 그런 다음에 hover 상태에서 이미지를 2px 흐리게 하겠습니다(이 숫자를 원하는 정도까지 합니다. 그래도 제 생각에는 2px이 가장 보기에 좋습니다).

결과는 다음과 같습니다.

몇 가지 주의할 점입니다.

  1. 제목이 사라졌습니다. 왜냐하면 브라우저가 지금 그 위에 있는 흐려진 이미지를 렌더링하고 있기 때문이죠.
  2. 흐려진 효과는 보기 좋지만, 모서리도 흐려집니다(우리는 그보다 더 잘할 수 있습니다).

숨겨진 제목을 해결하는 것은 z-index: 1;.location-title에 추가하는 것만큼 쉽습니다.

흐려진 모서리를 해결하는 것은 조금 더 복잡합니다. 처음에는 이미지를 조금 더 키운 다음에 이미지 컨테이너(.location-listing)에서 overflow: hidden;로 설정해 줍니다. 그렇게 되면, 더 커진 이미지의 흐려진 모서리가 효과적으로 잘려집니다. 문제의 요소 2개에 관해 완성된 속성은 다음과 같습니다.

transform: scale(1.1); 규칙은 이미지를 사방으로 1.1배 키웁니다(1.0은 정확히 동일한 크기로 유지하겠죠). 훨씬 깔끔해진 결과는 아래와 같습니다.

no more blurred lines

4. 터치 스크린에서의 문제

드디어 해냈습니다! 섬네일마다 흐려진 hover 효과를 사용한 아주 보기에 좋은 이미지 그리드입니다. 걱정되는 것은 이미지 위에 hover하지 못하는 모든 사용자에게 제목이 보이지 않는다는 점입니다(상당 수의 태블릿과 스마트폰에서 오랜 “터치”로 hover를 에뮬레이션하지 않습니다 ). 매우 접근하기가 불가능합니다.

다행히 CSS에 아주 유용한 인터랙션 미디어 쿼리가 있어 우리가 문제를 해결하는데 도움을 줄 수 있습니다 (그리고 괜찮은 브라우저 지원도 상당히 누리고 있습니다). 이 쿼리들은 브라우저의 입력 메카니즘, 즉 포인팅 디바이스 품질과 hover 기능, 그리고 몇몇 다른 특수한 규정을 감지합니다. 그래서 손가락들이 터치 스크린 디바이스에서 관찰되는지 여부를 꽤 정확하게 정할 수 있습니다.

아래의 미디어 쿼리를 예로 들어보겠습니다(여러분이 예상한 것을 정확히 동작하겠죠).

이 중괄호 안에 :hover를 제어하지 못하는 브라우저에 적용하고 싶은 스타일을 넣습니다. 해봅시다. hover가 안되거나 적어도 불편한 디바이스에서 섬네일 이미지가 늘 흐려지고, 제목은 늘 보이도록 명시합니다.

결과를 보세요.

메모: 앞서 얘기했듯이, 이것을 지원하는 것은 매우 타당합니다. 그렇다 해도 인터랙션한 미디어 쿼리를 구현하는 것에 관한 토론은 아직 진행중입니다. 이 명세가 바뀌거나 일부 없어질 가능성이 있습니다.

결론

끝났네요! 잘 따라와 주셔서 감사합니다. 여러분이 한두 가지 배우고 CSS로 하는 작업을 즐겼으면 하는 바램입니다(누군들 즐기지 못했을까요?). 1부에서 레이첼이 만든 테마 파일에 추가한 최종 데모가 하나 더 있습니다!

더 읽어볼 자료들

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.