반응형
|
스타일 시트 CSS 목록 표시 list-style-image 속성 이미지와 텍스트가 정렬 안될 때 |
|
환경: Eclipse Mars |
list-style-image 로 목록의 이미지를 꾸미게 되면 이미지와 텍스트가 정렬이 되지 않을 때가 있습니다. 이미지가 텍스트 보다 크기 때문입니다. 그렇다고 <li> 태그에 목록 이미지와 정렬하는 옵션이 있는 것도 아닙니다. 이 때는 list-style-image 사용하지 않고 <li> 태그에 목록을 위한 이미지를 배경으로 깔고 텍스트를 넣는 방법밖에 없습니다.
▼ 아래 그림처럼 이미지가 조금 크게 되면 나란히 정렬이 되지 않고 아래로 내려갑니다. 그래서 텍스트를 이미지의 중간으로 맞춰 보도록 하겠습니다. 리스트로 메뉴를 만들 때도 이런 현상이 있을 수 있습니다.
▼ 먼저 <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' 카테고리의 다른 글
| 스타일시트 CSS 가운데 정렬하는 방법, text-align 과 margin 이용 (1) | 2020.01.03 |
|---|---|
| 스타일시트 CSS text-align 을 이용한 정렬 방법 (1) | 2019.12.29 |
| 스타일시트 CSS margin 을 주는 방법 (2) | 2019.11.23 |
| 스타일 시트 CSS 리스트 속성으로 ul 태그를 메뉴로 만드는 방법 (0) | 2019.05.08 |
| 스타일 시트 CSS 목록 표시를 위한 list-style 속성 다루는 방법 (0) | 2019.04.02 |
| 스타일 시트 CSS gradient 종류 중 linear-gradient 그라데이션 적용하는 방법 (0) | 2019.03.17 |
| 스타일 시트 CSS 대소문자 전환을 위한 text-transform 속성 사용하기 (0) | 2019.03.06 |
| 스타일 시트 CSS 공백 문자, 빈칸, 줄 바꿈 처리를 위한 white-space 속성 사용하기 (0) | 2019.02.21 |
