같은 목록을 렌더링하되, 이후 항목마다 시작 속성(start attribute)을 자릿수만큼 증가시켜 보겠습니다:
1. Betsy
1. Tacy
1. Tib
1. Naifi
- Betsy
- Tacy
- Tib
- Naifi
- Betsy
- Tacy
- Tib
- Naifi
- Betsy
- Tacy
- Tib
- Naifi
- Betsy
- Tacy
- Tib
- Naifi
- Betsy
- Tacy
- Tib
- Naifi
- Betsy
- Tacy
- Tib
- Naifi
재현할 수 있습니다. 이는 CSS 문제인데, 기본적으로 번호 목록(<ol>) 주변의 여백은 일반적으로 더 작은 숫자를 고려하여 설정되어 있기 때문입니다.
테마별로 동일한 목록이 다르게 렌더링되는 것을 확인했기 때문에, 단순히 아래 코드를 추가하는 테마 컴포넌트를 만들었습니다:
ol {
margin-left: 3em;
}
반면에, 이는 모든 목록에 적용되므로 항목이 5자리 이상의 큰 숫자가 아닐 때, 번호 목록은 여백이 너무 넓어 보입니다…
제 제안: 사이트에서 번호 목록을 사용하는 방식에 맞는 컴포넌트를 적용해 보세요. 매우 긴 목록의 중간 부분을 발췌하는 경우는 드물다고 생각하며, 글자 수 제한에 부딪히지 않고 10,000개 항목의 목록을 게시하는 상황을 상상하기 어렵습니다. ![]()
특정 목록이 항상 잘 맞게 스타일링할 수 있는 방법이 있는지 생각해 보았지만, 번호 목록의 번호는 의사 요소(pseudo-element, ::marker)로 적용되므로, 이 부분에 대해 CSS 연산을 수행하는 방법을 확신할 수 없습니다… ![]()
