<HTML5+CSS3>목록 스타일

list-style-type 속성 – 목록의 불릿과 번호 스타일 지정하기

-이 속성은 순서 없는 목록의 불릿과 순서 목록의 번호 유형을 지정합니다. 이 속성에 서는 순서 없는 목록+순서있는 목록을 통틀어 지정합니다.

 

순서 없는 목록에서 사용하는 불릿 유형

(1) disc :속이 찬 원

(2) circle :속이 빈 원

(3) square : 속이 찬 사각형

순서 있는 목록에서 사용하는 불릿 유형이다.

% 순서없는 항목을 나열하면서 불릿은 표시하고 싶지 않을 때는 속성 값을 none으로 지정하면 된다

다음 예는 순서 없는 목록의 불릿을 circle로 바꾸도록 지정한 것이다

ex) ul {list-style-type:circle;}

list-style-position 속성 – 목록에 들여쓴는 효과 내기

-이 속성은 불릿이 조금더 안쪽으로 쓰여지게끔 하는 속성입니다.

 

속성 값

(1)inside : 불릿이나 숫자를 안으로 들여씁니다.

(2)outside : 기본 값으로 불릿이나 숫자를 밖으로 들여씁니다

 

ex) ul { list-style-position : inside ; } ->순서 없는 목록의 불릿을 안으로 들여씀

 

list-style-image 속성 – 불릿 대신 이미지 넣기

-이 속성을 사용하면 불릿 기호 대신 원하는 이미지를 불릿으로 넣을 수 있다.

값은 불릿으로 사용할 이미지 파일 경로이다

ex) li { list-style-image:url (dot.gif) ; } -> dot.gif를 불릿으로 사용

 

list-style속성 –리스트 속성 한꺼번에 표시하기

-이 속성은 앞에서말한 list-style-type과 list-style-position,list-style-image 속성을 한거번에 표시하는 속성입니다.

<style>

article ol li {

list-style:upper-alpha inside url(bullet.png);

}

</style>

->이것처럼“ list-style: 불릿표시, 안or밖 들여쓰기 , 불릿이미지 경로 “ 로 설정해주면 된다.