CSS로 이미지 위에 버튼 배치하기
웹 디자인에서 이미지 중앙에 버튼을 배치하는 것은 배너, 갤러리, 클릭 유도(CTA) 요소 등에서 자주 사용되는 기법입니다. CSS의 position 속성과 transform 속성을 활용하면 이미지의 정중앙에 버튼을 손쉽게 배치할 수 있습니다.
핵심 원리
이 기법은 두 가지 CSS 개념을 기반으로 합니다.
- position: relative와 absolute: 부모 컨테이너(
.box)를relative로 설정하고, 버튼을absolute로 지정하면 버튼이 이미지 위에 겹쳐지게 됩니다. - transform: translate(-50%, -50%):
top: 50%,left: 50%만 적용하면 버튼의 왼쪽 상단 모서리가 중앙에 위치하게 됩니다. 여기서translate(-50%, -50%)를 추가하면 버튼 자체의 크기만큼 보정되어 완벽하게 정중앙에 정렬됩니다.
예제 코드
아래 코드를 실행하여 이미지 위에 버튼을 배치하는 방법을 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
position: relative;
width: 100%;
max-width: 250px;
}
.box img {
width: 100%;
height: auto;
}
.box .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="box">
<img src="https://www.tutorialspoint.com/videotutorials/images/current_affairs_home.jpg" alt="Current Affairs">
<button class="btn">Button</button>
</div>
</body>
</html>
코드 설명
- .box: 이미지와 버튼을 감싸는 컨테이너입니다.
max-width: 250px로 최대 너비를 제한하고,position: relative로 자식 요소인 버튼의 위치 기준점 역할을 합니다. - .box img: 이미지가 컨테이너 너비에 맞춰 반응형으로 표시되도록
width: 100%를 설정합니다. - .box .btn: 버튼을 절대 위치로 지정한 뒤,
top과left를 50%로 설정하고translate(-50%, -50%)로 중앙 정렬합니다.
활용 팁
버튼에 마우스를 올렸을 때 시각적 효과를 추가하면 사용자 경험을 더욱 향상시킬 수 있습니다. 예를 들어 다음과 같은 스타일을 추가해 보세요.
.box .btn {
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.box .btn:hover {
background-color: rgba(0, 0, 0, 0.9);
}
이처럼 CSS만으로도 별도의 JavaScript 없이 이미지 위에 버튼을 자유롭게 배치하고 스타일링할 수 있습니다.