본문 바로가기
블로그 Story/마숲 블로그 운영

티스토리 본문 리스트 글자 폰트 크기, 색 변경하는 방법

by 마숲 2025. 3. 25.
반응형

이번 내용은 티스토리 블로그의 본문 내용 중에 숫자나 점. 기호 등으로 들여 쓰는 리스트 기능이 있는데, 리스트에 들어가는 글자 크기와 글자색을 조절하는 방법을 다룹니다.

 

🥕광고 차단 프로그램을 OFF 하여 주시면 좋은 콘텐츠를 제작하는 데 있어 많은 힘이 됩니다. 안녕하세요, 마녀의 숲속 블로그의 마숲입니다~^ ^

 

티스토리 본문 리스트 글자 폰트 크기, 색 변경하기

CSS부분을 만져야 하니, 혹시 모를 문제 발생을 위하여 꼭 메모장에 백업해 놓기 바랍니다.

티스토리 본문 리스트 글자 폰트 크기, 색 변경하는 방법
티스토리 리스트 기능

 

리스트라는 건 위 캡처에 나오는 점 같은 기호를 이용하여 본문을 작성하는 형식을 이야기합니다.(위 이미지에선 리스트의 글자색과 폰트 사이즈를 지금 소개하는 방법을 통해서 본문과 같게 바꿔놓은 것입니다.) 티스토리 포스팅 편집 화면에서, 상단 메뉴의 우측에 보면 아래와 같이 리스트의 종류를 선택할 수 있습니다.

 

반응형

티스토리 본문 리스트 글자 폰트 크기, 색 변경하는 방법
리스트 기능 선택 화면

 

블로그 스킨은 북클럽 기준으로 설명이 됩니다.

 

1. 티스토리 블로그 관리 페이지에 접속합니다.

  • 티스토리 블로그 메인 화면에 접속합니다.
  • 우측 상단의 '계정 아이콘'을 클릭하고, '관리'를 선택합니다.
  • 좌측 하단 메뉴에서 '꾸미기'를 클릭한 후, '스킨 편집'을 선택합니다.

 

2. HTML 및 CSS 편집 차례입니다.

  • 스킨 편집 페이지에서 우측 상단의 'HTML 편집'을 클릭합니다.
  • 'CSS' 탭을 선택하여 CSS 코드를 편집합니다.

 

3. 리스트 글자 크기 및 색상 변경 코드를 찾습니다.

    • CSS 편집 화면에서 Ctrl + F를 눌러 검색 기능을 활성화합니다.
    • entry-content ul li (순서 없는 리스트) 또는 entry-content ol li (순서 있는 리스트)를 검색하여 해당 코드로 이동합니다.

예를 들어, 순서 없는 리스트의 글자 크기와 색상을 변경하려면

.entry-content ul li {
    font-size: 1.1em; /* 원하는 크기로 설정 */
    color: rgb(64, 64, 64); /* 원하는 색상으로 설정 */
}

 

 

    • 순서 있는 리스트의 경우

.entry-content ol li {
    font-size: 1.1em; /* 원하는 크기로 설정 */
    color: rgb(64, 64, 64); /* 원하는 색상으로 설정 */
}

 

  • 빨간색 표시된 부분을 원하는 크기와 색으로 변경 후 저장하고 새로고침 하여 적용된 결과를 확인합니다.

 

✅ 본문 사이즈의 글씨 크기 그대로 하고 싶다면, 스크롤하여 좀 올라가면

.entry-content p {
 
부분이 있습니다. 이곳에 있는 폰트 사이즈와 같도록 변경하면 됩니다.
 
 

RGB 색상 코드 예시

  • 파란색: rgb(0, 0, 255)
  • 빨간색: rgb(255, 0, 0)
  • 초록색: rgb(0, 128, 0)
  • 검은색: rgb(0, 0, 0)
  • 흰색: rgb(255, 255, 255)
  • 회색: rgb(64, 64, 64)

 

 

반응형
kakaoTalk facebook twitter naver band shareLink

댓글