웹 페이지에서 단순한 HTML 목록은 밋밋하게 보이기 쉽습니다. CSS를 활용하면 기본 <ul>, <li> 요소를 각 항목이 테두리와 배경색을 가진 '목록 그룹' 형태로 손쉽게 변환할 수 있습니다. 이는 부트스트랩의 리스트 그룹 컴포넌트와 유사한 스타일을 순수 CSS로 구현하는 방법입니다.
예제 코드
아래는 기본 목록을 목록 그룹으로 스타일링하는 전체 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
* {
box-sizing: border-box;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
ul li {
border: 1px solid rgb(0, 0, 0);
background-color: #f6f6f6;
padding: 12px;
font-size: 18px;
}
</style>
</head>
<body>
<h1>List Group Example</h1>
<ul>
<li>Lion</li>
<li>Tiger</li>
<li>Leopard</li>
<li>Cheetah</li>
<li>Jaguar</li>
<li>Cat</li>
<li>Dog</li>
</ul>
</body>
</html>핵심 CSS 속성 설명
목록 그룹 스타일을 만드는 데 사용된 주요 속성은 다음과 같습니다.
list-style-type: none; — 기본적으로 표시되는 불릿(•) 기호를 제거하여 깔끔한 그룹 형태를 만듭니다.
padding: 0; margin: 0; — 브라우저가 ul 요소에 기본적으로 적용하는 여백을 초기화하여 레이아웃을 정돈합니다.
border: 1px solid rgb(0, 0, 0); — 각 목록 항목에 검정색 실선 테두리를 추가하여 항목 간 경계를 명확히 구분합니다.
background-color: #f6f6f6; — 연한 회색 배경을 적용해 시각적인 완결성을 더합니다.
padding: 12px; — 항목 내부에 적절한 여백을 주어 가독성을 높입니다.
실행 결과
위 코드를 실행하면 불릿 기호 없이 각 항목이 테두리와 배경색으로 구분된 목록 그룹이 화면에 출력됩니다. 마치 카드형 메뉴나 사이드바 내비게이션처럼 보이는 효과를 확인할 수 있습니다.
추가 팁
실무에서는 항목 사이의 테두리가 겹치지 않도록 margin-bottom: -1px;을 활용하거나, 마지막 항목에만 별도 스타일을 지정하는 방법도 자주 사용됩니다. 또한 :hover 가상 클래스를 추가하면 마우스를 올렸을 때 배경색이 변경되는 인터랙티브한 목록 그룹을 만들 수 있습니다.