[12강] CSS | 목록 꾸미기

■ 글머리 기호 설정

list-style-type 속성을 이용하면 목록의 글머리 기호를 설정할 수 있습니다.

글머리 기호 설정
ex4-9.html
<style>
li { list-style-type: square; }
</style>
<body>
<h3>수목원 관람 유의사항</h3>
<ul>
<li>어린이와 노약자는 반드시 보호자와 동반해서 관람합니다.</li>
<li>수목원내 시설물 및 동·식물을 함께 보호합니다.</li>
<li>반려동물을 데리고 입장할 수 없습니다.</li>
    <li>수목원 전 지역은 금연, 금주 구역입니다.</li>
</ul>
</body>
ex4-9.html의 실행 결과

list-style-type 속성 값을 표로 정리하면 다음과 같습니다.

■ 글머리 이미지 설정

list-style-image 속성을 이용하면 목록의 글머리 이미지를 설정할 수 있습니다.

글머리 이미지 설정
ex4-10.html
<style>
li {  list-style-image: url("img/icon.png"); }
</style>
<body>
<h3>동물원 이용안내</h3>
<ul>
<li>쉬는 날 없이 운영하며, 1시간전까지 입장이 가능합니다.</li>
<li>화단에 들어가는 행위는 삼가해 주세요.</li>
<li>어린이 동반 시 유아 보호와 안전에 유의해주세요.</li>
    <li>사고에 대해서는 책임을 지지 않습니다.</li>
</ul>
</body>
ex4-10.html의 실행 결과
■ 수평 목록 만들기

<ul>, <li> 요소는 기본적으로 블록 요소이기 때문에 목록의 각 항목들이 수직 방향으로 배치됩니다. 다음 예에서는 display 속성 값 inline을 사용하여 목록 항목들을 수평 방향으로 배치합니다.

수평 목록 만들기
ex4-11.html
<style>
ul { background-color: purple; padding: 20px; text-align: center; color: white; }
li { 
    display: inline; 
    margin: 0 10px; 
}
a:link, a:visited, a:active { color: white; text-decoration: none; }
a:hover { color: orange; text-decoration: underline; }
</style>
<body>
<h3>서울대공원</h3>
<ul>
<li><a href="#">이용 안내</a></li>
<li>|</li>
<li><a href="#">산림 휴양 신청</a></li>
<li>|</li>
<li><a href="#">고객 참여 프로그램</a></li>
<li>|</li>
<li><a href="#">동물원 탐방</a></li>
    <li>|</li>
    <li><a href="#">찾아 오시는 길</a></li>
</ul>
</body>
ex4-11.html의 실행 결과
■ 목록 꾸미기 예
목록 꾸미기 예
ex4-16.html
<style>
body {
      background-color: #f9f9f9;
      padding: 20px;
}
h1 {
      color: #333333;
}
ul.fruit_list {
      list-style-type: none; /* 기본 점 제거 */
      padding: 0;
}
ul.fruit_list li {
      background-color: #fff;
      border: 1px solid #ddd;
      padding: 10px 15px;
      margin-bottom: 8px;
      border-radius: 8px;
      box-shadow: 2px 2px 5px #888888;
}
ul.fruit_list li:hover {
      background-color: #e0f7fa;
}
</style>
<body>
<h1>내가 좋아하는 과일</h1>
<ul class="fruit_list">
    <li>사과</li>
    <li>바나나</li>
    <li>포도</li>
    <li>오렌지</li>
</ul>
</body>
ex4-16.html의 실행 결과