CSS 리스트 꾸미기

HTML에서 사용하는 리스트를 꾸미는 속성에 대해 알아보자.

list-style-type

리스트 요소의 앞에 위치하는 숫자나 기호를 수정할 수 있다.
이러한 기호를 마커(marker)라고 한다.

/* 하나씩 적용해보기 */
ul { 
	list-style-type: circle;
    /* list-style-type: square; */
    /* list-style-type: upper-alpha; */
    /* list-style-type: lower-roman; */
}

• disc: 채워진 원 (기본값)
• circle: 빈 원
• square: 채워진 사각형
• decimal: 숫자
• lower-alpha: 소문자 알파벳
• upper-roman: 대문자 로마 숫자
• 텍스트: 사용자가 지정하는 텍스트

list-style-position

리스트 요소의 위치를 설정할 수 있다.
리스트 항목의 텍스트 블록을 기준으로 outside는 블록 외부에, inside는 블로 내부에 마커를 배치한다.

ul {
	list-style-position: outside; /* 기본값 */
    /* list-style-position: inside; */
}

list-style-image

마커(marker)에 자신만의 이미지를 적용할 수 있다.
단, 이미지 크기가 자동으로 조정되지 않아 사용할 이미지의 사이즈를 준비해야 한다.

ul {
	list-style-image: url("/examples/images/img_list_marker.png");
}

만약 더 정밀한 제어가 필요하다면 type을 none으로 설정한 후 ::before나 ::marker와 같은 가상요소를 사용하는 것이 좋다.

list-style

위의 세가지 속성을 한 번에 작성할 수 있는 단축 속성이다.
일반적으로 type, position, image 순서로 공백을 이용하여 구분해 작성하며, type과 image를 모두 작성한 경우 type보다 image가 우선적으로 적용된다.

ul {
	list-style: square inside url('./icon.svg');
	/* list-style: url('./icon.svg') inside; 이렇게 작성해도 동일 */
}

list-style-type을 생략하면 image가 우선적으로 적용된다.
mdn list-style

@counter-style

사용자 정의 카운터 스타일을 만들 수 있다.

@counter-style emoji-numbers {
  system: fixed;
  symbols: '0️⃣' '1️⃣' '2️⃣' '3️⃣' '4️⃣' '5️⃣';
  suffix: ' ';
  range: 1 3; /* 1번째부터 3개만 적용 */
}
 
ul {
  list-style-type: emoji-numbers;
}

• system: 카운팅 시스템 유형 (cyclic, numeric, alphabetic, fixed 등)
• symbols: 카운터에 사용할 기호 목록
• suffix: 각 카운터 뒤에 추가할 문자 (기본값은 '. ')
• range: 카운터가 적용될 범위
• fallback: 지정된 범위를 벗어났을 때 사용할 스타일

mdn @counter-style

li에 직접 스타일링?

위의 속성을 ul이나 ol이 아닌 li에 직접 적용할 수도 있다.
오히려 ul에 적용하는 것 보다 더 일반적이고 권장되는 방식이라고 한다.
li의 각 요소를 특정하여 각각의 요소를 구체적으로 스타일링 할 수 있다.