[HTML/CSS] UL, OL, DL 목록(list)에 기호 스타일 지정

리스트 만들기

목록의 기호와 번호 스타일 지정하기 (list-style-type)

 

HTML에서 리스트를 작성할 때, 항목의 스타일을 변경하는 방법 중 하나는 list-style 속성을 사용하는 것입니다. 이 속성은 UL, OL, DI 태그에 적용됩니다. 순서가 없는 목록의 경우, 목록 앞에 다양한 기호를 넣을 수 있고 순서 목록에는 번호 스타일을 지정할 수 있습니다.

 

기호 스타일

속성 값	설명
disc(●)	검은색 채운 원
circle(○)	흰색 빈 원
square(■)	검은색 채운 사각형
none	기호 없음

 

HTML

<ul style="list-style-type: disc;">
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
</ul>

<ul style="list-style-type: circle;">
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
</ul>

<ul style="list-style-type: square;">
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
</ul>

<ul style="list-style-type: none;">
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
</ul>

 

 

숫자 스타일

속성 값	설명	예시
decimal	일반 십진수	1, 2, 3, 4, 5, ....
decimal-leading-zero	0이 붙는 십진수	01, 02, 03, 04, 05 ....
upper-roman	대문자 로마숫자	I, II, III, IV ....
lower-roman	소문자 로마숫자	i, ii , iii, iv ....

 

<ul style="list-style-type: decimal;">
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
</ul>

<ul style="list-style-type: decimal-leading-zero;">
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
</ul>

<ul style="list-style-type: upper-roman;">
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
</ul>

<ul style="list-style-type: lower-roman;">
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
</ul>

 

문자 스타일

속성 값	설명	예시
upper-alpha / upper-latin	대문자 알파벳	1, 2, 3, 4, 5, ....
ower-alpha / lower-latin	소문자 알파벳	01, 02, 03, 04, 05 ....

 

<ul style="list-style-type: upper-alpha;">
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
</ul>

<ul style="list-style-type: lower-alpha;">
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
</ul>

 

목록앞에 기호 대신에 이미지 넣기 (list-style-image)

속성 값	설명
이미지 O	url("img.jpg")처럼 url() 키워드 안에 이미지 경로를 설정합니다.
이미지 X	이미지를 사용하지 않고 list-style-type 속성에서 지정한 형태를 사용합니다.

 

HTML

<ul>
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
</ul>

CSS

ul li {
      padding: 5px 0 20px 50px;
      list-style: none;
      background-image:     url(경로);
      background-position: left center;
      background-repeat: no-repeat;
      background-size:36px;
}

 

참고로 list-style-image는 이미지가 적절한 사이즈가 아닐 경우 조절해 줄 수 있는 방법이 마땅치 않기 때문에 위와 같이 background 속성을 사용하여 이미지를 넣어주셔야 합니다.