목차
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>
결과보기
최신댓글