HTML에서 순서 없는 목록(unordered list)을 만들려면 <ul> 태그를 사용합니다. 목록 자체는 <ul> 태그로 시작하고, 각 항목은 <li> 태그로 감싸며, disc(채운 원), square(정사각형), circle(속이 빈 원) 등 다양한 불릿 모양으로 표시할 수 있습니다. 아무 설정도 하지 않으면 기본값인 작은 검은 원(disc)이 적용됩니다.
CSS list-style-type 속성으로 불릿 모양 변경하기
정사각형 불릿을 적용하려면 CSS의 list-style-type 속성을 사용합니다. 가장 간단한 방법은 HTML 요소에 직접 지정하는 style 속성(인라인 스타일)을 활용하는 것입니다. <ul> 태그에 list-style-type:square 값을 넣어주면 해당 목록의 불릿이 정사각형으로 변경됩니다.
다만 주의할 점이 있습니다. style 속성으로 지정한 인라인 스타일은 전역 스타일보다 우선 적용됩니다. 즉, HTML 문서 내 <style> 태그나 외부 스타일시트에서 설정한 스타일이 있더라도 인라인 스타일이 그것을 덮어쓰게(override) 됩니다.
예제 코드
아래 예제를 실행하면 정사각형 불릿이 적용된 순서 없는 목록이 화면에 표시됩니다.
<!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:square"> <li>US</li> <li>Australia</li> <li>New Zealand</li> </ul> </body> </html>
마무리
이처럼 <ul> 태그와 CSS list-style-type 속성만 활용하면 별도의 이미지 없이도 정사각형 불릿 목록을 손쉽게 만들 수 있습니다. 필요에 따라 circle, disc, none 등 다른 값으로도 얼마든지 변경해 보세요.