이번에는 목록과 관련된 CSS속성에 대해서 알아보도록 하겠습니다.
우선 어떤 속성들이 있는지 그놈들의 이름부터 한번 살펴봅시다.
list-style-type 이건 목록 스타일, 예를 들면 숫자, 영문, 동그라미, 사각형 , 뭐 이런 것들을 설정하는 속성입니다.
list-style-position 이건 목록이 인덴트 되어야 하는지를 결정하는 속성입니다. 하위 목록이냐 아니냐 뭐 이런거죠.
list-style-image 목록 앞에 이미지를 보여주겠다는 겁니다. 단순한 숫자목록이나 기호목록이 싫다면 이걸 쓸 수도 있겠네요.
list-style 목록 관련 스타일을 한꺼번에 정의할 수 있게 해주는 속성이죠.
marker-offset 목록에서 마커(숫자, 동글라미 등등)와 텍스트 사이의 간격을 결정짓는 속성입니다.
이제 각 속성들을 어떻게 사용하는지 예제를 한번 볼까요??
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> |
결과는 아래와 같습니다.
|
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> |
결과는 아래와 같습니다.
|
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에 어떤 이미지 소스의 경로가 들어가느냐에 따라 달라지는 결과입니다. )
|
다음 예제를 보시죠.
<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> |
결과는 아래와 같습니다.
|
이 속성은 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> |
결과는 아래와 같습니다.
|
Reference : http://www.tutorialspoint.com/css/css_lists.htm
| [CSS] 16. Cursor ( 마우스 커서 모양 ) (0) | 2016.06.12 |
|---|---|
| [CSS] 15. Paddings ( 패딩 ) (0) | 2016.06.12 |
| [CSS] 13. Margins ( 마진, 여백 ) (0) | 2016.06.12 |
| [CSS] 12. Borders ( 테두리, 보더 설정 ) (0) | 2016.06.12 |
| [CSS] 11. Table ( 테이블 설정 ) (0) | 2016.06.12 |