[css] list-style
페이지 정보
작성자 서방님 댓글 0건 조회 135회 작성일 11-11-21 15:22본문
list-style-type : disk | circle | square | decimal | lower-roman | upper-roman
lower-alpha | upper-alpha | none
list-style-image : url(실지 url 주소)
list-style-position : inside | outside
list-style : keyword + position + url(실지 url 주소)undefined
[리스트 스타일을 한꺼번에 설정하고자 할때 쓰는 속성입니다. type, image, position 을
한번에 나타낼수 있다는 말이죠.. 저 순서대로 적으심 됩니다.]
인라인 방식 예제입니다. 임베디드 방식을 사용할경우에는 일일이 설정해줄 필요 없이
모든 " LI " 에는 자동으로 임베디드에서 설정한대로 표현이 됩니다.
<ul>
<li style="list-style-type:decimal"> 리스트 관련 속성 1
<li style="list-style-type:upper-roman; list-style-position:inside"> 리스트 관련 속성 2
<li style="list-style-type:upper-alpha; list-style-position:outside"> 리스트 관련 속성 3
</ul>
- 리스트 관련 속성 1
- 리스트 관련 속성 2
- 리스트 관련 속성 3
1. list-style-type
속성값 : disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none | inherit
display: list-item 속성과 함께 사용
상속 된다
list-style-image가 none으로 설정 되어 있거나 list-style-image로 지정해준 이미지를 찾을 수 없으면 적용 됨
(1) Numaric(숫자)
decimal : Decimal numbers ( beginning with 1. )
decimal-leading-zero : Decimal numbers padded by initial zeros (e.g., 01, 02, 03, ..., 98, 99).
lower-roman : Lowercase roman numerals (i, ii, iii, iv, v, etc.).
upper-roman :Uppercase roman numerals (I, II, III, IV, V, etc.).
hebrew :Traditional Hebrew numbering.
georgian :Traditional Georgian numbering (an, ban, gan, ..., he, tan, in, in-an, ...).
armenian :Traditional Armenian numbering.
cjk-ideographic :Plain ideographic numbers
hiragana :a, i, u, e, o, ka, ki, ...
katakana :A, I, U, E, O, KA, KI, ...
hiragana-iroha :i, ro, ha, ni, ho, he, to, ...
katakana-iroha :I, RO, HA, NI, HO, HE, TO, ...
어떤 넘버링 시스템이 어떻게 작용하는지 모르겠으면 decimal을 쓴다
(2) 알파벳
lower-latin or lower-alpha :Lowercase ascii letters (a, b, c, ... z).
upper-latin or upper-alpha :Uppercase ascii letters (A, B, C, ... Z).
lower-greek :Lowercase classical Greek alpha, beta, gamma, ... (έ, ή, ί, ...)
알파벳 갯수 보다 많은 수의 리스트 넘버를 가지면 안된다(26개)
--> 숫자를 쓴다
라틴 알파벳을 사용할 때 예 :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Lowercase latin numbering</TITLE>
<STYLE type="text/css">
OL { list-style-type: lower-roman }
</STYLE>
</HEAD>
<BODY>
<OL>
<LI> This is the first item.
<LI> This is the second item.
<LI> This is the third item.
</OL>
</BODY>
</HTML>
다음과 같이 출력 된다
i This is the first item.
ii This is the second item.
iii This is the third item.
주의해서 볼 점 : 마커가 오른쪽 정렬 되어 있다
2. list-style-image
속성값 : <uri> | none | inherit
디폴트 : none
display: list-item 속성과 함께 사용
상속 된다
3. list-style-position
속성값 : inside | outside | inherit
디폴트 : outside
display: list-item 속성과 함께 사용
상속 된다
inside 로 설정 해주면 outside 보다 안쪽으로 출력 된다
들여 쓰기 해줘야 하는 경우 사용
예:
<HTML>
<HEAD>
<TITLE>Comparison of inside/outside position</TITLE>
<STYLE type="text/css">
UL { list-style: outside }
UL.compact { list-style: inside }
</STYLE>
</HEAD>
<BODY>
<UL>
<LI>first list item comes first
<LI>second list item comes second
</UL>
<UL class="compact">
<LI>first list item comes first
<LI>second list item comes second
</UL>
</BODY>
</HTML>
위와 같이 코딩해서 실행 시키면 다음과 같이 출력 된다
1. first list item comes first
2. second list item comes second
1. first list item comes first
2. second list item comes second
4. 속기법
속성 : list-style'
속성값 : [ <'list-style-type'> || <'list-style-position'> || <'list-style-image'> ] | inherit
[]의 값은 선택적, 순서 상관 없다
예 1:
UL { list-style: upper-roman inside } --> UL 엘리먼트에 적용
==> <UL >
<LI>first list item comes first
<LI>second list item comes second
</UL>
UL > UL { list-style: circle outside } --> UL 엘리먼트의 자식 UL 엘리먼트(즉 중첩된 UL 엘리먼트 중 안쪽의 UL 엘리먼트)에 적용
==> <UL class="alpha">
<LI>second list item comes second
<UL>
<LI>first list item comes first
<LI>second list item comes second
</UL>
</UL>
위의 예에서 초록색 부분에 각각 적용됨
예 2:
OL.alpha LI { list-style: lower-alpha } --> ol 엘리먼트 중 alpha클래스의 li엘리먼트에 적용
==> <UL class="alpha">
<LI>first list item comes first
<LI>second list item comes second
</UL>
OL.alpha > LI { list-style: lower-alpha } --> ol 엘리먼트 중 alpha 클래스의 자식 엘리먼트에서 li엘리먼트에 적용
==> <UL class="alpha">
<LI>second list item comes second
<UL>
<LI>first list item comes first
<LI>second list item comes second
</UL>
</UL>
위의 예에서 초록색 부분에 각각 적용됨
위의 예 1. 2. 에서 보면 결과 적으로는 같은 부분에 적용 되는 것을 알 수 있다
주의 : 중첩된 리스트에서는
OL.alpha LI { list-style: lower-alpha }
UL LI { list-style: disc }
과 같이 코딩 하면(중첩된 div에서 하던 코딩 법 처럼) 가장 외곽에 적용된 스타일만 적용 된다
(캐스케이드를 계산에 어 우선 순위 때문)
여기서는 알파벳 소문자가 될 것이다
이것을 실행 하면
a. level 1
a. level 2
와 같이 출력 된다
원하는 결과를 얻기 위해서는
리스트(li) 엘리먼트는 제외한 부분만 코딩 해준다
OL.alpha { list-style: lower-alpha }
UL { list-style: disc }
--> 출력:
a. level 1
- level 2
댓글목록
등록된 댓글이 없습니다.
