목록을 만들 땐 ul, ol 을 쓰자 > web20

목록을 만드는 태그인 ul, ol 은 활용도가 매우 높은 태그 입니다.
둘 다 목록을 만드는 태그이고,
ul은 순서가 없는 리스트 (Unordered List)
ol은 순서가 있는 리스트 (Ordered List) 입니다.
ol은 머릿모양으로 숫자가 자동으로 들어가게 됩니다.

각각의 항목은 li 태그를 통해 만들어 줄 수 있습니다.

목록을 만들기 위해 그냥 텍스트로 할 때와 비교해서 장점은

1) 각 항목의 머릿모양을 지정해 줄 수 있다.
2) 리스트의 인덴트가 머릿모양에 맞게 맞춰진다. (list-style-position : outside)
3) html의 문서의 의미상 목록임을 나타내 줄 수 있다.

이 정도 입니다.

홈페이지의 메뉴 같은 것도 리스트로 만들면 좋습니다.

<ul>
<li>메뉴1</li>
<li>메뉴2
<ul>
<li>서브메뉴1</li>
<li>서브메뉴2</li>
</ul>
</li>
</ul>

이미지일 경우는 '메뉴1'같은 텍스트 대신 <img src="~~~" /> 식으로 써주면 되겠죠?

===========================================================================

CSS 를 이용해서 목록을 멋지게 꾸밀 수도 있습니다.

특정 영역 내 ul 이나 li 태그의 스타일을 지정해서
margin 이나 padding 값을 조절할 수 있습니다. ;)

===========================================================================

이미지 같은 경우는..

<a href="링크" id="link">링크</a>

로 하고 css에선
#link { display:block; background-image:url(/images/link.gif); width:100px; height:30px; }

같은 형식으로 할 수 있죠.
좀 더 유연한 소스가 되겠죠?

출처 : 시리니닷넷