[HTML/CSS] UL, OL, DL 목록(list)에 기호 스타일 지정하기
- Web/HTML, CSS
- 2023. 2. 28.
웹 문서에서 목록(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 속성을 사용하여 이미지를 넣어주셔야 합니다.
'Web > HTML, CSS' 카테고리의 다른 글
[HTML/CSS] 배경색 넣는 방법(background-color) 총정리 (0) | 2023.03.06 |
---|---|
[Web] 웹에서 색상을 표현하는 방법 (RGB 표현법에 대하여) (0) | 2023.03.01 |
[HTML/CSS] 공백과 줄바꿈 지정하기(white-space) (2) | 2023.02.19 |
[HTML/CSS] 넘치는 텍스트 표기하기 (overflow, text-overflow) (1) | 2023.02.18 |