HTML에서 원형 글머리 기호가 있는 순서 없는 목록(ul) 만드는 방법

HTML에서 순서 없는 목록(unordered list)을 만들려면 <ul> 태그를 사용합니다. 목록은 <ul> 태그로 시작하며, 각 항목은 <li> 태그로 감싸고 disc(채워진 원), square(사각형), circle(빈 원) 등의 기호로 표시됩니다. 아무 설정을 하지 않으면 기본값인 작은 검은 원(disc)이 적용됩니다.

CSS list-style-type 속성으로 글머리 기호 변경하기

원형(circle) 글머리 기호를 가진 순서 없는 목록을 만들려면 CSS의 list-style-type 속성을 사용합니다. 이 속성은 <ul> 태그에 style 속성으로 직접 지정할 수 있으며, 이를 인라인 스타일(inline style)이라고 부릅니다.

style 속성 사용 시 주의사항

style 속성은 요소에 직접 적용되는 인라인 스타일이기 때문에, 전역(global)으로 설정된 다른 스타일보다 우선순위가 높습니다. 즉, HTML <style> 태그 내부나 외부 스타일시트에서 정의한 스타일이 있더라도 style 속성의 값이 그것을 덮어쓰게(override) 됩니다.

HTML에서 원형 글머리 기호가 있는 순서 없는 목록(ul) 만드는 방법

예제 코드

아래 코드를 실행하면 원형(circle) 글머리 기호가 있는 순서 없는 목록이 어떻게 표시되는지 확인할 수 있습니다.

<!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:circle">
         <li>US</li>
         <li>Australia</li>
         <li>New Zealand</li>
      </ul>
   </body>
</html>

정리

핵심만 요약하면 다음과 같습니다.

순서 없는 목록은 <ul> 태그로 생성하고, 각 항목은 <li> 태그로 작성합니다.
글머리 기호 모양은 CSS의 list-style-type 속성으로 변경할 수 있습니다.
원형 기호를 원한다면 list-style-type:circle 값을 지정합니다.
인라인 style 속성은 외부 스타일시트나 <style> 태그보다 우선 적용됩니다.