이미지의 호버 효과는 추가적인 정교함을 부여하여 웹사이트의 전체적인 외관을 향상시킬 수 있습니다. 이 기술은 이미지 갤러리나 슬라이더를 탐색할 때 매끄러운 전환을 만들어 사용자 경험을 개선합니다. 또한 이러한 효과는 자바스크립트 코드 없이도 CSS만으로 손쉽게 구현할 수 있습니다.
배경을 흐리게 하거나, 확대 또는 축소하거나, 텍스트를 화면에서 슬라이딩하거나, 경치 배경의 색조를 변경하는 등의 창의적인 조작 기술을 통해 이미지 콘텐츠에 다양한 애니메이션을 부여할 수 있습니다.
이미지에 대한 HTML 만들기
index.html 파일을 만드는 과정은 컴퓨터에 빈 디렉터리를 만든 다음 텍스트 편집기를 사용하여 파일을 여는 것으로 시작됩니다. 파일 내에서 HTML 프레임워크를 구성하고 여는
및 닫는 태그 내에 후속 콘텐츠를 삽입해야 합니다. <div class="grid">
<div class="image-wrapper">
<img class="blur" src="https://picsum.photos/500?random=1" alt="">
<div class="content fade">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
</div>
</div>
<div class="image-wrapper">
<img class="zoom blur" src="https://picsum.photos/500?random=2" alt="">
<div class="content fade">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
</div>
</div>
<div class="image-wrapper">
<img class="blur" src="https://picsum.photos/500?random=3" alt="">
<div class="content slide-left">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
</div>
</div>
<div class="image-wrapper">
<img class="grey" src="https://picsum.photos/500?random=3" alt="">
<div class="content slide-left">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
</div>
</div>
</div>
현재 구성은 4개의 이미지 래퍼를 수용하는 그리드 컨테이너로 구성됩니다. 이미지 래퍼 클래스를 통합하는 DIV 요소는 시각적 표현과 그에 수반되는 비문을 위한 커버 역할을 합니다. 모든 섹션의 그림과 정보에는 고유한 클래스 세트가 추가됩니다.
스타일시트 내에서 클래스 지정에 따라 해당 요소를 선택한 다음 다양한 시각적 수정 및 애니메이션을 적용하는 것을 목표로 합니다. 텍스트는 기본적으로 숨겨져 있으며 이미지 컨테이너에 호버 효과를 적용했을 때만 나타나고 그 이후에는 그림에 다양한 조작을 가할 수 있습니다.
기본 CSS 추가
웹사이트의 외관을 개선하기 위해서는 CSS(Cascading Style Sheet)를 활용하여 시각적 요소를 제어해야 합니다. 먼저 프로젝트 폴더에 “style.css”라는 새 파일을 생성하고 다음 코드를 추가합니다: “`php “` 그런 다음 HTML 파일의
섹션에 스타일 시트를 HTML 문서에 연결하기 위해 다음 코드를 삽입합니다: “`bash <link rel="stylesheet" href="style.css">
style.css 파일 내에서 수행해야 하는 초기 작업은 신체 요소의 한계값을 null 수량으로 조정하고 동일한 요소의 바닥에 미리 정해진 양의 기본 공간을 설정하는 것입니다.
body {
margin: 0;
margin-bottom: 20rem;
}
CSS 그리드를 사용하여 가장 바깥쪽 컨테이너에 대한 2차원 레이아웃을 만들려면 먼저 그리드를 이러한 그리드로 변환해야 합니다. 이 과정에는 그리드에 포함할 열 또는 행 수를 지정하는 작업이 포함되며, 최소 너비 요구 사항은 300픽셀, 최대 너비 제한은 컨테이너 전체 너비의 1/입니다.
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
텍스트가 배치된 컨테이너와 정렬되도록 하려면 이미지가 포함된 래퍼 요소를 기준으로 텍스트의 위치를 설정해야 합니다.
.image-wrapper {
position: relative;
overflow: hidden;
}
먼저 이미지를 블록 수준 요소로 표시하고, 두 번째로 너비를 부모 컨테이너의 너비와 일치하도록 설정하고, 마지막으로 ‘align-items’ 및 ‘justify-content’ 값과 함께 CSS ‘flex’ 속성을 사용하여 컨테이너 내에서 이미지를 가로 및 세로 모두 가운데에 배치합니다.
.image-wrapper > img {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
object-position: center;
}
투명한 옅은 회색 배경을 사용하여 화면 중앙에 텍스트를 배치하여 경쾌한 분위기를 연출합니다.
.image-wrapper > .content {
position: absolute;
inset: 0;
font-size: 2rem;
padding: 1rem;
background: rgba(255, 255, 255, .4);
display: flex;
align-items: center;
justify-content: center;
}
웹 브라우저에서 저장된 CSS 파일을 확인하면 그림과 유사한 웹페이지가 나타납니다.
이미지와 텍스트에 전환 설정
다음 단계는 애니메이션을 시각적 요소에 통합하는 것입니다. 우선, 두 개의 일러스트레이션에 함께 제공되는 캡션과 함께 매끄러운 전환을 적용합니다.
.image-wrapper > img,
.image-wrapper > .content {
transition: 200ms ease-in-out;
}
페이드인, 줌, 블러를 포함한 모든 전환 효과는 200밀리초 동안 지속되어야 하며 동일한 타이밍 곡선을 따라야 합니다.
페이드인 및 블러 애니메이션
초기 애니메이션 기법에는 CSS 애니메이션을 활용하여 미묘한 시각 효과를 만드는 것이 포함됩니다. 시작 값이 0인 “불투명도” 속성을 적용하고 마우스가 이미지 컨테이너와 상호 작용할 때 1로 전환하면 이 작업을 수행할 수 있습니다.
.image-wrapper > .content.fade {
opacity: 0;
}
.image-wrapper:hover > .content.fade {
opacity: 1;
}
페이드인 애니메이션의 구현은 파일을 저장하고 웹 브라우저에서 열면 확인할 수 있습니다. 그러나 이미지의 높은 대비로 인해 텍스트를 해독하기 어려울 수 있습니다. 모든 이미지에는 “흐림”이라는 클래스 속성이 포함되어 있으며, 이는 이미지를 흐리게 처리하여 이미지와 텍스트를 구분하기 위한 목적으로 사용됩니다.
image-wrapper:hover > img.blur {
filter: blur(5px)
}
마우스 포인터를 사용하여 이미지와 상호 작용하면 시각적 표현이 가려집니다. 디지털 해상도를 조정하면 이 효과의 강도를 높일 수 있으며, 그 결과 사진과 함께 제공되는 텍스트가 더욱 뚜렷하게 구분됩니다.
기타 효과 추가
텍스트를 왼쪽 여백으로 이동하고 시각적 콘텐츠의 배율을 조정하고 회색조로 변환하는 다음 코드를 구현하면 앞서 언급한 결과를 얻을 수 있습니다.
.image-wrapper > .content.slide-left {
transform: translateX(100%)
}
.image-wrapper:hover > .content.slide-left {
transform: translateX(0%)
}
.image-wrapper:hover > img.grey {
filter: greyscale(1)
}
.image-wrapper:hover > img.blur {
filter: blur(5px)
}
.image-wrapper:hover > img.zoom {
transform: scale(1.1)
}
파일을 저장한 후 웹 브라우저로 이동하여 각 이미지 위에 마우스를 올려 다양한 효과가 작동하는 것을 확인하시기 바랍니다.
슬라이드 인 효과를 얻으려면 이미지와 텍스트로 구성된 3개의 이미지 컨테이너를 추가로 만들 수 있습니다. 이러한 텍스트 조각에는 ‘슬라이드 업’, ‘슬라이드 다운’ 또는 ‘약간 오른쪽’ 세 가지 클래스 중 하나를 할당해야 합니다. 그런 다음 ‘transform()’ 함수 내에서 적절한 단위(픽셀, 엠 또는 렘)를 사용하여 세 가지 변형 효과를 모두 생성합니다.
CSS 그리드와 플렉스박스
CSS 그리드와 플렉스박스는 모두 복잡한 웹 레이아웃을 만들 수 있는 강력한 도구를 제공하지만, 잠재력을 극대화하려면 각 기능의 고유한 강점을 이해하는 것이 중요합니다. 행과 열을 마음대로 조작할 수 있는 이러한 레이아웃 시스템을 통해 개발자는 특정 디자인 요구사항에 맞는 맞춤형 배열을 만들 수 있습니다. 또한 이러한 프레임워크에서 열의 자동 반응성은 최신 웹 개발에서 없어서는 안 될 자산입니다. 상위 1% 이내의 뛰어난 CSS 개발자가 되기 위해서는 두 가지 프레임워크를 구분하는 것이 필수적입니다.