<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을 사용하여 목록 항목들을 수평 방향으로 배치합니다.
