list-style-type 속성-목록의 불릿과 번호 스타일 지정하기
순서 없는 목록<ul>에서 불릿 모양바꾸기
| 속성 값 | 설명 |
|---|---|
| disc(●) | 채운 원 |
| circle(○) | 빈 원 |
| square(◼︎) | 채운 사각형 |
| none | 불릿 없애기 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>불릿 바꾸기</title>
<style>
.sqbullet {
list-style-type:square; /* 채운 사각형 */
}
.nobullet{
list-style-type:none; /* 불릿 없애기 */
}
</style>
</head>
<body>
<h1>이지스퍼블리싱</h1>
<!-- 채운 사각형으로 불릿 바꾸기 -->
<ul class="sqbullet">
<li>회사소개</li>
<li>도서</li>
<li>자료실</li>
<li>질문답변</li>
<li>동영상강의</li>
</ul>
<!-- 불릿 없애기 -->
<ul class="nobullet">
<li>회사소개</li>
<li>도서</li>
<li>자료실</li>
<li>질문답변</li>
<li>동영상강의</li>
</ul>
</body>
</html>
순서 있는 목록에서 숫자 바꾸기<ol>
- decimal-leading-zero : 앞에 0이 붙는 십진수 (01,02,03)
- lower-alpha :소문자 알파벳 (a,b,c,d)
- upper-alpha :대문자 알파벳 (A,B,C,D)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>불릿 바꾸기</title>
<style>
.book1 {
list-style-type:lower-alpha; /* 소문자 알파벳 */
}
.book2 {
list-style-type: upper-roman; /* 대문자 로마 숫자 */
}
</style>
</head>
<body>
<h1>도서 시리즈</h1>
<ol class="book1">
<li>Do it! 시리즈</li>
<li>된다 시리즈</li>
<li>DCM 프로 사진가</li>
<li>데이터과학 시리즈</li>
</ol>
<ol class="book2">
<li>Do it! 시리즈</li>
<li>된다 시리즈</li>
<li>DCM 프로 사진가</li>
<li>데이터과학 시리즈</li>
</ol>
</body>
</html>
list-style-image속성-불릿 대신 이미지 넣기
앞에서 배운 list-style-type 속성에서 순서 없는 목록 앞에 붙는 불릿의 유형이 세 가지뿐이어서 단조로운 편이죠.불릿을 다양하게 사용하고 싶다면 list-style-image 속성을 이용하여 불릿을 원하는 이미지로 바꿀 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>불릿 바꾸기</title>
<style>
ul {
list-style-image:url('images/dot.png'); /* 불릿으로 사용할 이미지 */
}
</style>
</head>
<body>
<h1>이지스퍼블리싱</h1>
<ul>
<li>회사소개</li>
<li>도서</li>
<li>자료실</li>
<li>질문답변</li>
<li>동영상강의</li>
</ul>
</body>
</html>
list-style-position속성-목록에 들여쓰기
| 속성 값 | 설명 |
|---|---|
| inside | 불릿이나 숫자를 안쪽으로 들여 씁니다. |
| outside | 기본 값으로 불릿이나 숫자를 밖으로 내어 씁니다. |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>불릿 바꾸기</title>
<style>
.inside {
list-style-position:inside;
}
</style>
</head>
<body>
<h3> list-style-position을 지정하지 않음</h3>
<ul>
<li>회사소개</li>
<li>도서</li>
<li>자료실</li>
<li>질문답변</li>
<li>동영상강의</li>
</ul>
<h3> list-style-position : inside</h3>
<ul class=inside>
<li>회사소개</li>
<li>도서</li>
<li>자료실</li>
<li>질문답변</li>
<li>동영상강의</li>
</ul>
</body>
</html>
list-style 속성-목록 속성 한꺼번에 표시하기
font속성과 비슷하게 list-style속성으로 type,position,image 속성을 한꺼번에 표시할 수 있습니다.
ol{list-style-type:none;}
===========속성을 대체해 사용하면============
ol{list-style:none;}ol{
list-style-type:lower-alpha;
list-style-position:inside;
}
===========속성을값을 나열 ===============
ol{
list-style:lower-alpha, inside;
}
블로그 이전합니다! https://jyyoun1022.tistory.com/