CSS 리스트 스타일 ul, ol, li 목록 태그 list-style 속성 정리
리스트 불릿, 번호 스타일 변경 list-style-type 속성
ul 태그는 순서 없는 리스트를 작성할 때, 사용하는데, 리스트 목록 앞에 불릿(가운뎃점) 모양이 붙게 되는데, 기본값은 검은색으로 채워진 원 모양입니다. ol 태그의 경우에는 순서가 있는 리스트를 만들 때 사용하며, 기본값은 10진수 숫자로 표현을 하게 됩니다. CSS의 list-style-type 속성을 사용하면 기본값으로 사용되는 기호 외에 다른 기호를 사용할 수 있습니다.
list-style-type 속성값
속성값 | 모양 | 기호 |
| disc | 채운 원 모양 | ● |
| circle | 빈 원 모양 | ○ |
| square | 채운 사각형 모양 | ■ |
| decimal | 1부터 시작하는 10진수 | 1, 2, 3 |
| decimal-leading-zero | 앞에 0이 붙은 10진수 | 01, 02, |
| lower-roman | 로마 숫자 소문자 | |
| upper-roman | 로마 숫자 대문자 | |
| lower-alpha, lower-latin | 알파벳 소문자 | a, b, c |
| upper-alpha, upper-latin | 알파벳 대문자 | A, B, C |
| none | 블릿이나 숫자를 없앰 |
속성값의 none을 사용하게 되면 블릿 기호 또는 숫자를 없애게 되는데 해당 속성값을 사용 후 리스트 태그로 메뉴 구성을 할 때 자주 사용되는 속성값입니다.
list-style-type 예제
<style>
ul {
list-style-type : square;
}
ol {
list-style-type : lower-roman;
}
</style>
</head>
<body>
<ul>
<li>삼국지</li>
<li>대도시의사랑법</li>
<li>소나기</li>
<li>메밀꽃필무렵</li>
</ul>
<ol>
<li>기상</li>
<li>세면</li>
<li>아침식사</li>
<li>출근</li>
</ol>
</body>
 |
| CSS의 list-style-type 속성을 사용하면 여러가지 기호로 리스트를 꾸밀 수 있습니다. |
이미지로 리스트 태그를 꾸미는 list-style-image 속성
리스트 태그 앞에 붙는 기호를 이미지로 변경하여 사용할 수도 있습니다. 이때 list-style-image 속성을 사용하면 됩니다. url 속성값에 이미지 경로를 지정해 주면 됩니다.
list-style-image 기본형
ul {
list-style-image: url('image/list_style.png');
}
리스트 들여쓰기 list-style-position 속성
list-style-position 속성을 사용하면, 들여 쓰기를 사용할 수 있습니다. 기본값은 outside이고 inside를 사용할 경우 기본 위치보다 안으로 들여 쓸 수 있습니다.
list-style-position 사용 예제
<style>
ul {
list-style-position: inside;
}
ol {
list-style-type : lower-roman;
}
</style>
</head>
<body>
<ul>
<li>삼국지</li>
<li>대도시의사랑법</li>
<li>소나기</li>
<li>메밀꽃필무렵</li>
</ul>
<ol>
<li>기상</li>
<li>세면</li>
<li>아침식사</li>
<li>출근</li>
</ol>
</body>
 |
| list-style-positon 속성을 사용해서 리스트에 들여쓰기를 적용하였습니다. |
리스트 관련 스타일을 한번에 정의하는 list-style 속성
현재까지 알아본 리스트 관련 개별 속성들은 list-style 속성을 사용하면 list-style-type, list-style-image, list-style-position 속성을 한 번에 선언할 수 있습니다.
list-style 속성 예제
ul {
list-style : none inside;
}
위와 같이 띄어쓰기로 구분하여 불릿 기호를 없애고 들여 쓰기 하는 스타일을 한꺼번에 지정할 수 있습니다.