텍스트 관련 스타일- 목록

<Do it! HTML5+CSS3>을 기본으로 배운 내용입니다.

 

목차

• 1) 목록의 불릿과 번호 스타일 지정 - list-style-type
• 2) 불릿 대신 이미지 넣기 - list-style-image
• 3) 목록에 들여 쓰는 효과 내기 - list-style-position
• 4) 목록 속성 한꺼번에 표시하기 - list-style

 

목록 스타일

1) 목록의 불릿과 번호 스타일 지정 - list-style-type

순서 없는 목록의 경우, 목록 앞에 다양한 bullet을 넣을 수 있고 순서 목록에서는 번호 스타일을 지정할 수 있다.

선택자 { list-style-type: 속성 값 }

 

- 순서 없는 목록에서 불릿 지정

속성 값	설명
none	불릿 없애기
disc	채운 원
circle	빈 원
square	채운 사각형

 

- 순서 있는 목록에서 숫자 모양 지정

속성 값	설명	예시
dicimal	1로 시작하는 십진수	1, 2, 3, ...
decimal-leading-zero	앞에 0이 붙는 십진수	01, 02, 03, ...
lower-roman	소문자 로마 숫자	ⅰⅱⅲⅳ
upper-roman	대문자 로마 숫자	ⅠⅡⅢⅣ
lower-alpha 또는 lower-latin	소문자 알파벳	a, b, c, d, e, ...
upper-alpha 또는 upper-latin	대문자 알파벳	A, B, C, D, E, ...

 

 

2) 불릿 대신 이미지 넣기 - list-style-image

선택자 { list-style-image: url(이미지경로) }

 

 

3) 목록에 들여 쓰는 효과 내기 - list-style-position

list-style-position속성을 이용하면 실제 내용이 시작되는 위치에 불릿이나 번호를 표시하기 때문에 화면에는 불릿이나 번호가 좀 더 안쪽으로 들여 써진 듯한 효과가 나타난다. 

선택자 { list-style-position: 속성 값 }

속성 값	설명
inside	불릿이나 숫자를 안쪽으로 들여 쓴다.
outside	기본 값으로 불릿이나 숫자를 밖으로 내어 쓴다.

 

 

4) 목록 속성 한꺼번에 표시하기 - list-style

ul {
  list-style-type: lower-alpha;
  list-style-position: inside;
}

//목록 속성 한꺼번에 표시
ul {
  list-style: lower-alpha, inside;
}