HTML5 및 CSS3 프로그래밍 용 목록의 이미지 사용 방법 - 인형

배경은 아니지만 HTML5 및 CSS3 웹 페이지의 목록 항목에 이미지를 사용할 수도 있습니다. 때로는 목록에 대한 특정 유형의 특수 글 머리 기호가 필요할 수 있습니다.

이 페이지에는 여러 종류의 고추가 나열되어 있습니다. 이런 종류의 목록에 대해 사용자 지정 고추 글 머리 기호는 단지 것입니다. 물론 CSS가 대답입니다.

listImages.

My Favorite Peppers

Green
Habenero
Arrisvivi Gusano

list-style-image 속성을 사용하면 이미지를 목록 항목에 첨부합니다. 사용자 정의 글 머리 기호를 작성하려면:

1. 사용자 정의 이미지로 시작하십시오.

   불릿 이미지는 작아야하므로 약간의 것을 만들어야 할 수도 있습니다. 이미지는 적절한 너비로 잘려 지지만 원본 이미지의 높이가 모두 유지되므로 작게 만드십시오.

2. url 속성을 사용하여 list-style-image를 지정하십시오.

   이미지를 목록 스타일 이미지로 설정하면 모든 글 머리 기호가 해당 이미지로 바뀝니다.

3. 브라우저에서 목록을 테스트하십시오.

   모든 것이 올바르게 작동하는지 확인하십시오. 브라우저가 이미지를 찾을 수 있는지, 크기가 맞는지, 그리고 모든 것이 예상 한 것처럼 보이는지 확인하십시오.

이미지를 사용하지 않으려는 경우 CSS에는 목록 항목에 적용 할 수있는 여러 가지 스타일이 있습니다. 목록 스타일 유형 규칙을 사용하여 목록을 여러 스타일 중 하나로 설정하십시오. 전체 목록은 공식 CSS 문서를 참조하십시오. 가장 일반적으로 사용되는 스타일 유형은 원반, 원, 사각형, 십진수, 상위 - 로마자, 하위 - 로마자, 상위 - 라틴어 및 하위 - 라틴어입니다.

순서가 정해지지 않은 목록이나 순서가없는 목록의 목록 항목에 숫자 스타일을 적용 할 수 있으므로 이러한 목록 유형 간의 구분은 이전보다 덜 중요합니다.