이미지 위에 텍스트를 왼쪽 하단에 배치하려면 CSS의 position 속성과 함께 bottom 및 left 속성을 사용하면 됩니다.
핵심 원리
텍스트를 이미지 위에 자유롭게 배치하려면 먼저 부모 요소(이미지를 감싸는 컨테이너)에 position: relative;를 지정해야 합니다. 그다음 텍스트가 들어 있는 요소에는 position: absolute;를 적용하고, bottom 값과 left 값을 조절하여 원하는 위치인 왼쪽 하단에 배치할 수 있습니다.
- position: relative; — 부모 컨테이너의 기준점을 설정합니다.
- position: absolute; — 텍스트 요소를 부모 기준으로 절대 위치시킵니다.
- bottom: 10px; — 아래쪽에서 10px 떨어진 곳에 배치합니다.
- left: 19px; — 왼쪽에서 19px 떨어진 곳에 배치합니다.
예제 코드
아래 코드를 실행하면 이미지의 왼쪽 하단에 텍스트가 배치된 결과를 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
position: relative;
}
img {
width: 100%;
height: auto;
opacity: 0.6;
}
.direction {
position: absolute;
bottom: 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">Bottom Left Corner</div>
</div>
</body>
</html>코드 설명
위 예제에서 .box 클래스는 이미지와 텍스트를 감싸는 컨테이너 역할을 하며, position: relative; 덕분에 내부의 절대 위치 요소들이 이 박스를 기준으로 배치됩니다. 이미지에는 opacity: 0.6;을 적용해 약간 반투명하게 만들어 텍스트가 더 잘 보이도록 했습니다.
.direction 클래스가 실제로 왼쪽 하단에 표시되는 텍스트입니다. bottom과 left 값을 변경하면 텍스트의 세밀한 위치를 자유롭게 조정할 수 있습니다. 예를 들어 오른쪽 하단에 배치하고 싶다면 left 대신 right 속성을 사용하면 됩니다.