[HTML/CSS] CSS의 LIST속성
[HTML/CSS] CSS의 LIST속성
|
본 포스팅은 우선 CSS의 작성법 이해했다는 가정하에 작성되었습니다. 잘 모르겠으면 관련 포스팅을 참조해주세요. |
|
List속성은 앞서 다룬 "<OL>, <UL> 목록 태그만들기!!" 의 내용과 비슷합니다만 이번엔 HTML이 아닌 CSS로 효과를 주기 때문에 좀더 다양한 형태로 표현이 가능해요. 순서가 없는 <UL>은 다음과 같은 효과를 부여합니다. * Disc * Circle * Square 순서가 있는 <OL>은 다음과 같은 효과를 부여합니다. * Decimal * Decimal-Leading-Zero * Lower-Roman * Upper-Roman * Lower-Greek * Lower-Latin * Upper-Latin * Armenian * Georgian * Lower-Alpha * Upper-Alpha |
|
|
|
|
List-Style-Type
|
태그 |
속성 |
속성값 |
비고 |
|
style |
list-style-type |
disc |
안이 채워진 원형 |
|
circle |
안이 비워진 원형 | ||
|
square |
사각형 | ||
| decimal | 1, 2, 3, 4.... | ||
| decimal-leading-zero |
01, 02, 03, 04.... | ||
| lower-roman | i, ii, iii, iv.... | ||
| upper-roman |
I, II, III, IV.... | ||
| lower-greek |
α, β, γ, δ.... | ||
| lower-latin | a, b, c, d.... | ||
| upper-latin |
A, B, C, D.... | ||
| armenian |
아르메니아 문자 | ||
| georgian | 조지안 문자 | ||
| lower-alpha | a, b, c, d.... | ||
|
upper-alpha |
A, B, C, D.... |
|
본래 <OL>, <UL>태그를 구분해서 사용해야 하지만 CSS에서는 혼용해서 사용해도 상관없습니다. 즉 <ul>태그에 Decimal을 사용해도 괜찮고, <ol>태그에 disc를 사용하는 것도 가능합니다. 예) ul {list-style-type: disc;} |
List-Style-Position
|
태그 |
속성 |
속성값 |
비고 |
|
style |
list-style-position |
inside |
목록이 틀 안에 위치함 |
|
outside |
목록이 틀 밖에 위치함 |
|
목록의 위치를 지정합니다. |
List-Style-Image
|
태그 |
속성 |
속성값 |
비고 |
|
style |
list-style-image |
url('이미지경로') |
이미지를 활용한 목록 |
|
이미지를 사용해서 목록을 꾸밀수도 있습니다. |
< 연습하기 >
