이미지위에 텍스트 넣기
본문
안녕하세요. 이미지위에 텍스트를 넣고 싶은데.
한 이미지에 그림1, 그림2, 그림3 형식으로 되어있어서 각각 그림1쪽에 텍스트 그림2쪽에 텍스트를
각각 넣어서 텍스트를 보여줘야 하는데. 한 그림 파일에 이미지가 3개 들어가 있습니다.
오버레이? 머 이건 전체 한 이미지에만 할수 있는거 같은데.. 저는 한이미지 안에 그림이 3개가 있어서
그림옆에다 텍스트를 넣고 싶거든요..
방법이 있을까요?
답변 3
이미지를 div 감싸고 스타일 position:relative 로 하세요.
div 안에 텍스트용 div 넣고 해당 스타일을 position:absolute 로 하시고 top, left, bottom, rigth 등을 이용해서 위치를 잡아주시면 됩니다.
이미지를 편집해서 세개로 나누신다음 다음과 같이 작업하시면 될것 같습니다
<style>
.img_box:after{content:''; display : table; clear : both; }
.img_wrap{float : left; }
.text_wrap{float:left;}
</style>
<div class="img_box">
<div class="img_wrap">
<img src="이미지 경로">
</div>
<div class="text_wrap">
작성할 텍스트
</div>
</div>
아래 좌표글 공부하시면 스스로 해결하실 수 있을 겁니다.
https://homzzang.com/b/css-33 (background-image)
https://homzzang.com/b/css?sca=position (position, z-index)
https://homzzang.com/b/css-256 (요소 배치)
