스타일 시트 CSS 목록 표시 list-style-image 속성 이미지와 텍스트가 정렬 안될 때

 

환경: Eclipse Mars

 

list-style-image 로 목록의 이미지를 꾸미게 되면 이미지와 텍스트가 정렬이 되지 않을 때가 있습니다. 이미지가 텍스트 보다 크기 때문입니다. 그렇다고 <li> 태그에 목록 이미지와 정렬하는 옵션이 있는 것도 아닙니다. 이 때는 list-style-image 사용하지 않고 <li> 태그에 목록을 위한 이미지를 배경으로 깔고 텍스트를 넣는 방법밖에 없습니다.

 

아래 그림처럼 이미지가 조금 크게 되면 나란히 정렬이 되지 않고 아래로 내려갑니다. 그래서 텍스트를 이미지의 중간으로 맞춰 보도록 하겠습니다. 리스트로 메뉴를 만들 때도 이런 현상이 있을 수 있습니다.

스타일 시트 CSS 목록 표시 list-style-image 속성 이미지와 텍스트가 정렬 안될 때

 

먼저 <ul> 에 적용된 list-style none 로 바꿉니다. 그리고 <li> 목록 태그에 이미지를 배경으로 깔고 왼쪽으로 이동시킵니다. no-repeat 은 이미지가 반복해서 표현되지 않고 한번만 표시하기 위함입니다. padding-left 값은 이미지와 텍스트간의 거리를 주기 위해서 입니다. 배경으로 깔린 이미지는 padding 적용이 안되기 때문입니다. 단점은 <li> 태그에 이미지가 들어갔기 때문에 목록이 많이 들어가 보이죠

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>CSS</title>
<style type="text/css">
	/* ul { 
		list-style-image: url(folder1.png);
	} */ 
	ul {
		list-style: none;
	}
	li {
		background: url(folder1.png) left center no-repeat;
		padding-top: 5px; 
		padding-bottom: 5px; 
		padding-left: 40px;
	} 
</style>
</head>
<body>
	<h2>회사소개</h2>
	<ul>
		<li>개요</li>
		<li>비전</li>
		<li>경영진소개</li>
	</ul>
</body>
</html>

스타일 시트 CSS 목록 표시 list-style-image 속성 이미지와 텍스트가 정렬 안될 때

저작자 표시 비영리 변경 금지
신고
Posted by 녹두장군