목록
체크리스트, 커스텀 마커, 번호 목록 - 정보를 정리하는 CSS
체크리스트 - 빈 칸 (☐)
✓ ✓ △ ⭐
체크리스트 - 완료 (☑)
✓ ✓ △
체크리스트 - 원형 (○)
✓ ✓ △
목록 - 다이아몬드 (◆)
△ ✓ ✓
목록 - 화살표 (▶)
△ ✓ ✓
목록 - 별 (★)
△ ✓ ✓
목록 - 대시 (—)
✓ ✓ ✓ ⭐
목록 - 사각형 (■)
△ ✓ ✓
번호 목록 - 색상 번호
△ ✓ ✓
번호 목록 - 색상 숫자
△ ✓ ✓ ⭐
목록 - 들여쓰기 (중첩)
✓ ✓ ✓
체크리스트 - 빈 칸 (☐)
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 △ ⭐ 추천
CSS
/* class="checklist" 지정 필요 */
ul.checklist {
padding: 0;
margin: 1em 0;
}
ul.checklist li {
list-style: none; /* 기본 불릿 제거 */
padding: 0.3em 0 0.3em 1.5em; /* 좌측 여백 (체크박스 공간) */
position: relative;
color: #333333;
line-height: 1.7em;
}
ul.checklist li::before {
content: "\2610"; /* 체크박스 — \2610 = ☐ */
position: absolute;
left: 0;
color: #2FA599; /* 체크박스 색상 */
font-size: 1em;
}HTML
<ul class="checklist">
<li>오늘 감사한 일 3가지 적기</li>
<li>나에게 하고 싶은 말 쓰기</li>
<li>내일의 목표 정하기</li>
</ul>list-style: none — 기본 불릿(·)을 제거합니다.
li::before { content: "\2610" } — 가짜 요소로 체크박스 아이콘을 넣습니다.
position: absolute + left: 0 — 체크박스를 왼쪽 끝에 고정합니다.
⚠️ 뷰어 참고알라딘 뷰어에서 ::before 가짜 요소가 간혹 깨질 수 있습니다. 테스트 후 사용하세요.
체크리스트 - 완료 (☑)
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 △
CSS
/* class="checklist-done" 지정 필요 */
ul.checklist-done {
padding: 0;
margin: 1em 0;
}
ul.checklist-done li {
list-style: none;
padding: 0.3em 0 0.3em 1.5em;
position: relative;
color: #333333;
line-height: 1.7em;
}
ul.checklist-done li::before {
content: "\2611"; /* 체크 완료 — \2611 = ☑ */
position: absolute;
left: 0;
color: #2FA599; /* 체크 색상 */
font-size: 1em;
}HTML
<ul class="checklist-done">
<li>감정 일기 쓰기</li>
<li>명상 10분 하기</li>
<li>감사 목록 작성하기</li>
</ul>빈 체크박스(☐) 대신 체크 완료(☑) 표시를 사용합니다.
완료된 목록, 달성 항목 등을 표시할 때 사용하세요.
\2611은 유니코드 체크박스(☑)입니다. \2713으로 바꾸면 체크마크(✓)만 나옵니다.
체크리스트 - 원형 (○)
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 △
CSS
/* class="checklist-circle" 지정 필요 */
ul.checklist-circle {
padding: 0;
margin: 1em 0;
}
ul.checklist-circle li {
list-style: none;
padding: 0.3em 0 0.3em 1.5em;
position: relative;
color: #333333;
line-height: 1.7em;
}
ul.checklist-circle li::before {
content: "\25CB"; /* 빈 원 — \25CB = ○ */
position: absolute;
left: 0;
color: #D4883A; /* 원 색상 */
font-size: 0.9em;
}HTML
<ul class="checklist-circle">
<li>아침 루틴 만들기</li>
<li>독서 30분</li>
<li>운동하기</li>
</ul>동그란 원(○) 마커를 사용한 체크리스트입니다.
사각 체크박스보다 부드러운 느낌을 줍니다.
\25CB = ○ (빈 원), \25CF = ● (채운 원)으로 완료 표시도 가능합니다.
목록 - 다이아몬드 (◆)
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 △ 리디 ✓ 알라딘 ✓
CSS
/* class="diamond-list" 지정 필요 */
ul.diamond-list {
padding: 0;
margin: 1em 0;
}
ul.diamond-list li {
list-style: none;
padding: 0.3em 0 0.3em 1.5em;
position: relative;
color: #333333;
line-height: 1.7em;
}
ul.diamond-list li::before {
content: "\25C6"; /* 마커 기호 — \25C6 = ◆ */
position: absolute;
left: 0;
color: #D4883A; /* 마커 색상 */
font-size: 0.6em;
top: 0.8em;
}HTML
<ul class="diamond-list">
<li>나의 핵심 가치 찾기</li>
<li>강점과 약점 분석하기</li>
<li>5년 후 비전 그리기</li>
</ul>기본 불릿(·) 대신 다이아몬드(◆)를 사용합니다.
content: "\25C6"를 바꾸면 다른 마커도 가능합니다:
\25CF= ● (큰 원)\25B6= ▶ (화살표)\25A0= ■ (사각형)\2605= ★ (별)
목록 - 화살표 (▶)
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 △ 리디 ✓ 알라딘 ✓
CSS
/* class="arrow-list" 지정 필요 */
ul.arrow-list {
padding: 0;
margin: 1em 0;
}
ul.arrow-list li {
list-style: none;
padding: 0.3em 0 0.3em 1.5em;
position: relative;
color: #333333;
line-height: 1.7em;
}
ul.arrow-list li::before {
content: "\25B6"; /* 화살표 — \25B6 = ▶ */
position: absolute;
left: 0;
color: #2FA599; /* 화살표 색상 */
font-size: 0.5em;
top: 0.9em;
}HTML
<ul class="arrow-list">
<li>1단계: 현재 상태 파악</li>
<li>2단계: 목표 설정</li>
<li>3단계: 실행 계획 수립</li>
</ul>화살표(▶) 마커로 순서나 진행 방향을 나타냅니다.
단계별 안내, 프로세스 설명 등에 적합합니다.
font-size: 0.5em — 마커 크기를 작게 조절했습니다. 숫자를 키우면 마커가 커집니다.
목록 - 별 (★)
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 △ 리디 ✓ 알라딘 ✓
CSS
/* class="star-list" 지정 필요 */
ul.star-list {
padding: 0;
margin: 1em 0;
}
ul.star-list li {
list-style: none;
padding: 0.3em 0 0.3em 1.5em;
position: relative;
color: #333333;
line-height: 1.7em;
}
ul.star-list li::before {
content: "\2605"; /* 별 — \2605 = ★ */
position: absolute;
left: 0;
color: #F0C36D; /* 별 색상 — 골드 */
font-size: 0.7em;
top: 0.6em;
}HTML
<ul class="star-list">
<li>가장 추천하는 명상법</li>
<li>효과가 입증된 호흡법</li>
<li>전문가 추천 도서 목록</li>
</ul>별(★) 마커로 추천 항목이나 중요 포인트를 표시합니다.
추천 목록, 하이라이트 항목 등에 잘 어울립니다.
\2605 = ★ (채운 별), \2606 = ☆ (빈 별)로 변경 가능합니다.
목록 - 대시 (—)
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓ ⭐ 추천
CSS
/* class="dash-list" 지정 필요 */
ul.dash-list {
padding: 0;
margin: 1em 0;
}
ul.dash-list li {
list-style: none;
padding: 0.3em 0 0.3em 1.2em;
position: relative;
color: #333333;
line-height: 1.7em;
}
ul.dash-list li::before {
content: "\2014"; /* 대시 — \2014 = — */
position: absolute;
left: 0;
color: #999999; /* 대시 색상 */
}HTML
<ul class="dash-list">
<li>스트레스 관리</li>
<li>감정 조절</li>
<li>관계 개선</li>
</ul>대시(—) 마커를 사용하는 심플한 목록입니다.
가장 깔끔하고 눈에 거슬리지 않는 마커입니다.
::before 없이 HTML에서 직접 — 를 넣어도 됩니다. 하지만 CSS로 하면 일괄 변경이 쉽습니다.
💡 시길 팁::before를 지원 안 하는 뷰어에서는 HTML에 직접 '— '을 넣는 방법도 있습니다.
목록 - 사각형 (■)
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 △ 리디 ✓ 알라딘 ✓
CSS
/* class="square-list" 지정 필요 */
ul.square-list {
padding: 0;
margin: 1em 0;
}
ul.square-list li {
list-style: none;
padding: 0.3em 0 0.3em 1.5em;
position: relative;
color: #333333;
line-height: 1.7em;
}
ul.square-list li::before {
content: "\25A0"; /* 사각형 — \25A0 = ■ */
position: absolute;
left: 0;
color: #1A5C54; /* 마커 색상 */
font-size: 0.5em;
top: 0.85em;
}HTML
<ul class="square-list">
<li>자기 인식 능력 향상</li>
<li>공감 능력 발달</li>
<li>의사소통 기술 개선</li>
</ul>사각형(■) 마커를 사용합니다. 다이아몬드보다 딱딱하고 정돈된 느낌입니다.
\25A0 = ■ (채운 사각), \25A1 = □ (빈 사각)으로 변경 가능합니다.
번호 목록 - 색상 번호
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 △ 리디 ✓ 알라딘 ✓
CSS
/* class="number-list" 지정 필요 */
ol.number-list {
padding: 0;
margin: 1em 0;
counter-reset: item; /* 카운터 초기화 */
}
ol.number-list li {
list-style: none;
padding: 0.3em 0 0.3em 2em;
position: relative;
color: #333333;
line-height: 1.7em;
counter-increment: item; /* 카운터 1씩 증가 */
}
ol.number-list li::before {
content: counter(item); /* 자동 번호 */
position: absolute;
left: 0;
color: #FFFFFF;
background: #2FA599; /* 번호 배경색 */
width: 1.4em; height: 1.4em;
border-radius: 50%; /* 원형 */
text-align: center;
line-height: 1.4em;
font-size: 0.75em;
top: 0.83em;
}HTML
<ol class="number-list">
<li>심호흡을 3번 합니다</li>
<li>눈을 감고 몸의 감각에 집중합니다</li>
<li>떠오르는 생각을 판단 없이 관찰합니다</li>
</ol>번호에 색상 원형 배경을 넣은 순서 목록입니다.
counter-reset + counter-increment — CSS 카운터로 자동 번호를 매깁니다.
border-radius: 50% — 원형으로 만듭니다. 제거하면 사각형 배경이 됩니다.
단계별 안내, 레시피, 운동 순서 등에 적합합니다.
번호 목록 - 색상 숫자
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 △ 리디 ✓ 알라딘 ✓ ⭐ 추천
CSS
/* class="number-plain" 지정 필요 */
ol.number-plain {
padding: 0;
margin: 1em 0;
counter-reset: item;
}
ol.number-plain li {
list-style: none;
padding: 0.3em 0 0.3em 1.8em;
position: relative;
color: #333333;
line-height: 1.7em;
counter-increment: item;
}
ol.number-plain li::before {
content: counter(item) "."; /* 번호 + 점 */
position: absolute;
left: 0;
color: #2FA599; /* 번호 색상 */
font-weight: bold;
}HTML
<ol class="number-plain">
<li>주제를 정합니다</li>
<li>자유롭게 10분간 씁니다</li>
<li>핵심 문장을 골라냅니다</li>
</ol>배경 없이 숫자만 색상으로 강조한 번호 목록입니다.
원형 배경보다 간결하면서도 번호가 눈에 잘 들어옵니다.
font-weight: bold — 번호를 굵게 표시합니다.
목록 - 들여쓰기 (중첩)
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓
CSS
/* class="indent-list" 지정 필요 */
ul.indent-list {
padding: 0 0 0 1.5em; /* 1단계 들여쓰기 */
margin: 1em 0;
color: #333333;
line-height: 1.7em;
}
ul.indent-list li {
margin: 0.2em 0;
}
ul.indent-list ul {
padding-left: 1.5em; /* 2단계 들여쓰기 */
list-style-type: circle; /* 2단계 마커 — ○ */
}HTML
<ul class="indent-list">
<li>감정 인식하기
<ul>
<li>기쁨, 슬픔, 분노 구분</li>
<li>신체 반응 관찰</li>
</ul>
</li>
<li>감정 표현하기</li>
<li>감정 조절하기</li>
</ul>중첩(들여쓰기) 목록입니다. 하위 항목을 보여줄 때 사용합니다.
list-style-type: circle — 2단계는 빈 원(○)으로 구분합니다.
- 1단계: disc (●, 기본)
- 2단계: circle (○)
- 3단계: square (■)
개요, 목차, 카테고리 분류 등에 적합합니다.