li 디자인 속성 변경


안녕하세요.
고코더 입니다.


1. li 특별한 CSS 속성 없이
태그를 작성하면 점 이 기본으로 앞에 붙습니다. 


 2. 이 li에 기본 모양은 변경이 가능 합니다.
list-style-type : li 앞에 모양을 변경 가능
list-style-image : li 앞에 모양을 이미지로 변경 

 3. 그리고 속성 옵션은 아래와 같습니다.
disc : 검은 원
circle : 공백 원
square 사각형
decimal : 십진수
lower-alpha  : 알파벳 소문자
lower-roman : 로마자 소문자
upper-alpha : 알파벳 대문자
upper-roman :  로마자 대문자
none : 표시 안함
initial  : 기본값
cjk-ideographic : 한자식 수 (一, 二, 三)
hebrew  히브리 수
hiragana 히라가나 수
hiragana-iroha : 히라가나 이로하 수
katakana : 카타카나
katakana-iroha  (I, RO, HA, NI, HO, HE, TO, )
armenian 아르메니아 수
georgian 지오지안 수
decimal-leading-zero  두 자릿수 숫자 0이 앞에 옴
lower-greek 그리스 소문자
lower-latin  라틴 소문자
upper-latin 라틴 대문자
inherit 부모로부터 상속


 3. 실질적으로 많이 쓰는
속성을 기준으로 예제 HTML을 만들어보았습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<html >
<head>
    <style type="text/css">
        ul {
        list-style-type :none;
        /* list-style-image : url(../Images/이미지주소); */
        }
    </style>
</head>
  <body>
    <p>고코더</p>
    <ul style="list-style-type: disc;">
      <li>홈페이지 : http://gocoder.net</li>
      <li>블로그 : http://gocoder.tistory.com</li>
    </ul>
    <p>고코더</p>
    <ul style="list-style-type: circle;">
      <li>홈페이지 : http://gocoder.net</li>
      <li>블로그 : http://gocoder.tistory.com</li>
    </ul>
    <p>고코더</p>
    <ul style="list-style-type: square;">
      <li>홈페이지 : http://gocoder.net</li>
      <li>블로그 : http://gocoder.tistory.com</li>
    </ul>
    <p>고코더</p>
    <ul style="list-style-type: decimal;">
      <li>홈페이지 : http://gocoder.net</li>
      <li>블로그 : http://gocoder.tistory.com</li>
    </ul>
    <p>고코더</p>
    <ul style="list-style-type: decimal-leading-zero;">
      <li>홈페이지 : http://gocoder.net</li>
      <li>블로그 : http://gocoder.tistory.com</li>
    </ul>
    <p>고코더</p>
    <ul style="list-style-type: lower-roman;">
      <li>홈페이지 : http://gocoder.net</li>
      <li>블로그 : http://gocoder.tistory.com</li>
    </ul>
    <p>고코더</p>
    <ul style="list-style-type: upper-roman;">
      <li>홈페이지 : http://gocoder.net</li>
      <li>블로그 : http://gocoder.tistory.com</li>
    </ul>
    <p>고코더</p>
    <ul style="list-style-type: lower-greek;">
      <li>홈페이지 : http://gocoder.net</li>
      <li>블로그 : http://gocoder.tistory.com</li>
    </ul>
    <p>고코더</p>
    <ul style="list-style-type: lower-latin;">
      <li>홈페이지 : http://gocoder.net</li>
      <li>블로그 : http://gocoder.tistory.com</li>
    </ul>
    <p>고코더</p>
    <ul style="list-style-type: upper-latin;">
      <li>홈페이지 : http://gocoder.net</li>
      <li>블로그 : http://gocoder.tistory.com</li>
    </ul>
    <p>고코더</p>
    <ul style="list-style-type: armenian;">
      <li>홈페이지 : http://gocoder.net</li>
      <li>블로그 : http://gocoder.tistory.com</li>
    </ul>
    <p>고코더</p>
    <ul style="list-style-type: georgian;">
      <li>홈페이지 : http://gocoder.net</li>
      <li>블로그 : http://gocoder.tistory.com</li>
    </ul>
    <p>고코더</p>
    <ul style="list-style-type: lower-alpha;">
      <li>홈페이지 : http://gocoder.net</li>
      <li>블로그 : http://gocoder.tistory.com</li>
    </ul>    
    <p>고코더</p>
    <ul style="list-style-type: upper-alpha;">
      <li>홈페이지 : http://gocoder.net</li>
      <li>블로그 : http://gocoder.tistory.com</li>
    </ul>
    <p>고코더</p>
    <ul style="list-style-type: none;">
      <li>홈페이지 : http://gocoder.net</li>
      <li>블로그 : http://gocoder.tistory.com</li>
    </ul>
    <p>고코더</p>
    <ul style="list-style-image : url(이미지 주소);">
      <li>홈페이지 : http://gocoder.net</li>
      <li>블로그 : http://gocoder.tistory.com</li>
    </ul>
  </body>
</html>
cs
 4. 웹에서의 확인한 페이지는 이렇습니다.
원하는걸 확인해보세요.



마무리


li가 왜 필요한지 알겠네요



Tag , , , ,

댓글을 달아 주세요