li 태그 점 숫자 머릿말 색상 속성 바꾸는 방법 (티스토리 css 편집)
li 태그는 1, 2, 3과 같이 목록 숫자를 나열하는 태그입니다. list의 약자로 ul과 ol 태그와 함께 사용됩니다.
번호 순으로 목록을 나열한다면 ol 태그를, 순서 없이 모양으로 된 순서라면 ul 태그로 시작됩니다.
<ol>
<li>목차1</li>
<li>목차2</li>
</ol>일반적으로 위와 같이 구성되는데요.
목차 앞에 나오는 숫자나 점 모양의 색상을 바꾸고 싶으신 분도 계실 것입니다. 티스토리 모바일 버전에서는 자동으로 주황색으로 변경이 되는 부분인데, pc버전이나 반응형에서 자동으로 생성되는 목록의 li 점이나 숫자 부분만 색상을 변경하고 싶으시다면 css에서 색상을 추가하여 해결이 가능합니다.
먼저 티스토리 관리자 페이지로 로그인합니다.
[꾸미기]-[스킨 편집]-[css]로 들어갑니다.
li::marker {
color: #FF4500;
}위와 같은 css 코드를 붙여넣기 하시면 li 속성에 색상을 설정할 수 있습니다.
본문 div 이름까지 붙여서 예를 들면 본문의 div 이름이 article이라면 class 설정하여 좀 더 세분화해서 설정하는 것도 본문 안의 머릿글 li 색상만 변경하는 방법이기도 합니다.
.article li::marker {
color: #FF4500;
}#FF4500부분을 원하는 색상코드로 변경하시면 됩니다.
li 목록에서 동그라미나 점, 문자 등을 marker라고 하며, 마커의 모양은 list-style-type으로 설정할 수 있습니다. circle, square, decimal 등 속성을 설정할 수도 있는데요.
머릿글 기호인 마커의 색상 설정뿐 아니라 font-size도 설정할 수 있습니다. 이렇게 설정된 마커를 설정하는 css 활용하여 색상 변경이 가능합니다.