List - Style - Position
개요 : 이 속성은 목록의 항목(list item) 요소에 부여할 불릿이나 번호 등 표시자(marker) 이미지를 지정한다.
정의
|
list - style - image |
설명 |
|
값 |
url | none | inherit |
|
기본값 |
outside |
|
적용대상 |
항목(list item) 요소 |
|
상속 |
됨 |
|
백분율 |
사용 불가 |
|
미디어 |
visual |
값
|
값 |
설명 |
|
outside |
표시자를 항목(list-item) 밖에 위치하도록 지정한다. |
|
inside |
표시자를 항목(list-item) 안에 위치하도록 지정한다. |
|
inherit |
부모 요소의 값을 상속하도록 지정한다. |
View Source :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
<style type="text/css">
.pos_out {
list-style-position: outside;
}
li {
border: 1px dotted gray;
}
</style>
<body>
<ul>
<li class="pos_out">list-style-position: outside;</li>
<li class="pos_out">마커가 list항목의 <strong>외부</strong>에 있다</li>
<li>outside는 list-style-position속성의 default값이다</li>
<br />
</ul>
</body>
Result :
View Source :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Insert title here</title> <style type="text/css"> .pos_in { list-style-position: inside; } li { border: 1px dotted gray; } </style> <body> <ul> <li class="pos_in">list-style-position: inside;</li> <li class="pos_in">마커가 list항목의 <strong>내부</strong>에 있다</li> <li class="pos_in">list-style-position은 중요한 속성은 아닌 것 같네요^^;</li> </ul> </body>Result :
''.' Programs > CSS' 카테고리의 다른 글
| list-style-type (0) | 2012.03.20 |
|---|---|
| List - Style - Image (0) | 2012.03.20 |
| List - Style (0) | 2012.03.20 |
| Table - Layout (0) | 2012.03.20 |
| Border-Collapse (0) | 2012.03.20 |