HTML 이미지 위에 텍스트 오버레이 - HTML imiji wie tegseuteu obeolei

이미지(사진) 위에 글자(문장)가 겹쳐지게 표현하는 방법에 대해 알아보겠습니다.

목차 Show

1. HTML 소스는 다음과 같이 구현합니다.
2. CSS 소스는 다음과 같이 구현합니다.
3. 구현에 필요한 이미지 파일
4. 실제 결과물 확인

마치 글자가 포함된 이미지를 만들어 사용하는 효과를 볼 수 있습니다.

배경 이미지는 동일하고 글자 내용이 매번 바뀌는 경우,

그럴때마다 새로 이미지를 만들어 줄 필요없이 이미지 위에 글자를 겹쳐 나타나게 하면 간단하게 해결 됩니다.

예) 후원금 알림 게시글 작성할때 감사의 배경이미지를 하나 만들어 놓고,

후원자의 이름과 후원금액만 정해진 위치에 표시 되도록 하면 매번 이미지를 만들 필요가 없어지게 됩니다.

style의 값들을 적당히 변경하여 원하는 위치에 원하는 형태의 내용을 표시할 수 있습니다.

원하는 적당한 위치를 지정하면 이 글이 그 위치에 나타남.

이미지 위에 겹쳐서 나타남.

</div>

원하는 적당한 위치를 지정하면 이 글이 그 위치에 나타남.

이미지 위에 겹쳐서 나타남.

</div>

.....

이 글이 도움이 되었기를 바랍니다. ^-^

공감♡ 클릭과 댓글은 글쓰기에 큰 힘이 됩니다.

요즘 포털사이트의 뉴스란이나 스타트업 사이트에 가시면 많이들 보시는 화면입니다. 사진갤러리나 포트폴리오 사이트에서도 많이 볼 수 있구요.

많이 쓰이는 기법이기 때문에 구현하는 방법을 알아보기로 합니다.

1. HTML 소스는 다음과 같이 구현합니다.

<div class="imgTopic">
 <h2 class="title"><a href="#">큰 제목</a></h2>
 <p class="content"><a href="#"><img src="./image.jpg" alt="" /><span class="date">2013년02월27일 오후3:00</span></a></p>
</div>

이는 이미지 갤러리형 최근게시물등 용도에 따라 약간씩 소스가 변경될 수 있긴합니다만,기본적인 원리와 구조는 동일합니다. 저는 네이트뉴스(news.nate.com) 메인화면에 나와있는 방식을 기준으로 설명하겠습니다.

2. CSS 소스는 다음과 같이 구현합니다.

html, body, h2, p, a {padding:0;margin:0;line-height:1} img {border: 0} div.imgTopic {position:relative;width:300px;height:200px;font-family:’Dotum’,’돋움’,sansserif;border: 1px solid #eee} div.imgTopic a {text-decoration: none} h2.title {position:absolute;z-index:1;left:5px;bottom:30px} h2.title a{font-size:18px;font-weight:bold;color:#fff;} h2.title a:hover, h2.title a:focus {text-decoration:underline;} p.content a {font-size:11px;color:#ccc;} span.date {position:absolute;display:block;left:0;bottom:0;width:295px;height:25px;padding:35px 0 0 5px;background:url(‘./blackOpacity.png’) repeat;}