CSS 사용법
CSS 문법
클래스와 아이디
주석
텍스트
color
direction
backgroud-color
line-height
letter-spacing
text-align
text-decoration
text-indent
word-spacing
배경
background-color
background-image
background-repeat
background-position
background-attachment
Font
크기 단위
Box Model
경계선(border)
리스트(list)
CSS 리스트(list)

list-style-type 속성을 사용하면 리스트의 marker 스타일을 지정할 수 있습니다.

<ul>
 <li style="list-style-type: disc">disc 타입의 리스트
 <li style="list-style-type: circle">circle 타입의 리스트
 <li style="list-style-type: square">square 타입의 리스트
 <li style="list-style-type: none">none 타입의 리스트
</ul>

  • disc 타입의 리스트
  • circle 타입의 리스트
  • square 타입의 리스트
  • none 타입의 리스트  

순서가 있는 리스트(ol)의 경우는 다음과 같이 marker를 지정할 수 있습니다.

<ol>
 <li style="list-style-type: decimal">decimal 타입의 리스트
 <li style="list-style-type: lower-roman">lower-roman 타입의 리스트
 <li style="list-style-type: upper-roman">upper-roman 타입의 리스트
 <li style="list-style-type: lower-alpha">lower-alpha 타입의 리스트
 <li style="list-style-type: upper-alpha">upper-alpha 타입의 리스트
</ol>

  1. decimal 타입의 리스트
  2. lower-roman 타입의 리스트
  3. upper-roman 타입의 리스트
  4. lower-alpha 타입의 리스트
  5. upper-alpha 타입의 리스트

리스트의 marker에 이미지를 사용할 수도 있습니다.

<ul>
 <li style="list-style-image: url('marker.gif')">이미지를 사용한 리스트
 <li style="list-style-image: url('marker.gif')">이미지를 사용한 리스트
</ul>

  • 이미지를 사용한 리스트
  • 이미지를 사용한 리스트

Copyright © Homejjang.com All rights reserved.