목차
- list-style-type 예제 - 리스트 스타일 타입
- list-style-type 정의
- list-style-type 구문
- list-style-type 예제 - <ol>에 <ul>용 리스트마커 사용 가능
- list-style-type 예제 - <ul>에 <ol>용 리스트마커 사용 가능
list-style-type 예제 - 리스트 스타일 타입
[예제1] - <ul> 태그 경우 (= 순서 없는 리스트 경우)
<style>
ul li { list-style-type :disc;}
</style>
<ul>
<li>홈짱닷컴</li>
<li>homzzang.com</li>
</ul>
[예제2] - <ol> 태그 경우 (= 순서 있는 리스트 경우)
<style>
ol li { list-style-type :decimal;}
</style>
<ol>
<li>홈짱닷컴</li>
<li>homzzang.com</li>
</ol>
list-style-type 정의
리스트 앞의 마커 스타일 지정.
※ 마커 (Marker : 리스트 앞에 붙는 도형/문자) = 블릿 (bullet)
1.
- 기본값: disc
- 상속여부: O
- 애니가능: X
- CSS버전: CSS1
- JS구문: object.style.listStyleType="square"
2.모든 브라우저 지원.
3.
MDN list-style-type 예제 보기
list-style-type 구문
selector {list-style-type: 속성값;}
<ul> 태그용 속성값 (= 순서 없는 리스트 속성값)
- disc - 검정 원모양 마커 (기본값) ※주의: disk (X)
- circle - 원 모양 마커
- square - 네모 모양 마커
<ol> 태그용 속성값 (= 순서 있는 리스트 속성값)
※ 기본적으로 "오름차순"으로 표시됨.
- armenian - 아르메니아 문자 순서 (그리스 문자를 기초로 해서 만든 특수 문자 38자)
- cjk-ideographic - 표의문자 순서 (중국 한자) (예: 一, 二, 三) ※ 한자 뒤가 마침표(.) 아님.
- decimal - 숫자 순서 (기본값) (예) 1, 2, 3, ...
- decimal-leading-zero - 01, 02, 03 같이 한 자리수일 때 앞에 0을 붙여 순서 지정
- georgian - Georgian alphabet 문자 순서
- hangul - 한글 (예) 가, 나, 다
- hangul-consonant - 한글 자음 (예) ㄱ, ㄴ, ㄷ
- hebrew - 히브리어 문자 순서
- hiragana - 히라가나(일본 문자) 순서
- hiragana-iroha - 히라가나-이로하 (일본 문자) 순서
- katakana - 카타카나 (일본 문자) 순서
- katakana-iroha - 카타카나-이로하(일본 문자) 순서
- korean-hangul-formal - 한국 한글숫자 (예) 일, 이, 삼
- korean-hanja-formal - 한국 한자숫자 공식(예) 壹, 貳, 參
- korean-hanja-informal - 한국 한자숫자 비공식 (예) 一, 二, 三 ※ 한자 뒤가 마침표(.)임.
- lower-alpha - 영어 소문자 순서 (예) a, b, c, ...
- lower-greek - 그리스어 소문자 순서
- lower-latin - 라틴어 소문자 순서
- lower-roman - 로마어 숫자 소문자 순서 (예) ⅰ, ⅱ, ⅲ, ⅳ, ...
- upper-alpha - 영어 대문자 넘버링 (예) A, B, C, ...
- upper-latin - 라틴어 대문자 번호
- upper-roman - 로마어 숫자 대문자 순서 (예) Ⅰ, Ⅱ, Ⅲ, Ⅳ, ...
PS. <ol> 태그의 reversed 속성으로 역순(= 내림차순) 표시 가능.
<ul>/<ol> 태그 공용 속성값
- none - 리스트 마커 없음
- initial - 이 속성의 기본값(disc)으로 설정 ※ <ol> 태그에서도 점으로 표시. 예제보기
- inherit - 부모요소 속성값 상속
list-style-type 예제 - <ol>에 <ul>용 리스트마커 사용 가능
※ 사용은 가능하나, 비권장. (순서없이 사용하려면, <ul> 사용 권장.)
<style>
ol {list-style-type: circle;}
</style>
<ol>
<li>홈짱닷컴</li>
<li>Homzzang.com</li>
<li>홈페이지 제작관리</li>
</ol>
결과보기
PS. 순서없이 사용하려면, 아래처럼 태그도 변경 권장.
<style>
ul {list-style-type: circle;}
</style>
<ul>
<li>홈짱닷컴</li>
<li>Homzzang.com</li>
<li>홈페이지 제작관리</li>
</ul>
결과보기
list-style-type 예제 - <ul>에 <ol>용 리스트마커 사용 가능
※ 사용은 가능하나, 비권장. (순서있이 사용하려면, <ol> 사용 권장.)
<style>
ul {list-style-type: decimal;}
</style>
<ul>
<li>홈짱닷컴</li>
<li>Homzzang.com</li>
<li>홈페이지 제작관리</li>
</ul>
결과보기
PS. 순서있이 사용하려면, 아래처럼 태그도 변경 권장.
<style>
ol {list-style-type: decimal;}
</style>
<ol>
<li>홈짱닷컴</li>
<li>Homzzang.com</li>
<li>홈페이지 제작관리</li>
</ol>
결과보기
