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

CSS를 사용하여 리스트 불릿 포인트(bullet point)를 변경할 수 있습니다. 워드프레스의 경우 테마에 따라 목록 불릿 포인트가 조금씩 차이가 있을 수 있습니다. 일반적으로 다음과 같이 점으로 되어 있습니다.

이러한 리스트 불릿 포인트를 체크박스 등으로 변경하는 방법에 대하여 살펴보겠습니다.

[ 이 글은 2024년 5월 19일에 마지막으로 업데이트되었습니다. ]

기본적으로 다음과 같은 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는 워드프레스뿐만 아니라 티스토리, 그누보드 등 거의 모든 웹 환경에서 사용할 수 있습니다.

<ol> 목록에서 번호 스타일 변경하기

번호가 매겨진 리스트에서 번호 불릿의 스타일을 변경하는 것도 가능합니다. 예를 들어, 다음과 같은 CSS 스타일을 응용하여 워드프레스나 티스토리 등에 적용하는 것을 시도해볼 수 있을 것입니다.

.most-commented {
    counter-reset: item;
    list-style: none; /* 기본 목록 스타일 제거 */
    padding-left: 2em; /* 사용자 정의 총알을 위한 공간 확보 */
}

.most-commented li {
    counter-increment: item;
    margin-bottom: 0.5em; /* 항목 간의 간격 */
    position: relative; /* 총알의 위치를 지정하기 위해 필요 */
}

.most-commented li::before {
    content: counter(item);
    background-color: #007BFF; /* 파란색 배경 */
    color: white; /* 흰색 글자 */
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    line-height: 1.5em;
    text-align: center;
    border-radius: 0.2em; /* 둥근 모서리 */
    margin-right: 0.5em; /* 총알과 텍스트 사이의 간격 */
    position: absolute;
    left: -2em; /* 왼쪽에 총알 위치 */
    border: 2px solid black; /* 검정색 테두리 */
}

위의 CSS 코드를 적용하면 다음과 같이 번호 (숫자) 불릿이 바뀝니다. 스타일은 적절히 변경하도록 합니다.

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

<ol> 목록에서 번호 스타일 변경하기

참고

5 개 댓글

Leave a Comment 응답 취소