웹 페이지에서 목록을 디자인할 때 기본 글머리 기호(불릿)를 제거하고 깔끔한 테두리 스타일을 적용하고 싶은 경우가 많습니다. CSS의 list-style-type 속성을 none으로 설정하면 목록에서 글머리 기호를 손쉽게 제거할 수 있습니다.
핵심 원리
HTML의 <ul> 태그는 기본적으로 각 항목 앞에 원형 불릿이 표시됩니다. 이를 제거하려면 CSS에서 다음 속성을 사용합니다.
list-style-type: none;
여기에 배경색, 패딩(padding), 테두리(border) 속성을 함께 적용하면 시각적으로 돋보이는 테두리 목록을 만들 수 있습니다.
전체 예제 코드
아래 코드는 주황색 배경과 검정색 테두리를 가진, 글머리 기호 없는 목록을 구현한 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
background-color: orange;
padding: 10px 20px;
list-style-type: none;
border: 2px solid black;
}
</style>
</head>
<body>
<p>국가 목록</p>
<ul>
<li>인도</li>
<li>미국</li>
<li>호주</li>
</ul>
</body>
</html>코드 설명
주요 CSS 속성
background-color: orange; — 목록 전체에 주황색 배경을 적용하여 시각적 강조 효과를 줍니다.
padding: 10px 20px; — 상하로 10px, 좌우로 20px의 여백을 추가해 내용이 테두리에 붙지 않도록 합니다.
list-style-type: none; — 핵심 속성으로, 목록 앞의 글머리 기호를 제거합니다.
border: 2px solid black; — 두께 2px의 검정색 실선 테두리를 목록 주위에 그립니다.
실행 결과
위 코드를 브라우저에서 실행하면 글머리 기호가 없는 주황색 배경의 검정 테두리 목록이 표시됩니다.
추가 팁
모던 CSS에서는 list-style-type: none; 대신 축약형 속성인 list-style: none;을 사용해도 동일한 결과를 얻을 수 있습니다. 또한 목록 항목 사이에 간격을 주고 싶다면 li { margin-bottom: 8px; }와 같은 스타일을 추가하면 됩니다. 네비게이션 메뉴나 카드형 레이아웃을 만들 때 이 기법이 자주 활용됩니다.