티스토리 북클럽 List 간격 - List ul li

목차

티스토리 북클럽 List 간격

북클럽의 List를 사용하면, 아래 그림처럼 간격이 이상한 부분이 있습니다. 개인의 취향이겠지만, 이부분을 조금 조정하기 위해 css 수정을 하였습니다.

크롬 개발자 도구로 찾기 List 간격 찾기

크롬 개발자도구(F12 키) 사용법은 뛰어 넘고, 문제의 부분의 요소를 체크해봤습니다.

#article-view ul 부분의 margin에 간격이 정의되어 있습니다.

개발자 도구에서 margin을 직접수정해서 확인하여,
margin: 14px auto 24px; ⇒ margin: 0px auto 14px; 로 수정하였습니다.

아래 그림에서 수정 후의 간격이 보입니다.

 

티스토리 북클럽 숫자 List의 하위 List 텍스트 간격

용어를 모르겠어서, 숫자 List의 하위 List 텍스트 간격이라고 했는데, 숫자로 된 리스트의 하위 리스트의 경우에 텍스트가 기호를 침범합니다.

 이 것도 개발자 도구로 찾아보겠습니다.

text-indent: -15px로 되어 있습니다. 이 부분을 개발자 모드에서 값을 text-indent: 0px으로 수정하여 확인해 봅니다.

 

스킨 편집으로 수정하기

[html 편집 → css]로 가서  #article-view ul 을 찾아서 수정합니다.

#article-view ul,
#article-view ol {
  /* margin: 14px auto 24px; */
  margin: 0px auto 14px;
  padding: 0 0 0 10px;
}

 .entry-content ol li 을 찾아서 수정합니다.

.entry-content ol li {
  position: relative;
  margin-bottom: 10px;
  /* text-indent: -15px; */
  list-style: inherit;
}

---

  아래는 수정 정용한 List입니다.

• 테스트
  • 테스트
  • 테스트
• 테스트
• 테스트
• 테스트

테스트

1. 테스트
   • 테스트
   • 테스트
2. 테스트
3. 테스트