웹 페이지에서 이미지 위에 제목이나 설명 같은 텍스트 블록을 얹고 싶다면 CSS의 position 속성을 활용하면 됩니다. 핵심 원리는 간단합니다. 이미지를 감싸는 부모 요소에는 position: relative를 지정해 기준점을 만들고, 텍스트 블록에는 position: absolute를 적용한 뒤 bottom, right 같은 좌표 값으로 원하는 위치에 배치하는 것입니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.imageContainer {
display: inline-block;
position: relative;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}
.captionBlock {
position: absolute;
bottom: 20px;
right: 20px;
background-color: rgb(14, 0, 94);
color: rgb(255, 255, 255);
padding-left: 20px;
padding-right: 20px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
</style>
</head>
<body>
<h1>이미지 텍스트 블록 예제</h1>
<div class="imageContainer">
<img src="https://i.picsum.photos/id/59/500/500.jpg" alt="자연 풍경" style="width:100%;">
<div class="captionBlock">
<h3>풍경</h3>
<h4>땅 위의 울타리</h4>
</div>
</div>
</body>
</html>
실행 결과
위 코드를 실행하면 이미지의 오른쪽 하단에 짙은 남색 배경의 흰색 캡션 블록이 나타납니다.
코드 설명
- .imageContainer:
display: inline-block으로 이미지 크기에 맞춰 컨테이너 폭을 조절하고,position: relative를 지정해 내부 절대 위치 요소들의 기준점 역할을 합니다. - .captionBlock:
position: absolute로 컨테이너를 기준으로 배치되며,bottom: 20px과right: 20px설정 덕분에 이미지 우측 하단에서 20px 떨어진 위치에 고정됩니다.
이처럼 부모 요소에 relative, 자식 요소에 absolute를 조합하면 이미지의 어느 위치든 자유롭게 텍스트를 올릴 수 있습니다. top, left 값을 변경하거나 배경색과 패딩을 조절해 다양한 스타일의 캡션을 만들어 보세요.