[HTML & CSS] transform 활용 예제 만들기

[transform 예제 만들기]

• 지난번 배운 transform, translate, transition, scale, opacity, rgba을 응용해서 예제를 하나 만들어보자.
• 예제의 내용은 아래 사진과 같이 이미지 5장을 화면에 놓고 각 이미지 화면에 마우스 커서를 올려놓았을 때 이미지가 흐려지고 이미지가 확대되면서 버튼이 생기는 것이다.

transform 응용 예제

 

[구조 잡기]

• 가장 먼저 해줄 일은 5개의 이미지가 위치할 수 있도록 구조를 짜는 일이다.
• 구조 짜는 방법은 복잡하게 생각하지 않아도되고, 앞서 탑바 제작하듯이 틀만 만들어준다고 생각하면 된다.
• img태그를 이용해 이미지를 한 번에 바로 insert하지 않고 굳이 구조를 짜서 넣어주는 이유는 img태그는 닫히 태그가 없기 때문에 hover를 적용했을 떄의 커스텀이 쉽지 않기 때문이다.
• 따라서 img태그를 감싸는 상위 엘리먼트들과 버튼이 들어갈 자리가 필요하기 때문에 구조를 나눠야한다.
• 구조는 가장 큰 틀인 img-top-section과 아래 container를 생성하여 해상도에 맞춰 너비 1440px과 높이 320px로 가운데정렬하여 맞춰놓고 시작해보자.
• 이미지가 놓일 5개의 태그들은 각각 같은 비율로 너비를 가져야되기 때문에 상위 엘리먼트인 container에 display: flex;를 적용하고 각 이미지 태그에 flex-grow: 1; 과 flex-basis: 0;을 적용한다.
• 이미지 태그 사이사이에 여백은 margin-left와 margin-right를 이용하여 여백을 준다.

구조 잡기 (html)

구조 잡기 (css)

 

구조 잡기

 

[이미지 삽입]

• 구조를 잡았다면 각 img-box 안에 img태그에 이미지 주소를 복사해서 넣어준다.
• 최초에 이미지 주소를 복사해서 화면을 확인해보면 크기가 중구난방으로 퍼져있을 것이다.
• 각 이미지를 img-box의 크기 만큼 맞추려면 너비 높이를 모두 100%로 맞춰 넣어주고, 늘어져있는 이미지를 object-fit: cover; 를 적용하여 이미지를 가운데로 정렬해준다.

이미지 삽입 (html)

이미지 너비 높이 100% 및 정렬 (css)

 

이미지 삽입

 

[이미지 hover처리 시 효과 적용]

• 우리의 목표는 각 이미지 위에 마우스 커서를 올려 놓았을 때 이미지의 명암이 어두워지는 것이다.
• 명암이 어두어지는 커스텀은 검은색 바탕의 투명도를 이용할 것이고, 우선 검은색 바탕화면 클래스를 하나 생성해야된다.
• background라는 클래스를 img태그의 형제 엘리먼트로 생성해서 너비, 높이를 동일하게 100%를 주고 화면을 확인해보면 각 이미지 아래에 검은색 박스가 배치된다.
• display를 사용해서 검은색 박스를 이미지와 겹쳐보이게 할 수 없기 때문에 여기서 position 속성을 사용해야한다.
• 각 background 클래스에 position: absolute를 적용하고 img-box에 position: relative를 적용하여 top과 left를 이용하여 위치 이동을 시켜준다.
• 이 때, background  클래스에 헥사값을 이용한 완전 검은색 background-color를 주게되면 투명도가 적용되지 않아 뒤에 이미지가 완전히 보이지 않기 때문에 rgba를 이용하여 투명도를 넣어줘야한다.
• 이제 img-box에 hover 처리를 하고 평소에는 background 클래스가 보이지 않기 위해 opacity: 0;과 visibility: hidden;를 적용해주고 hover 처리했을 때는 opacity: 1;과 visibility: visible;를 적용한다.
• 추가로 img-box에 hover 처리를 했을 때 각 이미지가 기존보다 120% 확대된 모습을 보이기 위해 transform: scale(1.2);를 적용한다.
• 마지막으로 이미지에 마우스 커서를 올렸을 때 바로 검은 화면으로 바뀌지 않고 타임을 걸어 애니매이션 처럼 천천히 바뀌도록 적용하기 위해 background 클래스에 transition: 0.3s;를 적용한다.

이미지 hover 처리 (html)

이미지 hover 처리 및 투명도, 애니매이션 적용 (css)

 

• 위 코드와 같이 적용하고 화면을 보게 되면 아래 그림과 같이 가장 좌측에 있는 사진에 마우스를 올려놓았을 때 검은색 투명도가 적용되면서 사진도 기존보다 120% 더 확대되서 나타나는 것을 볼 수 있다.

이미지 hover 적용

 

[버튼 만들기]

• 마지막으로 hover 처리 됐을 때 어두운 화면의 정 가운데에 버튼을 만들어 보자.
• button 태그로 버튼을 만들 수 있지만 이번엔 div와 a태그를 이용하여 직접 커스텀하면서 버튼을 만들어 보자.
• background 클래스의 자식 엘리먼트로 btn-box를 생성해주고 BUTTON 이라는 텍스트를 추가한다.
• btn-box는 화면 정 가운데에 들어와야되기 때문에 따로 너비 높이와 여백을 주는 것보단 flex를 통한 정렬이 훨씬 편리하고 쉽다.
• btn-box의 상위 엘리먼트인 background에 display: flex와 justify-content: center, align-items: center를 적용하여 가운데정렬을 해준다.
• 버튼은 테두리와 배경색은 rgba를 통해 투명도를 입혀 가시적으로 잘 보이게 설정하고 버튼 자체에 padding 여백을 주어 디자인적으로 보기 좋게 커스텀해준다.

버튼 만들기 (html)

버튼 만들기 (css)

 

• 버튼까지 완성하게 되면 처음에 우리가 목표했던 transform, translate, transition, scale, opacity, rgba을 응용한 예제 화면이 완성된다.

transform 응용 예제 완성본