HTML에서 목록의 글머리 기호(bullet)와 텍스트 사이에 공간을 만들려면 CSS의 padding(패딩) 속성을 사용합니다. 구체적으로는 <ul> 태그 안의 목록 항목인 <li> 태그에 왼쪽 패딩(padding-left)을 추가하면 됩니다. 이렇게 하면 지정한 패딩 값만큼 여백이 생겨 글머리 기호와 텍스트 사이에 자연스러운 간격이 형성됩니다.
예제 1: 기본 순서 없는 목록
다음은 disc(●) 스타일 불릿을 사용하는 일반적인 순서 없는 목록(unordered list)입니다.
<!DOCTYPE html> <html> <head> <title>HTML 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>
예제 2: padding-left로 간격 추가하기
위와 동일한 코드에 왼쪽 패딩을 추가하여 글머리 기호와 텍스트 사이에 공간을 만든 예제입니다. 첫 번째 목록 항목(<li>)에 padding-left:1em 스타일을 적용했으며, 아래 코드를 직접 실행해 그 차이를 확인해 보세요.
<!DOCTYPE html> <html> <head> <title>HTML Lists</title> </head> <body> <h1>Developed Countries</h1> <p>The list of developed countries:</p> <ul style="list-style-type:disc"> <li style="padding-left:1em">US</li> <li>Australia</li> <li>New Zealand</li> </ul> </body> </html>
추가 팁
모든 목록 항목에 한 번에 간격을 적용하고 싶다면 인라인 스타일 대신 CSS 선택자를 활용하는 것이 좋습니다. 예를 들어 ul li { padding-left: 1em; }처럼 작성하면 해당 목록의 모든 항목에 동일하게 적용됩니다. 또한 margin-left 속성을 사용해도 비슷한 효과를 얻을 수 있으며, 원하는 간격 크기에 따라 em, px 등 다양한 단위를 자유롭게 조절할 수 있습니다.