[티스토리 블로그 꾸미기] 본문 리스트 형식 꾸미기

안녕하세요! 지난번에는 굵은 글꼴 밑줄 효과 주는 방법을 소개했습니다. 이번에는 본문에서 리스트 형식을 꾸미는 방법을 알려드리겠습니다.

기존의 방법으로는 리스트 형식을 바꾸기 어렵습니다. 여백, 글자색, 밑줄 등 텍스트와 배경만 스타일링할 수 있습니다. 이번 글에서는 여백 조절 방법을 알려드리겠습니다.

이 작업은 티스토리 '북클럽' 스킨을 기준으로 진행합니다.

 

스킨 편집 들어가기

1. 관리자 페이지 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭합니다.
2. 새로운 창이 열리면 우측 상단에 있는 'html 편집' 버튼을 클릭합니다.

티스토리 관리자 페이지에서 '꾸미기'탭을 클릭하고 '스킨 편집'버튼을 클릭하는 모습

 

우측 상단에 있는 'HTML | CSS | 파일업로드' 중에 'CSS'를 클릭합니다.

티스토리 스킨 편집 창에서 'HTML ❘ CSS ❘ 파일업로드' 옵션 중 'CSS'를 클릭하는 모습

 

리스트 여백 조절

 

리스트 형식의 기본 설정은 왼쪽 여백이 많은 것을 확인할 수 있습니다.

리스트 기본 설정은 왼쪽 여백이 많다는 것을 확인할 수 있습니다.

CSS 파일 내에서 아무 곳이나 클릭한 후, Ctrl+F를 눌러 검색창에 '#article-view ul, #article-view ol'을 입력합니다. 보통 4459번째 줄에 있습니다.

#article-view ul,
#article-view ol

CSS 파일에서 내에서 '#article-view ul, #article-view ol'을 검색한 부분을 강조한 화면.

아래 코드를 복사해 붙여 넣거나, 값을 수정합니다.

#article-view ul,
#article-view ol {
  margin: 24px auto; /* 위, 아래 여백 24px, 좌우 중앙 정렬 */
  padding-left: 16px; /* 목록 아이템의 왼쪽 여백 */
  /* padding : 0 0 0 10px 에서는 px 값만 수정하세요. */
}

CSS 파일에서 리스트 여백을 조절하는 코드를 강조한 화면.

같은 방식으로, '#article-view ul li, #article-view ol li'을 검색합니다. 보통 4453번째 줄에 있습니다.

#article-view ul li,
#article-view ol li

CSS 파일 내에서 '#article-view ul li, #article-view ol li'를 검색한 부분을 강조한 화면.

아래 코드를 복사해 붙여 넣거나, 값을 수정합니다.

 

#article-view ul li,
#article-view ol li {
  margin: 0 0 3px 7px;
  line-height: 1.7;
}

CSS 파일에서 리스트 여백을 조절하는 코드를 강조한 화면.

변경한 여백을 미리보기로 확인하고 저장합니다.

변경한 여백을 미리보기로 확인하는 모습.

 

결론

이번 글에서는 본문 리스트 형식의 여백을 조절하는 방법을 알아보았습니다. 스킨 편집 메뉴에서 CSS 코드를 수정하여 리스트의 왼쪽 여백을 조절하는 방법을 단계별로 설명드렸습니다. 코드 변경 후에는 미리보기를 통해 적용된 여백을 확인하고 저장할 수 있습니다.

리스트 형식의 여백을 조절함으로써 글의 가독성을 높일 수 있습니다. 이러한 스타일링은 블로그 글을 더욱 깔끔하고 보기 좋게 만들어줍니다.

다음 글에서는 인용글 꾸미기 1탄 (따옴표 스타일 꾸미기)에 대해 소개하겠습니다. 기대해 주세요!

궁금한 점이나 문제가 있으면 댓글로 알려주세요!