HTML5+CSS3]6-4 목록 스타일

easyspub

'사람을 구체적으로 도와주는 책'을 만드는 이지스퍼블리싱 출판사입니다. 도서 내용과 관련된 문의는 Do it! 스터디 룸 (https://cafe.naver.com/doitstudyroom) 또는 영상 상세 설명에 있는 저자님의 이메

www.youtube.com

✔list-style-type 속성 : 목록의 불릿과 번호 스타일 지정하기

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

👉기본형

list-style-type : none | <순서 없는 목록의 불릿> | <순서 목록의 번호>

👉순서 없는 목록에서 불릿 모양 바꾸기

👉순서 없는 목록에서 불릿 없애기

ul {list-style-type:none;}

👉순서 목록에서 숫자 바꾸기

✔list-style-image 속성 : 불릿 대신 이미지 넣기

👉순서 없는 목록 앞에 붙는 불릿을 list-style-image 속성을 이용해 불릿을 원하는 이미지로 바꿀 수 있다

👉기본형

list-style-image : <이미지> | none

<이미지> = url(이미지 파일 경로)

✔list-style-position 속성 : 목록에 들여 쓰는 효과 내기

👉불릿이나 번호가 좀 더 안쪽으로 들여 써진 듯한 효과가 나타난다

👉기본형 list-style-position : inside | outside ;

✔list-style 속성 : 목록 속성 한꺼번에 표시하기

👉list-style-type 과, list-style-position, list-style-image 속성을 한꺼번에 표시할 수 있다

코딩 신생아가 새싹을 틔워서 꽃이 될때까지