[html/css] list-style 속성 배우기

 

 

[html/css] list-style 속성 배우기

 

list-style-type, list-style-position, list-style-image속성

 

 

얼마전에 <ol> <ul> <li>태그를 배우면서

 

항목 모양을 선택하는 type 속성을 배웠습니다.

 

<ol>태그는,  type  :  1 / a / A / i / I   으로 순서의 종류를 선택하고,

<ul>태그는,  type  : disc / circle / square 으로 각 항목의 모양을 선택할 수 있었어요.

 

 

<ol> <ul> <li>  목록 태그 사용법 

 

css에서는 list-style 속성을 사용하여 같은 기능을 구현할 수 있어요.

 

오히려 type 속성보다는 css로 스타일을 주는 것을 권장합니다.

 

 

list-style 속성

 

 

list-style 속성은, 항목 모양의 종류, 위치, 항목에 넣을 이미지를 한꺼번에 지정할 수 있어요.

list-style: list-style-type(항목 모양 종류) list-style-position(위치)  list-style-image(이미지)

 

 

→사용 예

 

ul{

list-style: disc outside none;

} 

 

위 속성값은 모두 기본값입니다(속성값이 생략될 경우, 기본값이 적용)

 

→사용 예 2

 

ul{

list-style:square url("bcat.png");

}

 

 

 

list-style-type, list-style-position, list-style-image 을 각각 지정할 수도 있습니다.

 

 

 

list-style-type 속성

 

list-style-type 속성은 항목 모양의 종류를 지정합니다.

 

 

→속성값

 

disc : 기본값, 검은 원

circle : 원

square 사각형

decimal : 숫자(1로 시작하는 십진수)

lower-alpha  : 알파벳 소문자 (a, b, c, d, e,..)

lower-roman : 로마자 소문자 (i, ii, iii, iv, v,..)

upper-alpha : 알파벳 대문자 (A, B, C, D, E...)

upper-roman :  로마자 대문자 (I, II, III, IV, V,...)

none : 항목 표시가 되지 않음

initial  : 기본값으로 초기화

 

 
armenian 전통적인 아르메니아 숫자(ayb/ayp, ben/pen, gim/keem…)
georgian 전통적인 조지왕조 시대의 수(an, ban, gan, … he, tan, in…)
decimal-leading-zero  01, 02, 03처럼 앞에 0이 오는 숫자
lower-greek 그리스 소문자 (γ.E.g. α, β, γ…)
lower-latin  라틴 소문자 (a, b, c, d, e, )
upper-latin 라틴 대문자 (A, B, C, D, E...)
inherit 부모로부터 상속

 

cjk-ideographic : 표의적인 숫자 (一, 二, 三, ...)
hebrew  전통적인 히브리 수 
hiragana 전통적인 히라가나 수 (a, i, u, e, o, ka, ki, )
hiragana-iroha 히라가나 이로하 수  (i, ro, ha, ni, ho, he, to,…)
katakana 카다가나(A, I, U, E, O, KA, KI,..)
katakana-iroha  (I, RO, HA, NI, HO, HE, TO, )

 

 

→list-style-type 속성 브라우저 지원 상세

 

none, disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman

 

지원 브라우저: chrome 1.0, FF 1.0, IE4, Opera 3.5, Safari 1.0(85)

 

lower-latin, upper-latin, lower-greek, armenian, georgian

 

지원 브라우저: Chorme 1.0, FF 1.0, IE8.0, Opera 6.0, Safari 1.0(85)

 

decimal-leading-zero

 

지원 브라우저: Chorme 1.0, FF 1.0, IE8.0, Opera 8.0, Safari 1.0(85)

 

hebrew, cjk-ideographic, hiragana, hiragana-iroha, katakana, katakana-iroha

 

지원 브라우저: chrome 1.0, FF1.0. IE(지원하지 않음) Opera 7, Sarafi 1.0-1.2(85-125)

참조: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type

 

 

→사용 예:

ol
{
list-style-type:  decimal-leading-zero;
}

 

ul
{
list-style-type:  square;
}

 

 

list-style-position 속성

 

list-style-position 속성은 항목을 어느 위치에서 시작할지 지정합니다. 

 

→속성값

 

 

outside 기본값으로, 왼쪽에 둠.

inside 항목과 텍스트를 들여쓰기 함.

 

→사용 예:

ul
{
list-style-position: inside;
}

 

 

 

 

list-style-image 속성

 

 

list-style-image는, 항목의 종류를 이미지로 넣는 속성입니다.

 

이미지가 나오지 않을 경우에 대비하여,  list-style-type 속성을 함께 지정해주는 게 좋음.

 

→속성값

 

none  이미지가 나오지 않음. 기본값
url   이미지의 경로 지정

 

 

→사용 예

ul
{
list-style-image: url("catbullet.png");
}

 

float된 항목을 표시할 때 list-style-image가 제대로 작동하지 않기도 한답니다. 

이 때는 background image 속성을 사용하여 해결할 수 있습니다.

 

배경 이미지를 넣는 background-image 속성

 

 

 

→html/css 예제를 보겠습니다~

list-style.htm

 

html

<h2>list-style 속성</h2> <ul class="ls">  <li> 영어</li>  <li>음악</li>  <li>수학</li>  <li>과학</li> </ul>   <h2>list-style-type 속성</h2> <ul class="lst">  <li>명사</li>  <li>형용사</li>  <li>동사</li>  <li>부사</li> </ul> <h2>list-style-position 속성</h2> <ul class="lsp">  <li>명사</li>  <li>형용사</li>  <li>동사</li>  <li>부사</li> </ul> <h2>list-style-image 속성</h2> <ol class="lsi">  <li>명사</li>  <li>형용사</li>  <li>동사</li>  <li>부사</li> </ol>

  

 

css

ul.ls{ list-style:square inside url("check.png");}   ul.lst{ list-style-type:lower-greek;}   ul.lsp{ list-style-position:outside;}   ol.lsi{ list-style-image:url("check.png");}

 

 

→실행 화면

 

 

 

 

정의 목록 만들기 dl, dt, dd 태그

 

글자 간격 지정 속성 letter-spacing