※ 목차
1. 기본 리스트 불릿 변경 및 제거
2. 순서 리스트 숫자 변경 및 제거
1. 기본 리스트 불릿 변경 및 제거
기본 리스트의 불릿 모양은 list-style-type 속성의 값을 변경함으로써 바꿀 수 있습니다. 기본 리스트의 list-style-type의 속성 값은 다음과 같습니다.
| 값 | 설명 |
| none | 불릿 제거 |
| disc | 기본값, 채운 원 모양 (●) |
| circle | 비어있는 원 모양 (○) |
| square | 채운 사각형 모양 (■) |
예시
아래 코드는 list-style-type의 값을 none으로 변경한 코드입니다.
html 코드
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h3>기본 리스트</h3>
<ul>
<li>첫번째 목차</li>
<li>두번째 목차</li>
<li>세번째 목차</li>
</ul>
</body>
css 코드
li {
list-style-type : none;
}
결과 화면
불릿이 제거된 것을 확인하실 수 있습니다.
2. 순서 리스트 숫자 변경 및 제거
순서 리스트의 숫자 유형은 list-style-type 속성의 값을 변경함으로써 바꿀 수 있습니다. 순서 리스트의 list-style-type의 속성 값은 다음과 같습니다.
| 값 | 설명 |
| none | 숫자 제거 |
| decimal | 기본 값. 십진수 (1,2,3,4,5 ...) |
| decimal-leading-zero | 십진수 (01, 02, 03 ... 10, 11 ...) |
| lower-roman | 소문자 로마 숫자 (i, ii, iii, iv ...) |
| upper-roman | 대문자 로마 숫자 (I, II, III, IV ...) |
| lower-alpha | 소문자 알파벳 (a, b, c ...) |
| lower-latin | |
| upper-alpha | 대문자 알파벳 (A, B, C ...) |
| upper-latin |
예시
아래 코드는 list-style-type의 값을 upper-roman으로 변경한 코드입니다.
html 코드
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h3>순서 리스트</h3>
<ol>
<li>첫번째 목차</li>
<li>두번째 목차</li>
<li>세번째 목차</li>
</ol>
</body>
css 코드
li {
list-style-type : upper-roman;
}
결과 화면
숫자 유형이 대문자 로마자로 변경된 것을 확인하실 수 있습니다.
'Programming > HTML5 & CSS3' 카테고리의 다른 글
| [CSS] 리스트 스타일 - 가로 리스트 빈 공간 없이 배경색 채우기 (0) | 2020.12.22 |
|---|---|
| [CSS] 리스트 스타일 - 가로 리스트 만들기, 리스트 색 변경 (0) | 2020.12.21 |
| [HTML] 리스트로 목차 만드는 법 (0) | 2020.12.19 |
| [HTML] alert 창 디자인 변경하기 (0) | 2020.12.18 |
| [HTML] 클릭 이벤트 발생 시 새 창 띄우기 (0) | 2020.12.17 |
