HTML에서 순서 없는 목록(Unordered List)을 만들려면 <ul> 태그를 사용합니다. 목록은 <ul> 태그로 시작하며, 각 항목은 <li> 태그로 작성됩니다. 목록 항목 앞에는 기본적으로 검은색 원형(disc) 불릿이 표시되며, 상황에 따라 사각형(square), 원(circle), 또는 기호 없음(none) 등으로 변경할 수 있습니다.
CSS list-style-type 속성으로 불릿 제거하기
글머리 기호(불릿)가 없는 순서 없는 목록을 만들려면 CSS의 list-style-type 속성을 활용하면 됩니다. 가장 간단한 방법은 HTML 요소에 직접 스타일을 지정하는 style 속성(인라인 스타일)을 사용하는 것입니다. <ul> 태그에 list-style-type: none 값을 적용하면 목록의 불릿이 제거됩니다.
다만 인라인 style 속성은 우선순위가 매우 높다는 점을 유의해야 합니다. style 속성으로 지정한 스타일은 <style> 태그 내부에 정의된 스타일이나 외부 스타일시트(CSS 파일)에서 설정한 전역 스타일보다 우선적으로 적용되어 기존 스타일을 덮어쓰게 됩니다.
예제 코드
아래 코드를 실행하면 불릿 기호 없이 표시되는 순서 없는 목록을 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML Unordered List</title> </head> <body> <h1>Developed Countries</h1> <p>선진국 목록 :</p> <ul style="list-style-type:none"> <li>US</li> <li>Australia</li> <li>New Zealand</li> </ul> </body> </html>
추가 팁: 외부 CSS로 관리하기
여러 목록에 동일한 스타일을 적용해야 한다면, 인라인 스타일 대신 클래스를 활용하는 것이 유지보수 측면에서 더 좋습니다.
<style>
.no-bullet {
list-style-type: none;
padding-left: 0;
}
</style>
<ul class="no-bullet">
<li>항목 1</li>
<li>항목 2</li>
</ul>이처럼 list-style-type: none 하나만으로도 목록의 불릿을 손쉽게 제거할 수 있으며, padding-left 값을 함께 조정하면 목록의 들여쓰기까지 깔끔하게 정리할 수 있습니다.