이미지 블릿

이미지 블릿

사각형이나 원형의 블리세 만족할 수 없다면, 자체적으로 제작하자. 포토샵이나 파이어웍스 같은 이미지 편집 프로그램을 사용하면,다채롭고 재미있는 블릿을 금방 제작할수있다.

페이지에 HTML, <img> 태그의 src 애트리뷰트를 사용하여 이미지를 넣을 경우 파일을 지정하는 것과 마찬가지로 CSS에서는 list-style-image 프로퍼티를 이용하여 사이트 상의 그림 경로를 지정할수 있다. 다음과 같이 프로퍼티를 사용하면된다. list-style-image:url(images/bullet.gif); url 이라는 용어와 소괄호는 꼭 있어야 한다 괄호안의 부분은 그림이 있는 경로다.HTML 과는 달리 경로를 따옴표로 감싸지 않는다는 점에 주의하자.

Note : 외부 스타일시트에 그림을 지정할 경우 이미지 경로는 웹페이지에 대해서가 아니라 스타일시트파일을 기준으로 정해진다.

list-style-image 프로퍼티를 이용하면 블리세 이미지를 사용할 수 있기는 하지만, 그 위치를 조절할 수는 없다. 블릿이 행보다 너무 위나 아래에 있어서 블릿 그림을 미세 조절하여 정확한 위치에 맞추어야 할지도 모른다. 더 좋은 방법은 background-image 프로퍼티를 사용하는 것이다. 그 프로퍼티를 사용하면 블릿 목록의 그림 위치를 매우 정확히 맞출 수있다.

Tip : Font 프로퍼티를 사용할때처럼 목록 프로퍼티를 지정하는 데에도 속기법이 있다. list-style 프로퍼티를 사용하면, 서로 다른 목록 프로퍼티인 list-style-image, list-style-position, list-style-type 각각에 대한 값을 한번에 지정할 수 있다.예를 들어 ul{list-style:circle inside;} 이라고 하면 비순차 목록을 안쪽에 위치한 빈 원형 블릿으로 형식화 할것이다. 두 스타일 유형을 포함하고 image-list-style 을 image-list-style: circle url(images/bullet.gif) 라고 안에 스타일 정의하면, 이 예에서 그림이 없을 경우, 웹 브라우저는 스타일 유형으로 빈원을 사용한다