체크박스가 포함된 불릿 리스트를 작성하면 불릿이 제대로 렌더링되지 않습니다. 이것이 의도된 기능인지 버그인지 확실하지 않습니다. 어쨌든 제어하기가 좀 까다롭긴 합니다.
1. [] 체크박스가 있는 일반 번호 항목
- 일반 불릿
- [] 예시 불릿 체크박스
[] 예시 불릿 항목 2
- [] 예시 불릿 항목 3
- [] 예시 불릿 항목 4
- [] 예시 불릿 항목 5
위 코드의 렌더링 결과는 다음과 같습니다:
기능은 맞지만, 좀 더 다듬을 여지가 있을 것 같아요. .has-checkbox에 대한 CSS를 볼 수 있는데, 시각적 노이즈를 줄이기 위해 의도적으로 생략된 거예요.
방금 올바른 접두 공백 수로 테스트를 해 보았습니다.
물론 여전히 항목 기호가 빠져 있지만, 지금은 꽤 잘 보입니다!
1. [] 접두 공백 0개인 일반 번호 항목 A
- 접두 공백 4개인 일반 항목 A.1
- 접두 공백 4 + 2 = 6개인 예시 볼릿 체크박스 A.1
- 접두 공백 4개인 일반 항목 A.2
- 접두 공백 4 + 2 = 6개인 예시 볼릿 체크박스 A.2
참고: 서로 다른 유형의 목록 사이에 줄바꿈 추가
- [] 접두 공백 0개인 예시 볼릿 항목 B
- [] 접두 공백 2개인 예시 볼릿 항목 B.1
- [] 접두 공백 2 + 2 = 4개인 예시 볼릿 항목 B.1.1
- [] 접두 공백 2 + 2 + 2 = 6개인 예시 볼릿 항목 B.1.1.1
- [] 접두 공백 2 + 2 + 2 = 6개인 예시 볼릿 항목 B.1.1.2
- [] 접두 공백 2 + 2 = 4개인 예시 볼릿 항목 B.1.2
- [] 접두 공백 2개인 예시 볼릿 항목 B.2
- [] 접두 공백 2 + 2 = 4개인 예시 볼릿 항목 B.2.1
- [] 접두 공백 2 + 2 = 4개인 예시 볼릿 항목 B.2.2
불릿(bullet)과 체크박스를 함께 사용하는 방법은 무엇인가요? 숫자를 사용하면 가능하지만, 저는 불릿으로 사용하고 싶습니다.
1. []
1. []
- []
[]가 목록에서 다음과 같이 표시되기를 원합니다:
1.
[]
1.
- []
즉, 불릿은 숫자와 동일하게 취급됩니다.
매우 깊은 들여쓰기인가요?
- 목록
- [] 테스트
- [] 테스트
- [] 테스트
- [] 테스트
이 방식으로는 불릿이 표시되지 않지만, 불릿처럼 보이는 대시(-)는 남아 있습니다.
실제로, 다음과 같은 실질적인 우회 방법이 있습니다:
이 예제에 있는 모든 ␆는 영공백(zero-width space)으로 대체되어야 합니다.
- 목록
- ␆[] 항목 A
- ␆[] 항목 A.1
- ␆[] 항목 A.1.1
- ␆[] 항목 A.1.1.1
- ␆[] 항목 B
테스트를 위해 복사할 영공백:
@Firepup650 좋은 발견이네요! 체크박스 앞에 어떤 문자를 넣어도 불릿 포인트가 표시됩니다.
일반적인 해결 방법: 이 사용자 지정 CSS를 Discourse 인스턴스에 추가하세요.
ul li.has-checkbox .list-item-checkbox {
position: relative;
left: 0;
}
.cooked ul li.has-checkbox,
.d-editor-preview ul li.has-checkbox {
position: relative;
list-style-type: disc;
}
.cooked ul ul li.has-checkbox,
.d-editor-preview ul ul li.has-checkbox {
list-style-type: circle;
}
.cooked ul ul ul li.has-checkbox,
.d-editor-preview ul ul ul li.has-checkbox {
list-style-type: square;
}
그것은 하나의 해결책이고, 실제로 작동합니다. 하지만 솔직히 말하면, 엑셀이 텍스트 셀을 강제로 표시하도록 하는 것을 강하게 떠올리게 해서 두통이 올 정도입니다 
자, 이걸 기능 요청으로 만들어 보겠습니다:
현재 체크박스 목록이 있는 경우, 불릿 포인트 없이 표시됩니다.
- [] point 1
- [] point 2
- [] point 3
- [] point 4
체크박스 앞에 작은따옴표(예: Excel의 서식 없는 텍스트)를 추가하면 이 기능이 비활성화되고 불릿 포인트가 표시되지만, 동시에 작은따옴표도 제거되어야 합니다.
- '[] point 1
- '[] point 2
- '[] point 3
- '[] point 4
<!---
이 마크다운 코드:
-->
- '[] point
<!-- 다음 HTML이 되어야 합니다. (참고: 작은따옴표가 표시되지 않음) -->
<ul>
<li><span class="chcklst-box fa fa-square-o fa-fw"></span> point</li>
</ul>
<!-- 다음 HTML이 되어서는 안 됩니다. (참고: 작은따옴표가 여전히 표시됨) -->
<ul>
<li>'<span class="chcklst-box fa fa-square-o fa-fw"></span> point</li>
</ul>
이 문제에 대한 더 간단한 수정/정리 방법은, 두 번째 공백(제로 포인트 공백이 아닌 일반 공백)을 사용하여 프로젝트 기호와 체크박스를 모두 표시하도록 지정하는 것입니다.
물론, 이를 코드로 구현하는 것은 꽤 까다로울 수 있습니다!