워드프레스 목록 들여쓰기 및 포인트 변경하는 방법

워드프레스 목록 들여쓰기 조정은 필수 변경사항이 아닙니다.

그러나 워드프레스에서 목록 기능을 사용하면 모바일 화면에서 글을 봤을 때 기본적으로 적용되는 들여쓰기 때문에 왼쪽 여백이 필요 이상으로 남게 됩니다. 무슨 말이냐고요?

워드프레스 목록 들여쓰기를 조정하기 전과 후의 결과물 먼저 보시겠습니다.

목록 들여쓰기 조정 전과 후 차이가 보이시나요?

위 결과물처럼 목록의 여백을 조정하고 싶으신 분들은 계속해서 읽어보시기 바랍니다. 이 글을 끝까지 읽으면 목록 여백 뿐만 아니라 목록 포인트를 변경하는 방법도 알게 되실 것입니다.

시작하기 전에…

현재 이 블로그는 제너레이트프레스 유료 테마 버전을 사용하고 있습니다. 하지만 오늘 알려드릴 내용은 제너레이트프레스 무료 테마에서도 적용할 수 있습니다.

만약 제너레이트프레스 유료 버전을 설치할 계획이라면 아래 글을 읽어보시기 바랍니다.

✅ 제너레이트프레스 유료 테마 결제 및 설치 방법

그럼 워드프레스 목록 리스트를 조정하는 방법을 알아보겠습니다.

워드프레스 목록 들여쓰기 방법

워드프레스 목록을 들여쓰는 방법은 간단히 CSS 코드 3줄만 추가하면 됩니다.

1) 아래 CSS 코드를 복사합니다.

.single .entry-content ul li {
	margin-left: -2em;
	text-indent: 0.3em;
}
  • margin-left : 왼쪽 여백
  • text-indent : 문장 들여쓰기

목록 포인트를 중심으로 왼쪽 여백을 줄이려면 margin-left: -2em; 값을 음수로 입력합니다. 반대로 왼쪽 여백을 늘리고 들여쓰기를 하려면 양수 값을 입력하면 됩니다.

목록 포인트 오른쪽에 시작하는 문장의 들여쓰기 간격을 조정하고 싶다면 text-indent: 0.3em; 값을 조금씩 조정하면 됩니다. (음수 값은 내어쓰기, 양수 값은 들여쓰기 입니다.)

2) 복사한 CSS 코드를 style.css 파일에 추가합니다.

제너레이트프레스 유료 테마를 설치하신 분들은 차일드 테마 편집을 통해서 style.css 파일에 복사한 CSS 코드를 추가합니다. 그리고 나서 파일 업데이트 버튼을 누르면 끝납니다.

만약 제너레이트프레스 무료 테마 혹은 다른 테마를 이용하신다면 외모 > 추가 CSS 를 통해서 위에서 복사한 CSS 코드를 추가하면 됩니다.

차일드 테마가 무엇인지, 그리고 설치 방법이 궁금하신 분들은 아래 글을 참고하세요.

✅ 제너레이트프레스 차일드 테마 초간단 설치 방법

워드프레스 목록 포인트 변경하는 방법

워드프레스 목록 들여쓰기와 더불어 불릿포인트 (•) 를 변경하는 방법도 알아보겠습니다.

조금 전에 추가한 CSS 코드에 단 한줄 만 추가하면 되는데요.

.single .entry-content ul li {
	margin-left: -2em;
	text-indent: 0.3em;
	list-style: "\2752"
}

CSS 코드 list-style: "\2752" 를 추가하면 목록 포인트가 (•)에서 (❒)으로 바뀌는 것을 볼 수 있습니다. 그리고 포인트 심볼은 본인이 원하는 모양으로 바꿀 수 있는데요.

위키피디아 리스트 유니코드에 들어가면 거의 모든 유니코드를 확인할 수 있습니다. 수 많은 유니코드 중에서 원하는 심볼 유니코드 숫자를 \ 뒤쪽에 입력만 해주시면 됩니다.

목록 포인트 심볼 종류

포인트 목록을 어떤 것을 써야 할지 고민이신 분을 있을 수 있으니 개인적으로 마음에 드는 목록 포인트 몇 개를 추려서 추천드려볼까 합니다. 제가 추천하는 목록 포인트는 다음과 같습니다.

추천하는 목록 포인트

  • ❑ (2751) – 사각형1
  • ❒ (2752) – 사각형2
  • ✔ (2714) – 체크
  • ✱ (2731) – 별표1
  • ✦ (2726) – 별표2
  • ❚ (275A) – 수직바
  • ➥ (27A5) – 화살표1
  • ➪ (27AA) – 화살표2
  • ➤ (27A4) – 화살표3
  • ◈ (25C8) – 다이아몬드
  • ▶ (25B6) – 삼각형
  • ✈ (2708) – 비행기
  • ❤ (2764) – 하트

색깔있는 목록 포인트

  • ✅ (2705) – 체크박스
  • ✍ (270D) – 필기손
  • (27BE) – 야구공
  • (27BD) – 축구공
  • ✨ (2728) – 스파클

저는 이 중에서 ❒ (2752) 목록 포인트를 적용해보았습니다. 글을 작성할 때는 포인트가 그대로지만 글을 발행하면 제대로 적용되는 것을 확인할 수 있습니다.

여러분도 본인만의 특색있는 목록 포인트를 적용해보시기 바랍니다.

글 마치며…

오늘은 목록 들여쓰기와 포인트를 변경하는 방법에 대해서 알아봤습니다. 워드브레스 블로그가 조금씩 업데이트 되고 있는 모습을 보니 뿌듯하네요.

그럼 오늘 글도 워드프레스를 하는 분들에게 도움이 되길 바라면서 마치겠습니다.

답글 남기기