[HTML/CSS] 이미지 위에 글자 띄우기

Posion의 절대위치·상대위치 활용하기

Feb 26, 2013

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

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

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

<div class="imgTopic">
 <h1 class="title"><a href="#">큰 제목</a></h1>
 <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, h1, 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} h1.title {position:absolute;z-index:1;left:5px;bottom:30px} h1.title a{font-size:18px;font-weight:bold;color:#fff;} h1.title a:hover, h1.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;}

3. 구현에 필요한 이미지 파일

포토샵에서 1px x 1px 도큐먼트를 생성합니다.
백그라운드를 레이어로 전환하고 배경을 블랙으로 채웁니다.
해당 레이어의 투명도를 50%로 지정한 뒤 blackOpacity.png 이름으로 저장합니다.

사실 이렇게 까지 안하고도 ::before 가상클래스나 rgba를 통해 구현 가능합니다만,
구형 브라우저 지원을 기준으로 작성된 점 참고 바랍니다.

가장 쉬운방법은 span.date에 background 이미지를 주는 것 대신,
background: rbga(0, 0, 0, .5); 를 주시면 됩니다.

4. 실제 결과물 확인

약간 네이트 뉴스와 구현방법이 틀린데요,
공통적인 부분은 네이트나 제가 재현한 방법 모두 Position을 사용했다는 것입니다.

이러한 방법을 사용하는 이유는 여러 콘텐츠들이 많이 위치하는 웹페이지에서 일일이 위치를 지정해 주기가 쉽기 않기 때문인데요,
상대위치를 잡아주고 그 안의 내용물에 절대위치를 잡아주면 상대위치로 부터 X·Y의 값이 0부터 시작하므로 쉽게 잡을 수 있습니다.

이와 같은 원리로 사이트에서 좌우구분을 나눌 때 사용하는 float 속성을 대체해서 사용할 수 있습니다. Position 속성에 대해 아주 친절하게 설명한 포스팅이 있으므로 궁금하신 분들은 여기(http://codebuzz.net/16)에서 참고하시면 좋습니다.