라이트박스(Lightbox)는 웹페이지에서 썸네일 이미지를 클릭하면 화면 위에 큰 이미지가 나타나는 UI 패턴입니다. CSS와 JavaScript만으로도 별도의 라이브러리 없이 세련된 라이트박스 애니메이션을 구현할 수 있습니다.
아래 예제에서는 CSS의 :target 선택자와 트랜지션(transition)을 활용하여, 작은 썸네일을 클릭하면 부드럽게 확대되는 라이트박스 효과를 만들어 보겠습니다. 닫기 버튼 역시 CSS만으로 X 모양을 그려내고, 클릭 시 자연스러운 애니메이션과 함께 사라지도록 구성했습니다.
주요 구현 포인트
- :target 선택자 활용: URL 해시(#picture)가 일치할 때 라이트박스가 열리도록 처리합니다.
- 부드러운 전환 효과:
transition속성으로 이미지 크기 변화에 이징(ease-in-out) 효과를 적용합니다. - CSS로 그린 닫기 버튼:
:before,:after가상 요소와 45도 회전을 조합해 X(닫기) 아이콘을 만듭니다.
예제 코드
<!DOCTYPE html>
<html>
<style>
#parent {
margin: 2%;
padding: 0;
box-sizing: border-box;
background: cornflowerblue;
text-align: center;
}
html,body {
height:100%;
max-height:100%;
min-height:100%;
}
.smart {
display: block;
margin: 0 auto;
width: 150px;
height :150px;
}
.animation2 {
-webkit-transition: .4s ease-in-out;
-moz-transition: .4s ease-in-out;
-ms-transition: .4s ease-in-out;
-o-transition:.4s ease-in-out;
transition:.4s ease-in-out;
}
.customLightbox img {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-width: 0%;
max-height: 0%;
}
#lightbox-controls {
position: fixed;
height: 70px;
width: 70px;
top: -70px;
right: 0;
z-index: 2;
background: rgba(0,0,0,.1);
}
#close-lightbox {
display: block;
position: absolute;
overflow: hidden;
height: 50px;
width: 50px;
text-indent: -5000px;
right: 10px;
top: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#close-lightbox:before {
content: '';
display: block;
position: absolute;
height: 0px;
width: 3px;
left: 24px;
top :0;
background: white;
}
#close-lightbox:after {
content: '';
display: block;
position: absolute;
width: 0px;
height: 3px;
top: 24px;
left:0;
background: white;
}
.customLightbox:target {
top: 0%;
bottom: 0%;
opacity: 1;
}
.customLightbox:target img {
max-width: 100%;
max-height: 100%;
}
.customLightbox:target ~ #lightbox-controls {
top: 0px;
}
.customLightbox:target ~ #lightbox-controls #close-lightbox:after {
width: 50px;
}
.customLightbox:target ~ #lightbox-controls #close-lightbox:before {
height: 50px;
}
@-webkit-keyframes smart {
0% {
-webkit-transform: rotate(2deg);
}
20% {-webkit-transform: rotate(-2deg);}
40% {-webkit-transform: rotate(2deg);}
60% {-webkit-transform: rotate(-2deg);}
80% {-webkit-transform: rotate(2deg);}
100% {-webkit-transform: rotate(-2deg);}
}
</style>
<body>
<div id="parent">
<h3>Lightbox Example</h3>
<a href="#picture" class="smart"><img src="https://images.unsplash.com/photo1611460116297-
586f43de8ba8?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=130&ixlib=rb1.2.1&q=80&w=130"/>
<div class="customLightbox" id="picture">
<img class="animation2" src="https://images.unsplash.com/photo-1611460116297-
586f43de8ba8?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=630&ixlib=rb1.2.1&q=80&w=630"/>
</div>
<div id="lightbox-controls" >
<a id="close-lightbox" class="animation2" href="#">Close Lightbox</a>
</div>
</div>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
동작 원리 정리
처음에는 라이트박스 내부 이미지의 max-width와 max-height가 0%로 설정되어 화면에 보이지 않습니다. 썸네일 링크(#picture)를 클릭하면 :target 상태가 활성화되면서 이미지 크기가 100%로 커지고, 이 과정에서 transition 덕분에 부드러운 확대 애니메이션이 연출됩니다.
동시에 형제 선택자(~)를 통해 닫기 컨트롤 영역이 화면 상단으로 슬라이드되어 나타나며, 닫기 버튼의 두 개의 선이 회전된 상태로 길어지면서 X자 형태가 완성됩니다. 닫기 버튼을 누르면 해시가 제거되어 :target 상태가 해제되고, 라이트박스가 다시 사라집니다.
이처럼 JavaScript 없이 순수 CSS만으로도 인터랙티브한 라이트박스를 만들 수 있으며, 여기에 JavaScript를 더하면 키보드 조작, 여러 이미지 갤러리 탐색 등 더욱 풍부한 기능을 손쉽게 확장할 수 있습니다.