li 머릿글 숫자 색상 변경 방법 (티스토리 스킨 편집 수정)

티스토리에서 제공하는 기본 ol, li 기능 중 하나인 숫자 머릿글을 사용해보았는데요. 글을 작성하면 다음처럼 자동으로 목록을 표시하는 ol, li이 사용됩니다.

티스토리 새 에디터에서 기본 제공하는 [리스트] 기능

<ol style="list-style-type: decimal;" data-ke-list-type="decimal">
<li data-ke-size="size23">가독성이 모바일 버전과 PC 버전 모두 마음에 듬</li>
<li data-ke-size="size23">자동목록 js 소스를 공유되고 있음</li>
<li data-ke-size="size23">티스토리 스킨 편집, html이나 css를 잘 모르는 사람에게도 용이함</li>
</ol>

위와 같이 서식을 활용하면 ol, ul 태그를 자동 작성이 되는데요. 해당 html의 속성을 css에서 별도로 수정하여 색상 및 크기를 변경할 수 있습니다.

2021년 7월 20일 수정 update 💡
이전에 작성한 li 머릿글 색상 변경 방법보다 새로 수정한 방법이 더 손쉽게 변경 가능합니다.

/*목차 리스트 list-style 색상 변경*/
.content-article li::marker {
color: 색상코드;
position: absolute;
}

▲ 위의 코드는 새로 수정한 css 코드로 css에서 추가하면 머릿글 색상을 변경할 수 있습니다.

content-article 부분은 자신이 사용하는 티스토리 본문 div로 교체하시면 적용됩니다.

예를 들어 고래스킨이라면 post-content로 변경하시면 되고, 어포스트 스킨이라면 entry-content으로, 오디세이 스킨이라면 article-view입니다. div 이름 앞에 "."을 꼭 잊지 말고 넣어줘야 합니다.

---

💬 아래의 글은 이전에 작성한 글로 티스토리 모바일 css 버전을 참고하여 작성한 글입니다. 해당 방법의 단점은 숫자 외에 다른 마크 표시가 나오지 않는다는 문제를 안고 있습니다. 그러한 단점 때문에 위에 정리한 새로운 코드를 사용하시는 것을 권장합니다.

위의 글처럼 자동으로 html이 생성이 되며, 작성된 내용은 오디세이 티스토리 기본 스킨에서 아래와 같이 출력이 됩니다.

기호 1과 옆의 문자 색상이 같게 출력됩니다

▼ 티스토리 모바일 버전에서는 붉은 색으로 숫자 리스트가 별도로 보여집니다.

티스토리 모바일 버전에서 자동 적용된 글

모바일 버전 css를 이용해서 오디세이 기본 스킨의 머릿글 색상을 변경해보았는데요. 방법은 다음과 같습니다.

 

li 머릿글 색상 css 수정 방법

(1) 티스토리 html 편집 > css으로 들어갑니다.

(2) .article-view ol {을 검색합니다.

위의 보라색 부분을 찾습니다.

.article-view ol {
    margin: 0;
    padding: 0 0 0 19px;
}

.article-view ul li {
    font-size: 16px;
    line-height: 24px;
    color: rgba(0, 0, 0, 0.87);
    word-break: break-all;
}

.article-view ol {
    margin-bottom: 32px;
}

.article-view ol li {
    margin-bottom: 6px;
    font-size: 16px;
    line-height: 1.75;
    color: rgba(0, 0, 0, 0.87);
    word-break: break-all;
}

위의 내용을 삭제합니다.

(3) 삭제한 곳에 아래의 css를 추가합니다.

.article-view ol {
    display: block;
    margin-bottom: 24px;
    counter-reset: ol-counter;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 10px;
}

.article-view ul {
    margin-top: 18px;
}

.article-view li {
	list-style: none;
    display: list-item;
    text-align: -webkit-match-parent;
    position: relative;
    padding-left: 15px;
    margin-top: 6px;
    line-height: 24px;
}

ol>li:before {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 16px;
    color: #f36d36;
    content: counter(ol-counter);
    counter-increment: ol-counter;
}

이렇게 하면 머릿글 숫자 색만 변경하는 것이 가능합니다.

머릿글 숫자만 변경되는 것을 확인할 수 있습니다

Q) 숫자 색상 변경하려면?

A) 숫자 색상을 변경하고 싶다면 color: #f36d36; 이부분에서 #f36d36를 원하는 색상 코드로 변경하시면 적용됩니다.

 

Q) 숫자 크기를 변경하고 싶다면?

A) font-size: 16px;에서 16px부분의 수치를 변경하시면 됩니다. px뿐 아니라 em, rem 등 다른 단위로 변경하는 것도 가능합니다.

머릿글 숫자 변경하는 방법에 대해서 고민이셨던 분께 도움이 되셨길 바랍니다.