html5 list Tag


예전에는 목록 태그들은 텍스트를 정렬하는 용도로만 사용했지만, 이제는 CSS를 이용해서 그림 등 어떤 것이든 목록화해서 정리를 할 수 있는데요. 목록 태그의 형식과 속성에 대해서 알아보도록 하겠습니다. 목록을 만든 태그는 <ul>, <ol>, <li> 태그인데요. 순서가 있는 목록을 만들 때는 <ol>을 순서가 없는 목록을 만들 때는 <ul> 태그를 사용하게 됩니다. 그리고 <li> 태그를 이용해서 각 항목들을 표시하게 되는데요. 기본적인 형식은 다음과 같습니다. 



순서가 없는 목록은 항목 앞에 작은 사각형이나 원 모양의 블릿이 붙게 되구요. 순서가 있는 목록은 숫자가 알파벳 등의 다양한 기호를 붙여서 표시할 수 있습니다. <ul> 태그에서 사용할 수 있는 블릿의 속성은 square [], circle [], disk[●]가 있으며 이것을 표시하는 스타일의 형식은 [list-style-type : square; ] 처럼 사용합니다.


 블릿을 없애고 싶다면 list-style-type : none; 하면 되겠죠? 기본 블릿을 표시하거나 없앨 수도 있지만 항목에 맞는 그림을 이용해서 블릿을 넣을 수도 있습니다. list-style-image 속성을 이용하는 건데요. 형식은 li {list-style-type : url(이미지 경로);} 입니다. 


다음은 순서가 있는 목록을 만들 때 사용하는 <ol>태그에 대해서 알아보겠습니다. 이 녀석을 사용할 때는 type와 start 속성값을 이용해서 표시하는데요. 형식은 다음과 같습니다. <ol type="A" start="2">...</ol> 속성으로 사용한 type는 순서를 나타내줄 키워드인데요. 그 종류로는 1, a, A,ⅰ,Ⅰ(로마숫자) 등이 있습니다. 이 중에서 순서목록으로 사용할 기호를 선택해서 type="속성" 에 넣어주면 되구요. 몇 번째 숫자부터 시작 할건지를 지정해주는 start="속성"에 두 번째 (2), 세 번째 (3) 등을 숫자를 입력해서 지정해주면 됩니다.