워드프레스 : 불릿(Bullet) 모양 변경하는 법 1. 기초(CSS변경)


워드프레스 : 불릿(Bullet) 모양 변경하는 법 1. 기초(CSS변경)



들어가며…

워드프레스에서 글을 작성하다보면 불릿 목록(Bullet List)를 이용하여 내용을 계층적으로 표현할 때가 있습니다. 그런데, 분명 워드프레스 글 에디터에서 표현 되던 불릿 모양이 포스트(Post) 또는 페이지(Page)에서 표현이 안되는 경우가 있더라구요. 저같은 경우에는 GeneratepPress 테마#1를 사용하고 있는데, 제대로 표현이 안되더라구요. 그래서 한번 알아봤습니다.

문제점

기본 불릿 목록 사용(Default)

❓ 워드프레스 글 에디터에서 불릿 목록을 사용하여 아래와 같이 글을 작성하였는데…
  • 기본 1st bullet
    • 기본 2nd bullet
      • 기본 3rd bullet
❗ 실제 사이트에서는 아래와 같이 나타났습니다…
  • 기본 1st bullet
    • 기본 2nd bullet
      • 기본 3rd bullet

다른 불릿 목록 사용(Circle, Disk, Square)

❓ 불릿 목록을 눌러보면 기본적으로 원형, 디스크, 사각형 3가지가 있습니다.다른 불릿 목록을 사용했을 때는 어떻게 나올까요?
  • 원형 1st bullet
    • 원형 2nd bullet
      • 원형 3rd bullet
  • 디스크 1st bullet
    • 디스크 2nd bullet
      • 디스크 3rd bullet
  • 사각형 1st bullet
    • 사각형 2nd bullet
      • 사각형 3rd bullet
❗ 다른 불릿 목록은 제대로 표현이 되네요…
  • 원형 1st bullet
    • 원형 2nd bullet
      • 원형 3rd bullet
  • 디스크 1st bullet
    • 디스크 2nd bullet
      • ㅍ3rd bullet
  • 사각형 1st bullet
    • 사각형 2nd bullet
      • 사각형 3rd bull

임시방안!?

❗❓ 그럼, 하위 불릿(Sub Bullet) 글을 작성할 때 마다, 불릿 목록에 들어가서 다른 모양으로 바꿔줘야하는 걸까요? 이건 임시방편으로 근본적인 해결방안이 아닙니다.
  • disk 1st bullet
    • circle 2nd bullet
      • square 3rd bullet

해결방안

위 문제를 해결하기 위한 여러 다양한 방법들이 있겠지만, 제가 제시한 방법은  테마에서 아래의 CSS를 추가 해주는 것입니다.

/* Bullet Style */

ul {
  list-style: disc;
}
ul ul {
  list-style: circle;
}

ul ul ul {
  list-style: square;
}

그럼 어디에 CSS를 추가해야 할까요? 따라오세요~!

CSS 추가하기

🔻 테마 디자인 > 사용자 정의하기

🔻 사용자 정의 > 추가 CSS

🔻 추가 CSS 가장 아래에 위에 보여드린 코드를 추가

🔻 그리고 공개  버튼은 잊지마시고, 꾸욱~!

불릿 모양 확인하기

이제 그럼 블릿으로 계층을 만들어 글을 작성하시고 확인해볼까요?

🔻 새로 글을 추가해서 아래와 같이 불릿을 사용해서 글을 작성해주시고, 미리보기를 눌러봅시다.

🔻 잘 적용되었네요. 어때요? 참쉽죠?


#주석
  1. 테마 기능을 모두 활용하고 있진 못하지만, 전반적으로 만족하면서 사용하고 있습니다. 다만, 저처럼 아무것도 모른다면… 조금 손, 발 그리고 머리가 고생하실수도 있습니다. https://generatepress.com/[본문으로 ↩]

댓글 남기기

Previous

워드프레스 : 아마존 Route 53(호스팅)에서 도메인을 구매한 이유 3가지

워드프레스 : 불릿(Bullet) 모양 변경하는 법 2. 응용

Next