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

웹 문서에서 목록(List)으로 정보를 정리해서 보여주면 보는 사람들로 하여금 정리가 잘 된 화면으로 줄 수 있습니다. 이번 포스팅에서는 웹 문서에서 리스트를 만들 수 있는 여러 가지 속성에 대해 알아보도록 하겠습니다.

 

 리스트 만들기 

웹 문서에서 목록(List)은 UL, OL, DL, LI 태그들로 만들 수 있는데요. 만드는 방법은 제가 예전에 포스팅해 둔 내용이 있어서 링크를 걸어둘테니 참고해 주기 바랍니다.

[Html] UL 태그, OL태그, DL태그, LI태그 사용법

 

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

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

 

기호 스타일

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

 

See the Pen 목록1 by wjdxo513 (@wjdxo513) on CodePen.

 

위의 예제와 같이 list-style-type에 원하는 값을 넣어 목록의 기호를 바꿀 수 있으며 none값을 활용하여 기호를 없앨수도 있습니다. 메뉴를 만들 때는 기호를 없애야 깔끔하기 때문에 none도 많이 사용하게 됩니다.

 

숫자 스타일

속성 값	설명	예시
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 ....

 

See the Pen 목록2 by wjdxo513 (@wjdxo513) on CodePen.

 

위의 예제와 같이 앞에 기호 대신 숫자를 넣을 수도 있습니다. 위의 예제와 아래 표를 보고 원하시는 형태로 설정하시면 됩니다.

 

문자 스타일

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

 

See the Pen 목록3 by wjdxo513 (@wjdxo513) on CodePen.

 

문자로 리스트 스타일을 지정하고 싶다면 위와 같이 하시면 됩니다.

 

 

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

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

 

See the Pen 목록4 by wjdxo513 (@wjdxo513) on CodePen.

 

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