워드프레스에서 자주는 아니지만 가끔 리스트 목록을 사용합니다. 그런데 리스트 목록의 들여쓰기 공백이 너무 커서 언젠가 조정해야지 하고 있다가 이번에 들여쓰기 공백을 조금 작게 조정하였습니다. 이 글에서는 워드프레스에서 리스트 목록 들여쓰기 공백 조정 방법에 대해 알아보겠습니다.
워드프레스에서 리스트 목록 들여쓰기 공백 조정하기
1. 워드프레스 리스트 목록 들여쓰기 조정 전과 후 비교
워드프레스에서 ul, ol, li 등 리스트 목록 태그를 사용하면 아래 그림의 왼쪽과 같이 들여쓰기 공백이 상당히 큽니다. PC는 화면의 폭이 넓어 큰 지장이 없지만 두 번째 그림과 같이 모바일 화면에서는 들여쓰기가 너무 클 경우 보기 불편한 경우가 있습니다. 반면에 아래 첫 번째 그림과 두 번째 그림의 오른쪽은 리스트 목록의 들여쓰기를 작게 조정한 결과입니다.
자세히 보지 않으면 아래 그림의 왼쪽과 오른쪽의 차이가 뭔지 잘 모르실 수도 있을 텐데요. 잘 보시면 왼쪽의 첫 번째 불릿의 위치가 ‘들’의 아래에 있는 반면, 오른쪽은 ‘록’ 아래에 있습니다.
이제 차이가 보이시나요? 저의 경우 왼쪽의 들여쓰기는 리스트 목록의 들여쓰기 공백이 너무 커서 왠지 조금 불편한 느낌이 드는 반면, 오른쪽은 적당히 들여쓰기가 되어 균형이 맞는 느낌이 듭니다.
리스트 목록의 들여쓰기 공백을 조정한 효과를 모바일에서 확인하면 좀 더 확실한 차이를 볼 수 있습니다. 아래 그림의 왼쪽과 같이 들여쓰기가 너무 클 경우 문장 앞의 공백이 너무 커 보이기 때문에 보기에도 좋지 않습니다.
2. 워드프레스에서 리스트 목록 들여쓰기 조정하기
워드프레스에서 리스트 목록의 들여쓰기를 조정하기 위해서는 CSS 코드를 사용해야 합니다. 코드는 아래와 같습니다.
.entry-content ul,
.entry-content ol {
padding-left: 0em; /* 불릿/숫자를 위한 공간 확보 */
list-style-position: outside; /* 불릿/숫자를 리스트 항목 밖에 위치 */
}
.entry-content li {
margin-left: 2.3em; /* 문장의 시작점을 기준으로 2.3em만큼 들여쓰기 */
text-indent: 0em; /* 첫 줄을 왼쪽으로 당김 */
}
.entry-content li > ul,
.entry-content li > ol {
padding-left: 1.2em; /* 중첩된 리스트 들여쓰기 */
list-style-type: square; /*불릿을 사각형으로 변경 */
}- 문장의 왼쪽 시작점을 기준으로 2.3em만큼 들여쓰기합니다.
- 리스트 목록에 중첩된 리스트가 있을 경우 불릿을 사각형으로 변경합니다.
준비된 코드를 워드프레스에 적용해 보겠습니다. 워드프레스 관리자 화면에서 ‘디자인’ → ‘사용자 정의하기’ → ‘추가 CSS’로 이동한 다음, 맨 아래에 위의 코드를 추가한 후, ‘공개’를 클릭하여 적용시킵니다.
3. 리스트 목록 들여쓰기 공백 조정 결과 확인하기
위와 같이 리스트 목록의 들여쓰기 공백을 조정하는 CSS 코드를 추가하고 적용시킨 결과는 아래와 같습니다.
오늘은 워드프레스에서 리스트 목록 들여쓰기 공백을 조정하는 방법에 대해 알아보았습니다. 눈에 확 띄는 변화는 아니지만 세세한 부분까지 신경을 쓰는 것을 방문자들도 언젠가는 느끼실 수 있을 거라 생각합니다. 한 번만 적용해 놓으면 모든 글에 적용되기 때문에, 필요하신 분들은 이 글을 참고하여 적용해 보시기 바랍니다.