CSS를 사용하여 리스트 불릿 포인트(bullet point)를 변경할 수 있습니다. 워드프레스의 경우 테마에 따라 목록 불릿 포인트가 조금씩 차이가 있을 수 있습니다. 일반적으로 다음과 같이 점으로 되어 있습니다.
이러한 리스트 불릿 포인트를 체크박스 등으로 변경하는 방법에 대하여 살펴보겠습니다.
워드프레스 목록 리스트 불릿 포인트 변경하기
기본적으로 다음과 같은 CSS를 사용하여 글머리 기호를 변경할 수 있습니다.
ul { list-style: none; } /* Remove default bullets - 기본 불릿 제거 */
li::before {
content: "\2022"; /* Unicode bullet symbol - 유니코드 불릿 기호 */
color: blue; /* Bullet color - 불릿 컬러 */
/* Optional tweaks - 추가 조정 */
font-weight: bold;
padding-right: 10px;
}위의 코드에서 유니코드 값("\2022")을 원하는 기호의 유니코드 값으로 변경할 수 있습니다. 예시:
- ⏴(채워진 삼각형) - \23F4
- ▷(빈 삼각형) - \25B7
- ◉ - \25C9
- ◎ (이중 동그라미) - \25CE
- ★ (채워진 별) - \2605
- ☆ (빈 별) - \2606
- ☑ (체크박스) - \2611
- ✓ (체크마크) - \2713
- ☛ (채워진 손가락 기호) - \261B
- ☞ (빈 손가락 기호) - \261E
- ☻ (채워진 웃는 얼굴 이모티콘 ) - \263B
- ☺ (빈 웃는 얼굴 이모티콘) - \263A
상기 코드는 사용하는 테마에 따라 적절히 응용할 수 있습니다. 또한, CSS 클래스를 지정하여 특정 블록에만 적용하는 것도 가능합니다.
예를 들어, GeneratePress 테마를 사용하는 경우 다음과 같은 코드를 외모 » 사용자 정의하기 » 추가 CSS에 추가하면 블로그 글의 불릿 포인트가 체크 기호로 바뀌게 됩니다.
/* Change bullet points in WordPress GeneratePress theme */
/* 워드프레스 제너레이트프레스 테마에서 불릿 포인트 변경하기 */
.single .entry-content ul { list-style: none; }
.single .entry-content ul > li {
text-indent: -1.2em;
margin-left: 0.2em;
}
.single .entry-content ul > li:before {
content: "\2713";
color: #607D8B;
font-weight: bold;
padding-right: 10px;
}text-indent는 들여쓰기/내어쓰기를 설정할 때 사용됩니다. 자세한 내용은 모질라 문서 "text-indent"(영문)를 참고해보세요.
위의 코드를 적용하면 다음과 같이 바뀝니다.
상기 코드는 GeneratePress 테마 외에도 HTML 구조가 비슷한 Astra 테마 등 일부 테마에서 적용될 것입니다. CSS를 조금 알면 테마에 맞게 적절히 응용이 가능합니다.
더 많은 도형 기호들의 유니코드 값을 UTF-8 Geometric Shapes(영문)에서 확인할 수 있습니다.
CSS는 그리 어렵지 않고, 배우는 데 시간도 많이 걸리지 않으므로 잠시 시간을 내어 CSS를 익히시면 많은 도움이 될 것입니다. CSS는 워드프레스뿐만 아니라 티스토리, 그누보드 등 거의 모든 웹 환경에서 사용할 수 있습니다.
댓글 남기기