[개미의 걸음 HTML&CSS 15차시] 목록 관련 스타일

목록 관련 속성

주요 속성	설    명
list-style-type	bullet과 번호 스타일을 지정하는 속성
list-style-image	bullet을 원하는 이미지로 지정하는 속성
list-style-position	list에서 bullet의 위치를 지정하는 속성   * inside : 불릿이나 숫자를 안쪽으로 들여씀   * outside : 기본값으로 불릿이나 숫자를 밖으로 내어씀
list-style	위의 3가지 속성들을 한꺼번에 작성 가능한 속성

 

① list-style-type 속성

속성값	의미	속성값	의미
none	bullet없애기	symbols	1로 시작하는 십진수
circle	빈 원	decimal	1로 시작하는 십진수
disc	검정색으로 채워진 원	decimal-leading-zero	01로 시작하는 십진수
square	검정색으로 채워진 사각형	aremenian	아르메니아 숫자
lower-greek	그리스 문자 소문자	georgian	조지 왕조시대의 숫자
lower-roman	소문자 로마 숫자	upper-roman	대문자 알파벳
lower-alpha lower-latin	소문자 알파벳	upper-alpha upper-latin	대문자 알파벳

 

 

② list-style-image 속성

• url안에 '파일경로'를 입력하면 이미지를 bullet으로 사용가능
• 작은 크기의 이미지를 사용해야지만 이미지가 알맞게 bullet으로 적용됨

 

③ list-style-position 속성

• list-style-position의 속성값 outside는 기본값으로 불릿이나 숫자를 밖으로 내어 씀
• list-style-position의 속성값 inside는 기본값으로 불릿이나 숫자를 안쪽으로 들여 씀

 

④ list-style 속성

• 위의 3가지 속성[list-style-type, list-style-image, list-style-position]을 한꺼번에 표시할 수 있는 속성
• 여러 개의 값을 쓸 때는 띄어쓴다.