Background를 활용해 보아요 : 공지사항 박스의 형태 만들기

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 0;
 padding-left: 14px;
}

아참, 위에서 빼먹었는데-
padding-left를 넣는 것은, 배경으로 아이콘 이미지를 넣고 이미지 만큼의 좌측 여백을 넣어 주는 것 이랍니다.
이제 다 끝났어요. 🙂
조금 더 예쁘게 꾸민 예제 파일을 보세용.

최종 예제 파일

쿠키넷 공지사항

- 설날입니다. 다들 잘 다녀오세요.

- 내일이 설날이래요.

공지사항 창을 달아봤어요.

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

#notice{
	border:2px solid #CCC;
	padding:20px;
	width:300px;
}
#notice h3 {
	background: url(images/icon_01.gif) no-repeat 0 1px; 
	margin:0 0 5px 0;
	padding:0 0 0 18px;
}
#notice ul {
	list-style: none;
	margin:0;
	padding:0;
}
#notice li {
	background: url(images/icon_02.gif) no-repeat 0 0px;
	padding-left: 14px;
}
#notice li a {color:#369;text-decoration:none;}
#notice li a:hover{text-decoration:underline;}

기타 설명

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

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

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

최신 댓글

최신 댓글

쿠키넷 공지사항