목차
- list-style 예제 - 리스트 스타일 일괄 지정
- list-style 정의
- list-style 구문
- list-style 예제 - 특수문자 아이콘 이용 (예: ★)
- list-style 예제 - 리스트 스타일 색상 입히기
list-style 예제 - 리스트 스타일 일괄 지정
<style>
ul li { list-style:decimal none inside;}
</style>
<ul>
<li>홈짱닷컴 (homzzang.com) 사랑합니다.</li>
<li>홈짱닷컴 (homzzang.com) 사모합니다.</li>
<li>홈짱닷컴 (homzzang.com) 좋아합니다.</li>
</ul>
list-style 정의
리스트 관련 모든 속성을 일괄 지정.
1.
- 기본값: disc outside none
- 상속여부: O
- 애니효과: X
- CSS버전:CSS1
- JS구문: object.style.listStyle="decimal inside"
2.
3.
모든 브라우저 지원.
4.
MDN list-style 예제 보기
https://developer.mozilla.org/en-US/docs/Web/CSS/list-style
list-style 구문
selector {list-style: list-style-type list-style-position list-style-image|initial|inherit;}
PS1.
속성값 적을 때 아래 속성값들을 한칸 씩 띄어 나열.
list-style-type, list-style-position, list-style-image
PS2.
만약, 이 중 하나라도 없으면 해당 속성의 기본값 적용됨.
[속성값]
리스트마커 위치. (기본값: outside)
- 가능값 종류: inside, outside, initial, inherit
- 가능값 종류: none, url('imgURL'), initial, inherit
initial
이 속성의 기본값으로 지정.
inherit
부모요소의 속성값 상속.
[주의]
PS1.
단축 속성 list-style 이용 시, 속성값을 반드시 (타입 → 포지션 → 이미지)순으로 나열. 단, 중간에 속성값이 하나 빠져도 상관 없음.
PS2.
<ul> 이나 <ol> 요소 말고, 반드시 <li> 요소에 적용할 것.
list-style 예제 - 특수문자 아이콘 이용 (예: ★)
<style>
ul li {list-style: none;}
ul li::before {content: '★ '; color:red;}
</style>
<ul>
<li>홈짱닷컴</li>
<li>Homzzang.com</li>
<li>홈페이지 제작관리 강의</li>
</ul>
결과보기
list-style 예제 - 리스트 스타일 색상 입히기
※ list-style 숨기고, ::before 가상선택자 이용해 색깔 추가.
<style>
ul {
list-style: none;
}
ul li::before {
content: "\2022";
color: red;
font-weight: bold;
display: inline-block;
width: 1em;
margin-left: -1em;
}
</style>
<ul>
<li>홈짱닷컴</li>
<li>Homzzang.com</li>
<li>홈페이지 제작관리 강의</li>
<li>Since 2012</li>
</ul>
결과보기
