• Q&A
  • 회원가입
  • 로그인

[list] CSS - list-style 속성 ★ - 리스트 스타일 일괄 (= 리스트 마커 = 리스트스타일속성)

목차
  1. list-style 예제
  2. list-style 정의
  3. list-style 구문
  4. 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

 


list-style 구문
 
선택자 {list-style: 속성값;}

 


※ 참고

1.
속성값 적을 때 아래 속성값들을 한칸 씩 띄어 나열.    
list-style-type, list-style-position, list-style-image     

2.
만약, 이 중 하나라도 없는 경우엔 해당 속성의 기본값이 반영.



list-style 속성값
 
list-style-type
가능값: 다양. list-style-type 에서 확인.
가능값: inside, outside, inherit
 
list-style-image
가능값: url, none, inherit
 
inherit
부모 요소의 속성을 상속

 


[주의]

1.
단축 속성 list-style 이용 시, 속성값을 반드시 (타입 → 포지션 → 이미지)순으로 나열. 단, 중간에 속성값이 
하나 빠져도 상관 없음.

2.
<ul> 이나 <ol> 요소 말고, 반드시 <li> 요소에 적용할 것.
 

오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012