[CSS] 14. Lists ( 리스트, 목록 )

이번에는 목록과 관련된 CSS속성에 대해서 알아보도록 하겠습니다. 

우선 어떤 속성들이 있는지 그놈들의 이름부터 한번 살펴봅시다. 

• list-style-type 이건 목록 스타일, 예를 들면 숫자, 영문, 동그라미, 사각형 , 뭐 이런 것들을 설정하는 속성입니다. 

• list-style-position 이건 목록이 인덴트 되어야 하는지를 결정하는 속성입니다. 하위 목록이냐 아니냐 뭐 이런거죠. 

• list-style-image 목록 앞에 이미지를 보여주겠다는 겁니다. 단순한 숫자목록이나 기호목록이 싫다면 이걸 쓸 수도 있겠네요.

• list-style 목록 관련 스타일을 한꺼번에 정의할 수 있게 해주는 속성이죠.

• marker-offset 목록에서 마커(숫자, 동글라미 등등)와 텍스트 사이의 간격을 결정짓는 속성입니다.

이제 각 속성들을 어떻게 사용하는지 예제를 한번 볼까요?? 

The list-style-type Property:

list-style-type 속성은 뭐 목록에 보여지는 마커의 스타일을 변경하기위한 속성입니다. 

목록에는 크게 순서있는 목록과 순서없는 목록이 있죠.

 

다음은 순서없는 목록에서 사용할 수 있는 list-style-type의 속성값입니다. 

Value	Description
none	NA
disc (default)	A filled-in circle
circle	An empty circle
square	A filled-in square

 

다음은 순서있는 목록에서 사용되는 속성값입니다. 

Value	Description	Example
decimal	Number	1,2,3,4,5
decimal-leading-zero	0 before the number	01, 02, 03, 04, 05
lower-alpha	Lowercase alphanumeric characters	a, b, c, d, e
upper-alpha	Uppercase alphanumeric characters	A, B, C, D, E
lower-roman	Lowercase Roman numerals	i, ii, iii, iv, v
upper-roman	Uppercase Roman numerals	I, II, III, IV, V
lower-greek	The marker is lower-greek	alpha, beta, gamma
lower-latin	The marker is lower-latin	a, b, c, d, e
upper-latin	The marker is upper-latin	A, B, C, D, E
hebrew	The marker is traditional Hebrew numbering
armenian	The marker is traditional Armenian numbering
georgian	The marker is traditional Georgian numbering
cjk-ideographic	The marker is plain ideographic numbers
hiragana	The marker is hiragana	a, i, u, e, o, ka, ki
katakana	The marker is katakana	A, I, U, E, O, KA, KI
hiragana-iroha	The marker is hiragana-iroha	i, ro, ha, ni, ho, he, to
katakana-iroha	The marker is katakana-iroha	I, RO, HA, NI, HO, HE, TO

 

 

예제를 한번 볼까요. 

<ul style="list-style-type:circle;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ul> <ul style="list-style-type:square;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ul> <ol style="list-style-type:decimal;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ol> <ol style="list-style-type:lower-alpha;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ol> <ol style="list-style-type:lower-roman;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ol>

결과는 아래와 같습니다. 

Maths Social Science Physics Maths Social Science Physics Maths Social Science Physics Maths Social Science Physics Maths Social Science Physics

 

The list-style-position Property:

list-style-position 속성은 bullet point를 포함하는 박스의 내부 또는 외부의 위치를 지정하는 속성입니다.

Value	Description
none	NA
inside	If the text goes onto a second line, the text will wrap underneath the marker. It will also appear indented to where the text would have started if the list had a value of outside.
outside	If the text goes onto a second line, the text will be aligned with the start of the first line (to the right of the bullet).

 

다음 예제를 보시죠.

<ul style="list-style-type:circle; list-stlye-position:outside;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ul> <ul style="list-style-type:square;list-style-position:inside;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ul> <ol style="list-style-type:decimal;list-stlye-position:outside;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ol> <ol style="list-style-type:lower-alpha;list-style-position:inside;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ol>

결과는 아래와 같습니다.

Maths Social Science Physics Maths Social Science Physics Maths Social Science Physics Maths Social Science Physics

 

The list-style-image Property:

list-style-image 속성은 위에서 말씀드린 것처럼 이미지 파일을 소스로 지정하여 목록의 마커로 사용할 수 있게끔 해주는 속성입니다.  

 

다음 예제를 보시죠.

<ul> <li style="list-style-image: url(/images/bullet.gif);">Maths</li> <li>Social Science</li> <li>Physics</li> </ul> <ol> <li style="list-style-image: url(/images/bullet.gif);">Maths</li> <li>Social Science</li> <li>Physics</li> </ol>

결과는 아래와 같습니다. ( url에 어떤 이미지 소스의 경로가 들어가느냐에 따라 달라지는 결과입니다. ) 

Maths Social Science Physics Maths Social Science Physics

 

The list-style Property:

다음 예제를 보시죠. 

<ul style="list-style: inside square;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ul> <ol style="list-style: outside upper-alpha;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ol>

결과는 아래와 같습니다.

Maths Social Science Physics Maths Social Science Physics

 

The marker-offset Property:

이 속성은 IE 6, Netscape 7 이하에서는 지원하지 않는다는군요.

예제를 봅시다. 

<ul style="list-style: inside square; marker-offset:2em;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ul> <ol style="list-style: outside upper-alpha; marker-offset:2cm;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ol>

 

결과는 아래와 같습니다.

Maths Social Science Physics Maths Social Science Physics

 

 

 

 

 

Reference : http://www.tutorialspoint.com/css/css_lists.htm