Background를 활용해 보아요.의 두번째 예제입니다.
제로보드 시스템에서 흔히 쓰던 최근글 표시와 비슷한 것이랍니다.

설명

index 화면 등에 타이틀이 있는 링크 리스트를 표시하려고 합니다.
요런 것 말이예요.

기존의 방식 예제

기존 테이블 방식을 한번 살펴보겠습니다.

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="icon_01.gif"> 쿠키넷 공지사항</td>
</tr>
<tr>
<td><img src="icon_02.gif"> <a href="#">설날입니다. 다들 잘 다녀오세요.</a></td>
</tr>
<tr>
<td><img src="icon_02.gif"> <a href="#">내일이 설날이래요.</a></td>
</tr>
<tr>
<td><img src="icon_02.gif"> <a href="#">공지사항 창을 달아봤어요.</a></td>
</tr>
</table>

img에 alt 텍스트도 없고, table도 td만 사용한 형편없는 코드가 나와버렸습니다. (XHTML방식이 아니라 HTML 4.01로 해봤어요. 기존 코드들은 거의 HTML 4.01방식이니까)

웹 표준에 따라 작성해 보기

일단은, XHTML 1.0에 맞춘 방식으로 해보겠습니다.
전체 형태와 아이콘 등에 background를 사용하게 될거예요.

제목 부분

“쿠키넷 공지사항” 부분부터 해볼까요.
앞에 아이콘이 있는 타이틀 항목입니다. 한 영역을 대표하는 제목의 성격이니까 헤딩항목을 이용해야겠어요. h1,h2,h3..어떤 것을 쓸지는 상황에 따라 다르지만 h1일 가능성은 매우 낮고.. 여기서는 가장 무난한 h3로 해보겠습니다.
일단 h3안에 텍스트를 넣습니다.

<h3>쿠키넷 공지사항</h3>

이제 아이콘을 넣고, 글씨 모양을 꾸며야겠습니다.
아이콘은 이미지로 넣지 않고, 백그라운드로 넣습니다.

h3 {
 background: url(images/icon_01.gif) no-repeat 0 1px; 
 color:#000;
 font-size:9pt;
 margin:0 0 5px 0;
 padding:0 0 0 18px;
}

icon_01.gif 파일을 백그라운드로 넣고, 위치는 왼쪽으로 붙고(좌로부터 0px) 위에서 1px내려온 부분으로 잡았습니다.
y값의 경우 50%로 하는 것도 좋은 방법입니다.
다만 컨텐츠가 길어질 경우에, 글은 두줄로 나오고 아이콘는 세로로 중간에 위치하게 될 수 있습니다.
여기서 h3의 경우는 고정된 형태이기 때문에 %를 사용해도 되지만 전 그냥 고정할랍니다.

목록 부분

실제 공지사항이 뿌려지는 부분을 만들어 봅시다.
목록 속성을 가지고 있기 때문에 list 항목을 사용하여 코드를 작성합니다.

<ul>
 <li><a href="#">설날입니다. 다들 잘 다녀오세요.</a></li>
 <li><a href="#">내일이 설날이래요.</a></li>
 <li><a href="#">공지사항 창을 달아봤어요.</a></li>
</ul>

코드가 훨씬 간결하고 알아보기 쉬워졌지요?

이제 제목 부분과 동일하게 아이콘을 백그라운드로 설정해 줍니다.

ul {
 list-style: none;
 margin:0;
 padding:0;
}
li {
 background: url(images/icon_02.gif) no-repeat 0 0px;
 padding-left: 14px;
}

아참, 위에서 빼먹었는데-
padding-left를 넣는 것은, 배경으로 아이콘 이미지를 넣고 이미지 만큼의 좌측 여백을 넣어 주는 것 이랍니다.

이제 다 끝났어요.
조금 더 예쁘게 꾸민 예제 파일을 보세용.

최종 예제 파일

위의 모든 예제를 포함 한 파일 보기

기타 설명

크게 신경 쓰지는 않아도 될 것 같지만 참고사항입니다.
background를 사용할 때, 기본값이 정해져 있는 속성(background-repeat:repeat; 등)의 경우 별도로 값을 지정하지 않아도 되지만
background 속성을 사용하면서 단축코드으로 사용할 경우는 배경 색상을 입력하지 않으면 validator에서 warning을 띄웁니다.

그리고 위 예제에서는 list의 아이콘 이미지를 배경 이미지로 사용하였지만, list에는 기본적으로 icon을 이미지로 사용할 수 있는 속성이 있습니다.

ul {
 list-style:url(icon_01.gif);
}

위와 같이 사용하면 되는데요, 저런 경우엔 이미지의 위치를 조절할 수 없는 작다면 작은 단점이 있습니다.
또 하나 들자면 background를 사용할 경우엔 http 리퀘스트를 줄일 수 있습니다.
취향이나 형태에 맞게 list-style을 사용할지 background를 사용할지 결정하면 되겠습니다.

Tags: background, 웹표준

이글은 Wednesday, September 6th, 2006 at 11:44 pm에 썼고 카테고리는 없다 (Uncategorized). 그리고 이 글에 대한 댓글을 RSS 2.0 feed 로 구독 할 수 도 있다. 할말이 있으면 댓글을 달고, 아니면 트랙백을 날려도 된다.