1. 비쥬얼스튜디오코드 프로그램으로 수업내용 복붙
2. 미리보기로 활용 복습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS - 목록 관련 스타일</title>
<style>
#ul1 {
list-style-type: disc; /* 기본값*/
list-style-type: circle;
list-style-type: square;
list-style-type: none;
list-style-image: url("resources/images/star.png");
list-style-position: inside;
}
#ol1 {
list-style-type: decimal; /* 기본값 */
list-style-type: decimal-leading-zero; /* 숫자 앞에 0이 붙음 */
list-style-type: upper-alpha;
list-style-type: lower-roman;
list-style-position: outside;
list-style-position: inside;
}
</style>
</head>
<body>
<h1>목록 관련 스타일 (list~)</h1>
<h3>list-style-type : 불릿 기호를 변경하고자 할 때 사용</h3>
<h3>list-style-image : 불릿 기호에 이미지를 적용하고자 할 때 사용</h3>
<h3>list-style-position : 불릿 기호의 위치 조정 시 사용</h3>
<pre>
* 순서 없는 목록 (ul)
선택자 {
list-style-type : disc | circle | square | none;
list-style-image : url("적용하고자 하는 이미지 경로");
list-style-position : inside | outside (기본값);
}
* 순서 있는 목록 (ol)
선택자 {
list-style-type : decimal | decimal-leading-zero;
list-style-type : lower-alpha | upper-alpha;
list-style-type : lower-roman | upper-roman;
}
</pre>
<h4>순서 없는 목록</h4>
<ul id="ul1">
<li>Java</li>
<li>Oracle</li>
<li>HTML</li>
<li>CSS</li>
</ul>
<h4>순서 있는 목록</h4>
<ol id="ol1">
<li>Java</li>
<li>Oracle</li>
<li>HTML</li>
<li>CSS</li>
</ol>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
'##CSS' 카테고리의 다른 글
| 테두리 관련 스타일 (0) | 2024.10.22 |
|---|---|
| 영역 관련 스타일 (1) | 2024.10.21 |
| 텍스트 관련 스타일 (2) | 2024.10.19 |
| 글꼴 관련 스타일 (0) | 2024.10.18 |
| 기타선택자 수업내용 복습 (5) | 2024.10.16 |