워드프레스 목록 리스트 불릿 포인트 변경하기

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를 조금 알면 테마에 맞게 적절히 응용이 가능합니다.

이 블로그에서는 다음과 같은 코드를 한동안 사용하다 최근 제거했습니다.

.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 span {  text-indent: 0px; }

.single .entry-content ul > li:before {
content: "\25A0";
color: #607D8B;
font-weight: bold;
padding-right: 10px;
font-size: 0.55em;
vertical-align: middle;
}

@media (min-width: 768px) {

.single .entry-content ul > li {
line-height: 1.45em;
}

.single .entry-content ul > li:not(:last-child) {
padding-bottom: 0.7em;
}
}

더 많은 도형 기호들의 유니코드 값을 UTF-8 Geometric Shapes(영문)에서 확인할 수 있습니다.

CSS는 그리 어렵지 않고, 배우는 데 시간도 많이 걸리지 않으므로 잠시 시간을 내어 CSS를 익히시면 많은 도움이 될 것입니다. CSS는 워드프레스뿐만 아니라 티스토리, 그누보드 등 거의 모든 웹 환경에서 사용할 수 있습니다.

참고


2개 댓글

댓글 남기기

* 이메일 주소는 공개되지 않습니다.