<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>문서</title>
<style> ;
ul{
/*기본 작은 점*/
list-style-type: disc;
/*빈 작은 점*/
list-style-type: Circle;
/*단색 작은 사각형*/
list -style -type: square;
/*숫자 일련번호는 순서화된 목록이 됩니다*/
list-style-type: 소수;
/*일련번호 앞에 0을 추가합니다: 예: 01, 02, 03*/
list- style -type:decimal-leading-zero;
/*원점을 대체하려면 이미지를 사용하세요. 크기가 매우 작아서 사용하기 어려워야 합니다. 대신 li 태그를 직접 제어하세요.*/
/*list-style-image: url(1.jpg); */
}
/*맞춤형 목록 항목*/
li{
/*점 취소*/
list-style-type: none;
/*이미지 위치 예약*/
패딩 - left: 2em;
/*이미지 업로드*/
list-style-image: url(1.jpg);
/*이미지 목록 항목은 반복되지 않습니다*/
background-repeat: no-repeat;
/*Image size*/
background- size: 1em 1em;
/*이미지 위치를 설정하고 텍스트 상단 그리드에 정렬한 다음 xy 축을 시각적으로 검사합니다*/
background-position: 0 4px;
}
</style> ;
</head>
<body>
<h3>프런트엔드 개발 도구</h3>
<ul>
<li>HTML</li>
<li>CSS</li> ;
<li>javaScript</li>
< ;li>jQuery</li>
<li>부트스트랩</li>
</ul>
</body>
</html>
표시된 결과 목록 항목에서 참조한 이미지가 여전히 동일합니다. 표시가 매우 크지만 1em 크기로 축소되지는 않습니다. 이유는 무엇입니까?
문제를 해결하려면 다음 두 가지 방법을 사용하는 것이 좋습니다. 1. 원본 이미지의 크기를 변경합니다. 2. li:before를 사용하여 설정