[list] CSS - list-style 속성 ★ - 리스트 스타일 일괄 (= 리스트마커 = list-style속성 = 리스트스타일속성) ※ 리스트스타일에 색상/색깔 추가

1. list-style 예제 - 리스트 스타일 일괄 지정
2. list-style 정의
3. list-style 구문
4. list-style 예제 - 특수문자 아이콘 이용 (예: ★)
5. 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 정의

 

리스트 관련 모든 속성을 일괄 지정.

• list-style-type 속성 - 리스트스타일 종류
• list-style-position 속성 - 리스트스타일 위치
• list-style-image 속성 - 리스트스타일 이미지

  

---

 

1.

• 기본값: disc outside none
• 상속여부: O
• 애니효과: X
• CSS버전:CSS1
• JS구문: object.style.listStyle="decimal inside"

2.

• list 요소가 아니더라도, display:list-item 추가해 인라인 성격의 list 요소로 만들 수 있음. 예제보기
• 리스크마커 색상은 <li> 요소에 대해 CSS color 속성으로 지정.

 

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.
만약, 이 중 하나라도 없으면 해당 속성의 기본값 적용됨.

 

---

[속성값]

 

list-style-type
리스트마커 타입. (기본값: disc)

• 가능값: 아주 다양. 위 링크에서 확인. 

list-style-position

리스트마커 위치. (기본값: outside)

• 가능값 종류: inside, outside, initial, inherit

 

list-style-image
리스트마커 이미지. (기본값: none)

• 가능값 종류: 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>

 

결과보기