본문 바로가기
IT_Developers/CSS

CSS - li 점 대신 다른 모양으로 / list-style-type , list-style-image

by 고코더 2019. 6. 21.
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가 왜 필요한지 알겠네요



저작자표시 비영리 변경금지

'IT_Developers > CSS' 카테고리의 다른 글

무료 폰트 - "남한산성"과 "칼의노래"를 집필한 / "김훈체" / 첨부파일 있음  (0) 2019.06.25
무료 폰트 - "토지"를 집필한 고박경리 작가 / 박경리체 / 첨부파일 있음  (2) 2019.06.25
무료 폰트 - 윤태호 작가에 "미생체" 다운로드 받기 / 첨부파일  (2) 2019.06.24
CSS - 책 제목 처럼 왼쪽에 색 기둥 만들기  (2) 2019.06.20

관련글

댓글

티스토리툴바