DIV 안에 텍스트를...
본문
사진과 같이
전체그림DIV가 있고
그안에 DIV를 넣어주는게 맞는지???
맛있는 돈까스 부분과
날짜 부분을 표현하고 싶은데요
어떻게 스타일을 줘서 표현 해야될까요?
그림DIV이 부모고 그 안에 텍스트가 자식입니다~
도와주세요~ㅜ
답변 6
<p style="position:relative;">
<img src="http://sir.co.kr/data/thumb/qa/34306-2e4885eb683d1da7b44ae1b0fa618c50.jpg" />
<p style="position:absolute; top:20px; left:20px;">맛있는 돈까스</p>
</p>
이렇게 해 주시면 될 거 같아요.
<p style="position:relative;">
<img src="http://sir.co.kr/data/thumb/qa/34306-2e4885eb683d1da7b44ae1b0fa618c50.jpg" />
<p style="position:absolute; top:20px; left:20px;">맛있는 돈까스</p>
</p>
이렇게 했을경우
가로폭이 가변일때 맛있는 돈까스 부분도 같이 가변가로폭으로 적용은 어떻게 해야할까요?ㅠ
포지션부분일것 같은데 감이 안옵니다~ 도와주세요~
텍스트를 얹을 이미지 너비는 알고 있지 않나요?
거기에 적당히 left, top 조절하면 될 거 같은데...
이미지가 100% 로 설정이 되있어서요~ 가로폭이 디바이스 종류 따라 변할때 글씨부분도 위치가 같이 변해줘야되는데 따로 따로 놀아서요 ~
<div style="position:relative;">
<img src="http://sir.co.kr/data/thumb/qa/34306-2e4885eb683d1da7b44ae1b0fa618c50.jpg" width="100%" border="0">
<p style="position:absolute; background-color: rgba(0,0,0,0.6); color:white; font-size:1.6em; font-weight:bold; top:20%; left:5%;">맛있는 돈까스</p>
<p style="position:absolute; background-color: rgba(0,0,0,0.6); color:white; font-size:1.0em; font-weight:bold; top:10%; left:5%;">날짠가?<p>
div 로 http://sir.co.kr/data/thumb/qa/34306-2e4885eb683d1da7b44ae1b0fa618c50.jpg 를 배경이미지로 주고
가운데 정렬 ( margin: 0 auto; )
혹은
글자 스타일에 left:30% 식으로 주면 좌측으로 30%씩 여백이 주어지니..
1번째가 기본넓이인 크기라면
기본넒이(가로폭)가 넓어 지면
3번째 그림처럼 %를 줘서 같이 늘어나지도
위치도 변해서요~ㅜ
가변적으로 늘어날 경우는 끼룩끼룩 님이 말씀하신 것처럼 font-size랑 left, top에도 %를 줘서 변하게 하셔야 하겠네요.
<p style="position:absolute; background-color: rgba(0,0,0,0.6); color:white; font-size:100%; font-weight:bold; top:20%; left:5%;">제목</p>
<p style="position:absolute; background-color: rgba(0,0,0,0.6); color:white; font-size:100%; font-weight:bold; top:10%; left:5%;">날짜</p>
이렇게 해도 안되네요.ㅠㅠ
정확하게 어떠한 모양을 원하시는지 자세하게 설명 부탁 드립니다.
이미지 세 장 첨부하신 걸 보면 첫 번째가 원본이고 다른 사진은 원본 이미지를 %로 키우신 건가요?
저렇게 이미지가 커지면 텍스트도 따라서 커지는 건지 아니면 위치가 바뀌어야 하는 건지...
그것도 아니면 위치, 크기 다 바뀌어야 하는지
아~ 폰트사이즈를 vw로 잡으니 되네요~~~
감사합니다~
