HTML에서 순서 없는 목록(unordered list)을 만들려면 <ul> 태그를 사용합니다. 목록 전체는 <ul> 태그로 시작하고, 각 항목은 <li> 태그로 감싸면 됩니다. 항목 앞에는 디스크(disc), 사각형(square), 원(circle) 등 다양한 글머리 기호가 표시되며, 기본값은 작은 검은 원 형태의 디스크 불릿입니다.
CSS list-style-type 속성 활용하기
원하는 모양의 글머리 기호를 지정하려면 CSS 속성인 list-style-type을 사용하면 됩니다. 이때 HTML 요소에 직접 스타일을 적용하는 style 속성(인라인 스타일)을 활용할 수 있습니다. <ul> 태그에 list-style-type 속성을 함께 지정하면, 순서 없는 목록에 디스크 불릿을 간단히 추가할 수 있습니다.
다만 한 가지 주의할 점이 있습니다. style 속성으로 지정한 인라인 스타일은 전역으로 설정된 스타일보다 우선 적용됩니다. 즉, HTML 문서 내 <style> 태그나 외부 스타일시트에서 정의한 스타일을 덮어쓰게 되므로, 스타일 충돌에 유의해야 합니다.
예제 코드
아래 예제를 실행하면 디스크 글머리 기호가 있는 순서 없는 목록이 화면에 표시됩니다.
<!DOCTYPE html> <html> <head> <title>HTML Unordered List</title> </head> <body> <h1>Developed Countries</h1> <p>The list of developed countries:</p> <ul style="list-style-type:disc"> <li>US</li> <li>Australia</li> <li>New Zealand</li> </ul> </body> </html>
위 코드에서 <ul> 태그에 list-style-type:disc를 지정했기 때문에, 미국(US), 호주(Australia), 뉴질랜드(New Zealand) 항목 앞에 검은 원형 디스크 불릿이 나타납니다. 같은 방식으로 값을 square나 circle로 바꾸면 각각 사각형, 빈 원 모양의 글머리 기호로 변경할 수 있습니다.