웹 디자인을 하다 보면 이미지 위에 텍스트를 겹쳐서 표시해야 하는 경우가 자주 있습니다. 예를 들어, 갤러리의 이미지 설명이나 배너의 캡션을 오른쪽 하단 모서리에 배치하고 싶을 때가 있죠.
핵심 원리: position 속성 활용하기
이미지의 오른쪽 하단에 텍스트를 배치하려면 CSS의 position 속성을 조합하여 사용합니다. 핵심 원리는 다음과 같습니다.
- 부모 요소:
position: relative;를 적용하여 기준점 역할을 하도록 설정합니다. - 텍스트 요소:
position: absolute;를 적용한 뒤,bottom과right속성으로 위치를 지정합니다.
bottom 값은 텍스트가 부모 요소 아래쪽에서 얼마나 떨어질지, right 값은 오른쪽에서 얼마나 떨어질지를 결정합니다. 이 두 값을 조절하면 원하는 위치에 정확하게 텍스트를 놓을 수 있습니다.
실전 예제 코드
아래 예제는 이미지의 오른쪽 하단 모서리에 텍스트를 배치하는 전체 코드입니다. 직접 실행해 보면서 결과를 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
position: relative;
}
img {
width: 100%;
height: auto;
opacity: 0.6;
}
.direction {
position: absolute;
bottom: 10px;
right: 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">Bottom Right Corner</div>
</div>
</body>
</html>
코드 상세 설명
1. 컨테이너(.box) 설정
.box 클래스에 position: relative;를 선언했습니다. 이렇게 하면 내부의 절대 위치(absolute) 요소들이 이 div를 기준으로 배치됩니다. 이 단계가 없으면 텍스트가 화면 전체를 기준으로 배치되어 의도와 다른 결과가 나올 수 있습니다.
2. 이미지 스타일링
이미지는 width: 100%로 반응형 처리했고, opacity: 0.6으로 약간 투명하게 만들어 텍스트가 더 잘 보이도록 했습니다. 실무에서는 필요에 따라 이 값을 조정하면 됩니다.
3. 텍스트(.direction) 위치 지정
.direction 클래스가 핵심입니다. position: absolute;로 절대 위치를 지정하고, bottom: 10px;와 right: 19px;를 통해 오른쪽 하단에서 각각 10px, 19px만큼 안쪽으로 떨어진 곳에 텍스트를 배치합니다.
응용 팁
- 왼쪽 하단에 배치하려면
right대신left속성을 사용하세요. - 오른쪽 상단에 배치하려면
bottom대신top속성을 사용하세요. - 텍스트 가독성을 높이려면 배경색(
background-color)이나 반투명 오버레이를 추가하는 것도 좋은 방법입니다.
이처럼 position: relative와 position: absolute의 조합은 이미지 위에 텍스트를 배치하는 가장 기본적이면서도 강력한 기법입니다. 다양한 값으로 실험해 보면서 원하는 레이아웃을 완성해 보세요.