[CSS] list-style
목록 요소의 list-style
속성
list-style-type
목록의 머리 기호를 결정하는 속성
<li>
태그에 각각 스타일을 적용할 수도, <ul>
태그에 클래스명으로 스타일을 지정함으로써 <ul>
태그에 속한 모든 <li>
태그들의 머리 기호를 한번에 지정할 수도 있다.
예시 1
스타일 시트에 직접 지정
.css
list-style-type: none; /* 지정하지 않음 */ list-style-type: disc; /* 검은 원형 */ list-style-type: lower-roman; /* 소문자 로마자 */ list-style-type: decimal; /* 1부터 시작하는 10진수 */ list-style-type: upper-alpha; /* 대문자 알파벳 */ list-style-type: circle; /* 원형 */ list-style-type: square; /* 사각형 */ list-style-type: lower-alpha; /* 소문자 알파벳 */ list-style-type: upper-roman; /* 대문자 로마자 */
예시 2
클래스명으로 지정
.html
<ul class="disc"> <li>list1</li> <li>list2</li> <li>list3</li> </ul>
<ul> <li class="lower-roman">list1</li> <li class="lower-roman">list2</li> <li class="lower-roman">list3</li> </ul>
list-style-image
목록의 머리 기호가 될 이미지를 지정하는 속성
예시
.css
.list-icon { list-style-image: url(list_icon_16x16.png); /* 이미지의 상대경로를 url에 지정 */ }
.html
<ul class="list-icon"> <li>list1</li> <li>list2</li> <li>list3</li> </ul>
list-style-position
목록의 들여쓰기 방향을 지정하는 속성
예시
.css
list-style-type: inside; /* 머리 기호를 들여 씀 */ list-style-type: outside; /* 머리 기호를 내어 씀 */
Author And Source
이 문제에 관하여([CSS] list-style), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ssumniee/CSS-list-style저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)