방법 - 이미지 위에 텍스트 배치
이미지 위에 텍스트를 배치하는 방법을 알아봅니다.
이미지 텍스트
왼쪽 하단
왼쪽 상단
맨 위 오른쪽
오른쪽 하단
중앙
이미지에 텍스트를 배치하는 방법
1단계) HTML 추가:
예시
<div class="container">
<img src="img_snow_wide.jpg" alt="Snow"
style="width:100%;">
<div class="bottom-left">Bottom Left</div>
<div class="top-left">Top Left</div>
<div class="top-right">Top
Right</div>
<div class="bottom-right">Bottom Right</div>
<div class="centered">Centered</div>
</div>
2단계) CSS 추가:
예시
/* Container holding the image and the text */
.container {
position: relative;
text-align: center;
color: white;
}
/* Bottom
left text */
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
/* Top left text */
.top-left {
position:
absolute;
top: 8px;
left: 16px;
}
/* Top right text */
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
/* Bottom right text */
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
/* Centered text
*/
.centered {
position:
absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
이미지 스타일을 지정하는 방법에 대해 자세히 알아보려면 CSS 이미지 자습서를 읽어보세요.
CSS 포지셔닝 에 대해 자세히 알아보려면 CSS Position 튜토리얼을 읽어보세요.