본문 바로가기
www/CSS_tip

리스트(list)

by 랭님 2014. 1. 1.

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>
  • 이미지를 사용한 리스트
  • 이미지를 사용한 리스트


HTML 리스트(list)의 type 속성

type 속성을 이용하면 marker 부분을 바꿀 수가 있습니다.

<ol type="A">
 <li>줄바꾸기</li>
 <li>헤드라인</li>
 <li>기본태그</li>
</ol>

순서 있는 리스트(Ordered Lists)에서 type속성값을 A로 지정하면 A부터 시작하는 리스트를 만들 수 있습니다.

  1. 줄바꾸기
  2. 헤드라인
  3. 기본태그

A외에도  a, I, i, 1 등을 사용할 수 있습니다.

<ol type="i">
 <li>줄바꾸기</li>
 <li>헤드라인</li>
 <li>기본태그</li>
</ol>
  1. 줄바꾸기
  2. 헤드라인
  3. 기본태그


※출처 : http://www.homejjang.com/

관련글

티스토리툴바