HTML 리스트 생성 <ul> 태그 - 순서없이 마커로 목록 생성

UL 태그란?

UL (Unordered List) 태그는 목록을 생성하는 도구입니다. 우리가 흔히 볼 수 있는 리스트 앞에 점이 찍힌 형태에요.<ul> 태그는 LI (List) 태그와 항상 함께 다닙니다.

 

사용법

<ul>
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
</ul>

• <ul> 태그를 엽니다. 앞으로 순서없는 리스트를 만들거라고 선언한거죠
• 다음 줄에 들여쓰기를 한 뒤 <li> 태그를 만듭니다. 원하는 만큼 만들면 됩니다.
• <li> </li> 태그 사이에 원하는 목록을 추가합니다.
• </ul> 태그를 써서 닫습니다.

 

예시

See the Pen UL by 40's Programmer (@40sProgrammer) on CodePen.

 

UL 태그의 속성

원래 아래 속성들이 있었는데 HTML5부터는 사용하지 않는다고 하네요. 대신 CSS에서 조정한다고 합니다.

1. type : 앞에 마커 형태를 변경하는 속성입니다.
   • "disc": 원형 마커를 사용합니다.
   • "circle": 빈 원 형태의 마커를 사용합니다.
   • "square": 사각형 형태의 마커를 사용합니다.
2. compact : 목록 간격을 조절하여 더 바짝 붙게 만듭니다

 

CSS로 마커 형태를 변경해보았습니다.

See the Pen UL by 40's Programmer (@40sProgrammer) on CodePen.

 

CSS에서는 list-style-type 속성을 사용하여 목록 마커의 모양을 변경할 수 있습니다