🐧목록 관련 스타일 속성
📌list-style-type : 목록에 대한 블릿 또는 순서 관련 스타일 속성
◈ 속성값 : none - 블릿 또는 순서값 미제공
◈ 속성값(블릿) : disc(기본), circle, square
◈ 속성값(순서값) : decimal(기본), lower-alpha, upper-alpha, lower-roman, upper-roman 등📌list-style-image : 블릿 대신 출력될 이미지를 설정하기 위한 스타일 속성
◈ 속성값 : url 함수를 사용하여 이미지 파일의 URL 주소를 설정
📌list-style-position : 목록 출력 위치 관련 스타일 속성
◈ 속성값 : inside(들여쓰기), outside(밀어쓰기)
ul li { list-style-type: disc; /*list-style-type: circle;*/ /*list-style-type: square;*/ list-style-image: url("images/bullet.png"); list-style-position: inside; }
📌list-style : 목록에 관련된 모든 스타일 속성값 설정
ol li { list-style: upper-roman inside; }
📃15_list.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS</title> <style type="text/css"> ul li { /* list-style-type : 목록에 대한 블릿 또는 순서 관련 스타일 속성 */ /* 속성값 : none - 블릿 또는 순서값 미제공 */ /* 속성값(블릿) : disc(기본), circle, square */ /* 속성값(순서값) : decimal(기본), lower-alpha, upper-alpha, lower-roman, upper-roman 등 */ list-style-type: disc; /*list-style-type: circle;*/ /*list-style-type: square;*/ /* list-style-image : 블릿 대신 출력될 이미지를 설정하기 위한 스타일 속성 */ /* 속성값 : url 함수를 사용하여 이미지 파일의 URL 주소를 설정 */ list-style-image: url("images/bullet.png"); /* list-style-position : 목록 출력 위치 관련 스타이 속성 */ /* 속성값 : inside(들여쓰기), outside(밀어쓰기) */ list-style-position: inside; } ol li { /* list-style : 목록에 관련된 모든 스타일 속성값 설정 */ list-style: upper-roman inside; } </style> </head> <body> <h1>목록 관련 스타일 속성</h1> <hr> <ul> <li>비순차 리스트-1</li> <li>비순차 리스트-2</li> <li>비순차 리스트-3</li> </ul> <ol> <li>순차 리스트-1</li> <li>순차 리스트-2</li> <li>순차 리스트-3</li> </ol> </body> </html>
