목차
- list-style-type <ul>
1-1. 원 모양 불릿(기본) disc;
1-2. 빈 원 모양 불릿 circle;
1-3. 채운 사각형 모양 불릿 square;
1-4. 불릿 없애기 none; - list-style-type <ol>
2-1. 숫자 1로 시작하는 10진수 decimal;
2-2. 앞에 0이 붙는 10진수 decimal-leading-zero;
2-3. 소문자 로마 숫자 lower-roman;
2-4. 대문자 로마 숫자 upper-roman;
2-5. 알파벳 소문자 lower-alpha;
2-6. 알파벳 대문자 upper-alpha; - list-style-position 불릿/숫자 위치 지정
3-1. 목록 기호 들여쓰기 inside;
3-2. 목록 기호 내어쓰기 outside; - list-style-image url("이미지 파일 경로");
- list-style 목록 스타일 일괄 적용
1. list-style-type <ul>
<!-- HTML -->
<body>
<ul id="default-bullet">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>JQuery</li>
</ul>
</body>- list-style-type 속성으로 순서 없는 목록 스타일에 대해 지정할 수 있다.
- .html 문서상에 <ul>~<li> 작성한 데 대해 스타일을 적용한다.
1-1. 원 모양 불릿(기본) disc;
#default-bullet { list-style-type: disc; }
1-2. 빈 원 모양 불릿 circle;
#circle-bullet { list-style-type: circle; }
1-3. 채운 사각형 모양 불릿 square;
#square-bullet { list-style-type: square; }
1-4. 불릿 없애기 none;
#none-bullet { list-style-type: none; }
2. list-style-type <ol>
<!-- HTML -->
<body>
<ol id="default-number">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>JQuery</li>
</ol>
</body>- list-style-type 속성으로 순서 있는 목록 스타일에 대해 지정할 수 있다.
- .html 문서상에 <ol>~<li> 작성한 데 대해 스타일을 적용한다.
2-1. 숫자 1로 시작하는 10진수 decimal;
#defualt-number { list-style-type: decimal; }
2-2. 앞에 0이 붙는 10진수 decimal-leading-zero;
#zero-number { list-style-type: decimal-leading-zero; }
2-3. 소문자 로마 숫자 lower-roman;
#lower-rome-number { list-style-type: lower-roman; }
2-4. 대문자 로마 숫자 upper-roman;
#upper-rome-number { list-style-type: upper-roman; }
2-5. 알파벳 소문자 lower-alpha;
#lower-alpha { list-style-type: lower-alpha; }
2-6. 알파벳 대문자 upper-alpha;
#upper-alpha { list-style-type: upper-alpha; }
3. list-style-position 불릿/숫자 위치 지정
3-1. 목록 기호 들여쓰기 inside;
#bullet-inside { list-style-position: inside; }
3-2. 목록 기호 내어쓰기 outside;
#bullet-outside { list-style-position: outside; }
- inside; 속성값은 불릿 또는 숫자를 안쪽으로 들여쓰기 하게 만든다.
- 반대로 outside;는 기본값과 같이 해당 목록 기호들을 밖으로 내어쓴다.
4. list-style-image url("이미지 파일 경로");
#image-bullet { list-style-image: url("../images/circle.png");}
- 속성값으로서 url("이미지 파일 경로");를 전달해 기본 목록 기호 모양들을 대체할 수 있다.
5. list-style 목록 스타일 일괄 적용
선택자 { list-style: type값 position값 image값; }
- 목록 스타일을 일괄 적용할 수 있는 속성이다.
- 앞서 다룬 list-style-type, list-style-postion, list-style-image에 대해 형식에 맞춰 작성하거든 해당 스타일을 한 번에 지정할 수가 있다.
'Frontend > CSS' 카테고리의 다른 글
| [CSS3] 테두리 스타일 | border-style | box-shadow (0) | 2022.02.12 |
|---|---|
| [CSS3] 색상 및 배경 스타일 | 이미지 | background (0) | 2022.02.11 |
| [CSS3] 텍스트 스타일 | 문단 스타일 | font | text (0) | 2022.02.11 |
| [CSS3] link | 외부 스타일시트 | 웹 폰트 | CSS 단위 (0) | 2022.02.10 |
| [CSS3] 선택자 | 선택자 우선순위 | 태그 | 아이디 | 클래스 (0) | 2022.02.10 |
