테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

DIV 안에 텍스트를... 채택완료

달콤이쨈 11년 전 조회 8,234
답변 6
목록

 

 

사진과 같이

 

전체그림DIV가 있고

 

그안에 DIV를 넣어주는게 맞는지???

 

맛있는 돈까스 부분과

날짜 부분을 표현하고 싶은데요

 

어떻게 스타일을 줘서 표현 해야될까요?

 

그림DIV이 부모고 그 안에 텍스트가 자식입니다~

 

도와주세요~ㅜ

#그누보드4 #css
댓글을 작성하려면 로그인이 필요합니다.

답변 6개

채택된 답변
+20 포인트
쟁
쟁반짜장
11년 전

</p><p><p style="position:relative;">
    <img src="<a href="<a href="http://sir.co.kr/data/thumb/qa/34306-2e4885eb683d1da7b44ae1b0fa618c50.jpg" target="_blank" rel="noopener noreferrer">http://sir.co.kr/data/thumb/qa/34306-2e4885eb683d1da7b44ae1b0fa618c50.jpg</a>"><a href="http://sir.co.kr/data/thumb/qa/34306-2e4885eb683d1da7b44ae1b0fa618c50.jpg" target="_blank" rel="noopener noreferrer">http://sir.co.kr/data/thumb/qa/34306-2e4885eb683d1da7b44ae1b0fa618c50.jpg</a></a>" />
    <p style="position:absolute; top:20px; left:20px;">맛있는 돈까스</p>
</p></p><p>

 

이렇게 해 주시면 될 거 같아요. 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�
달콤이쨈
11년 전
<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>

이렇게 했을경우
가로폭이 가변일때 맛있는 돈까스 부분도 같이 가변가로폭으로 적용은 어떻게 해야할까요?ㅠ

포지션부분일것 같은데 감이 안옵니다~ 도와주세요~

댓글을 작성하려면 로그인이 필요합니다.

A
Arealman
11년 전

아~ 폰트사이즈를 vw로 잡으니 되네요~~~ 

감사합니다~

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

A
Arealman
11년 전

 <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>  

 

이렇게 해도 안되네요.ㅠㅠ

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�
왕계란
11년 전
정확하게 어떠한 모양을 원하시는지 자세하게 설명 부탁 드립니다.
이미지 세 장 첨부하신 걸 보면 첫 번째가 원본이고 다른 사진은 원본 이미지를 %로 키우신 건가요?
저렇게 이미지가 커지면 텍스트도 따라서 커지는 건지 아니면 위치가 바뀌어야 하는 건지...
그것도 아니면 위치, 크기 다 바뀌어야 하는지

댓글을 작성하려면 로그인이 필요합니다.

A
Arealman
11년 전

 

 

 

1번째가 기본넓이인 크기라면

 

기본넒이(가로폭)가 넓어 지면  

 

3번째 그림처럼 %를 줘서 같이 늘어나지도

위치도 변해서요~ㅜ


 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�
왕계란
11년 전
가변적으로 늘어날 경우는 끼룩끼룩 님이 말씀하신 것처럼 font-size랑 left, top에도 %를 줘서 변하게 하셔야 하겠네요.

댓글을 작성하려면 로그인이 필요합니다.

끼
끼룩끼룩
11년 전

div 로 http://sir.co.kr/data/thumb/qa/34306-2e4885eb683d1da7b44ae1b0fa618c50.jpg">http://sir.co.kr/data/thumb/qa/34306-2e4885eb683d1da7b44ae1b0fa618c50.jpg​ 를 배경이미지로 주고

 

가운데 정렬 ( margin: 0 auto; ) 


혹은


글자 스타일에 left:30% 식으로 주면 좌측으로 30%씩 여백이 주어지니..

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

쟁
쟁반짜장
11년 전

텍스트를 얹을 이미지 너비는 알고 있지 않나요?

거기에 적당히 left, top 조절하면 될 거 같은데...

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�
달콤이쨈
11년 전
이미지가 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>

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인