• Q&A
  • 회원가입
  • 로그인

[list] CSS - list-style-type 속성 ★ - 리스트 스타일 타입 (= 리스트 마커 종류 = 리스트스타일타입속성)

6,344  

목차

  1. list-style-type 예제
  2. list-style-type 정의 
  3. list-style-type 구문

 

list-style-type 예제  
[예제1] <ul> 태그 경우 (= 순서 없는 리스트 경우)
 
<style> 
ul li { list-style-type :disk;}
</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.
CSS1

2.
모든 브라우저 지원.
 

list-style-type 구문 
 
selector {list-style-type: 속성값;}


[<ul> 태그용 속성값 (= 순서 없는 리스트 속성값)]
 
disc
검정 원모양 마커 (ul 리스트 기본값 )
 
circle
원 모양 마커
 
square
네모 모양 마커

 


[<ol> 태그용 속성값 (= 순서 있는 리스트 속성값)]
 
armenian
아르메니아 문자 순서 (그리스 문자를 기초로 해서 만든 특수 문자 38자)
 
cjk-ideographic
표의 문자 순서 (중국 한자)
 
decimal
숫서 순서 (ol 리스트 기본값)
1, 2, 3, ...
 
decimal-leading-zero
01, 02, 03 같이 한 자리수일 때 앞에 0을 붙여 순서 지정
 
georgian
Georgian alphabet 문자 순서 
 
hebrew
히브리어 문자 순서
 
hiragana
히라가나(일본 문자) 순서
 
hiragana-iroha
히라가나-이로하 (일본 문자) 순서
 
katakana
카타카나 (일본 문자) 순서
 
katakana-iroha
카타카나-이로하(일본 문자) 순서
 
lower-alpha
영어 소문자 순서
 
lower-greek
그리스어 소문자 순서
 
lower-latin
라틴어 소문자 순서
 
lower-roman
로마어 소문자 순서
 
upper-alpha
영어 대문자 넘버링
 
upper-latin
라틴어 대문자 번호
 
upper-roman
로마어 대문자 넘버링

 


[<ul> <ol> 공용 속성값]
 
none
리스트 마커 없음
 
inherit
부모요소 속성값 상속



찾아주셔서 감사합니다. Since 2012