CSS Text / List / Table Style (2)

안녕하세요 오늘은 

 

CSS Text(글꼴) / List(목록) / Table Style(표 스타일) 중 List에 알아볼게요.

 

 

CSS List (목록 스타일)

 

List-style-type 속성

 

불릿 모양과 번호 스타일을 지정해요.

 

단 순서 없는 목록의 경우 목록 앞에 불릿 모양으로 지정해야 하고,

 

순서 있는 목록의 경우 번호 스타일을 지정해야 해요.

 

 

 

List-style-image 속성

 

불릿 대신 이미지를 사용해요.

 

/*기본형*/
list-style-image: <url(이미지 파일 경로)> | none

속성값으로 none 사용 시 List-style-type 속성에서 지정한 형태로 표시돼요.

 

그리고 불릿에 들어가 이미지는 불릿 크기만큼 작아야 좋아요.

 

 

 

list-style-position 속성

 

목록을 들여 쓰는 속성으로

 

불릿이나 번호의 위치를 들여 쓰기를 사용함으로

 

텍스트 문단 사이에 있는 목록을 더 쉽게 구분할 수 있어요.

 

 

 

 

list-style 속성

 

목록 속성을 한꺼번에 표시가 돼요.

 

list-style-type, list-style-image, list-style-position 속성을 한꺼번에 표시가 돼요.

 

즉 속성을 줄여서 표시가 가능해요.

 

 

 

list-style 속성 예제

 

// 불릿 없애기

ul { list-style-type: none; }

/* 속성 줄여서 표시하기*/
ul { list-style: none; }


// 소문자 목록 만들고 들여쓰기

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

/* 속성 줄여서 표시하기*/
ol { 
	list-style: lower-alpha inside;
}

 

 

 

여기까지 CSS List에 알아봤는데요.

 

다음 포스팅은 

 

CSS Text(글꼴) / List(목록) / Table Style(표 스타일) 중 마지막 Table Style에 알아볼게요.