[02. CSS] 005. 목록 및 커서

목록에 쓰이는 프로퍼티는 글머리 기호, 글머리 기호 이미지, 글머리 기호 위치, 목록 단축형 등이 있다.

 

글머리 기호는 list-style-type 프로퍼티로 제어한다. 값으로 순서 있는 목록 <ol>에는 decimal, decimal-leading-zero, lower-alpha, upper-alpha, lower-roman, upper-roman을 가질 수 있고 순서 없는 목록 <ul>에는 none, disc, circle, square 값을 가질 수 있다.

 

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
</ul>

<style>
    ul {
        list-style-type: circle;
    }
</style>

 

글머리 기호에 이미지를 넣을 수도 있는데 이는 list-style-image 프로퍼티를 사용하여 추가할 수 있다.

 

ul {
    list-style-image: url("이미지 경로");
}

 

글머리 기호 위치를 텍스트에 들여쓸 수도 있다. 기본 값은 글머리 기호가 텍스트 박스의 왼쪽에 위치한다. 글머리 기호 위치는 list-style-position 프로퍼티를 사용하여 제어하며 outside, inside 값을 가질 수 있다.

 

앞서 배운 목록 스타일을 한꺼번에 적용하는 단축형 프로퍼티는 list-style이다. 이를 이용해 한 번에 목록 스타일을 지정할 수 있다.

 

ul {
    list-style: disc outside;
}

 

마지막으로 커서 스타일을 지정하는 프로퍼티에 대해 알아보자. cursor 프로퍼티는 마우스 커서의 타입을 제어한다. 마우스를 올려 놓았을 때 적절한 모양으로 변경하게 함으로써 사용자의 인터페이스를 보다 다채롭게 할 수 있다. 값으로는 auto, crosshair, default, pointer, move, text, wait, help, url(“이미지 경로”)을 가질 수 있다.

Text 커서 Pointer 커서 Wait 커서