웹 페이지에서 이미지 위에 텍스트를 겹쳐 표시해야 하는 경우가 자주 있습니다. 예를 들어 배너 이미지에 라벨을 붙이거나, 썸네일에 카테고리 이름을 표시하는 것이 대표적입니다. 이럴 때 CSS의 position 속성을 활용하면 간단하게 해결할 수 있습니다.
핵심 원리: relative와 absolute의 조합
텍스트를 이미지의 왼쪽 상단에 배치하려면 top과 left 속성을 사용합니다. 여기서 중요한 점은 두 가지입니다.
- 텍스트를 감싸는 부모 요소(컨테이너)에는 position: relative;를 지정합니다.
- 이미지 위에 올릴 텍스트 요소에는 position: absolute;를 지정하고, top과 left 값으로 위치를 조절합니다.
부모가 기준점 역할을 하기 때문에, absolute로 지정된 텍스트는 부모 컨테이너를 기준으로 원하는 위치에 정확히 배치됩니다.
예제 코드
아래 예제는 이미지의 왼쪽 상단 모서리에 'Top Left Corner'라는 텍스트를 배치하는 전체 코드입니다. 직접 실행해 보면서 결과를 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
position: relative;
}
img {
width: 100%;
height: auto;
opacity: 0.6;
}
.direction {
position: absolute;
top: 10px;
left: 19px;
font-size: 13px;
}
</style>
</head>
<body>
<h1>Heading One</h1>
<p>아래 이미지에는 왼쪽 상단에 텍스트가 표시됩니다:</p>
<div class = "box">
<img src = "https://www.tutorialspoint.com/python/images/python_data_science.jpg" alt = "Tutorial" width = "800" height = "400">
<div class = "direction">Top Left Corner</div>
</div>
</body>
</html>코드 설명
1. 부모 컨테이너 (.box)
.box 클래스에 position: relative;를 적용했습니다. 이렇게 하면 이 div가 자식 요소들의 위치 기준점이 됩니다.
2. 이미지 스타일 (img)
이미지는 width: 100%와 height: auto로 반응형으로 설정했으며, opacity: 0.6을 적용해 텍스트가 더 잘 보이도록 약간 투명하게 처리했습니다. 실무에서는 필요에 따라 이 값을 조정하거나 생략해도 됩니다.
3. 텍스트 위치 (.direction)
.direction 클래스가 핵심입니다. position: absolute;로 설정한 뒤 top: 10px;, left: 19px; 값을 주어 이미지의 왼쪽 상단에서 각각 10px, 19px 떨어진 위치에 텍스트를 배치합니다. 이 숫자들을 조절하면 원하는 위치로 자유롭게 옮길 수 있습니다.
응용 팁
- 오른쪽 상단:
right: 10px; top: 10px;처럼 right 속성을 사용하면 됩니다. - 중앙 정렬:
left: 50%; transform: translateX(-50%);조합을 활용하세요. - 가독성 향상: 텍스트 배경에 반투명 색상(
background: rgba(0,0,0,0.5);)을 추가하면 이미지 위에서도 글자가 잘 읽힙니다.
이 방법은 최신 브라우저에서 모두 지원되므로 별도의 라이브러리 없이 순수 CSS만으로 손쉽게 구현할 수 있습니다.