
w3.css
목록 그룹
CSS를 사용하여 기본 목록을 “목록 그룹”으로 변환하는 방법을 알아보자.
목록 그룹을 만드는 방법
1단계) HTML 추가
<ul> <li>Adele</li> <li>Agnes</li> <li>Billy</li> <li>Bob</li> <li>Calvin</li> <li>Christina</li> <li>Cindy</li> </ul>
2단계) CSS 추가
ul { list-style-type: none; /* Remove bullets */ padding: 0; /* Remove padding */ margin: 0; /* Remove margins */ } ul li { border: 1px solid #ddd; /* Add a thin border to each list item */ margin-top: -1px; /* Prevent double borders */ background-color: #f6f6f6; /* Add a grey background color */ padding: 12px; /* Add some padding */ }
기본 예시
예제 보기참고
W3C School - How TO - List Group