CSS에서 텍스트를 이미지의 오른쪽 상단에 배치하려면 top 속성과 right 속성을 함께 활용하면 됩니다. 핵심은 부모 요소에 position: relative를 지정하고, 텍스트가 들어갈 자식 요소에는 position: absolute를 적용하는 것입니다.
핵심 원리 이해하기
position: relative는 부모 컨테이너를 위치 기준점으로 만들어 줍니다. 그런 다음 자식 요소에 position: absolute를 선언하고 top과 right 값으로 각각 상단과 우측에서 얼마나 떨어질지 지정하면, 텍스트가 이미지 위의 정확한 위치에 자유롭게 배치됩니다.
예제 코드
다음 코드를 실행하면 이미지의 오른쪽 상단 모서리에 텍스트가 표시됩니다:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
position: relative;
}
img {
width: 100%;
height: auto;
opacity: 0.6;
}
.direction {
position: absolute;
top: 10px;
right: 19px;
font-size: 13px;
}
</style>
</head>
<body>
<h1>제목 1</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">오른쪽 상단</div>
</div>
</body>
</html>코드 설명
.box 클래스는 이미지와 텍스트를 감싸는 컨테이너로, position: relative가 적용되어 자식 요소의 위치 기준점 역할을 합니다.
.direction 클래스는 실제로 화면에 표시되는 텍스트 영역입니다. position: absolute로 절대 위치가 지정되며, top: 10px는 상단에서 10픽셀, right: 19px는 우측에서 19픽셀 떨어진 곳에 텍스트를 배치합니다.
또한 이미지에는 opacity: 0.6이 적용되어 약간 반투명하게 처리되므로, 겹쳐진 텍스트가 더욱 잘 보입니다. 필요에 따라 font-size, 색상 등의 스타일을 추가하여 텍스트 가독성을 높일 수 있습니다.