티스토리 블로그 '리스트' 기능 폰트 사이즈 및 들여쓰기 등 수정하기

티스토리 블로그 에디터를 활용하여 포스팅을 작성하실 때 사용하시는 기능 중에 '리스트' 기능이 있습니다.

아래 그림과 같이 3가지 종류의 목록(검은색 동글뱅이, 하얀색 동글뱅이, 숫자)을 선택하여 사용하는 기능인데, 해당 아이콘 위에 '마우스 오버'를 해보면 '리스트'라고 나타나기 때문에 '리스트' 기능이라고 부르겠습니다. 

티스토리 에디터 리스트 기능

 

■ '리스트' 기능 스타일 수정 필요성

이런저런 글을 작성하다 보면 주요 내용들을 List-up 하여 정리할 필요가 있는데, 이때 사용하기 좋은 기능이 바로 이 '리스트' 기능입니다.

 

저 역시 이 기능을 매우 애정 하며 사용하고 있는데요. 그런데 '리스트' 기능을 이용하여 작성된 부분의 폰트 사이즈나 들여 쓰기, 윗줄과 아랫줄 사이 간격 등이 마음에 들지 않는 부분이 많았습니다.

 

아마 다른 분들도 비슷한 생각을 가지고 계신 분들이 많을 것 같아 '리스트'로 작성된 부분의 스타일을 자신에게 알맞게 수정하는 방법에 대해서 알아보고자 합니다. 

 

1. '리스트' 기능 들여 쓰기 수정하기

제가 지난번에 작성한 글에서 샘플로 한 부분을 가져왔습니다.

아래 그림을 보시면 에디터의 '리스트' 기능에서 하얀색 동글뱅이 첨자를 선택하여 글을 작성한 것을 보실 수 있습니다.

 

여기서 제가 마음에 들지 않는 부분은, 들여 쓰기입니다.

하얀색 동글뱅이 첨자 뒤로 쓰인 글이 길어지면서 줄 바꿈이 되었는데, 줄 바꿈 된 부분이 윗줄과 시작 위치가 맞지 않고 두 글자 정도 뒤로 밀려 있는 것을 보실 수 있습니다. (붉은색 화살표로 표시된 부분 참조)

 

저는 이 부분을 앞으로 당겨 윗줄과 시작 위치를 동일하게 맞춰주고자 합니다.

리스트 샘플 이미지 (기본형태)

 

일단, CSS 파일에서 '리스트'가 정의된 부분을 찾아갑니다. 

CSS 파일 중 List 정의 부분

• CSS 파일의 대략 1469행 주변에서 위의 그림과 같이 "entry-content ul li"를 정의하고 있는 부분을 찾아주세요.
• 구조를 보시면 굳이 ②번에서 "padding-left"를 활용하여 왼쪽으로부터 22px을 띄우고, ⑤번에서는 "text-indent"를 활용하여 다시 좌측으로 22px만큼 들여 쓰기 하게 만들어 놓은 것을 알 수 있습니다.
• 따라서 ②번과 ⑤번 모두 0px로 바꿔 주시면 들여 쓰기가 없어지고 일렬로 줄 맞춤됩니다. (아래 그림 참고)

리스트 샘플 이미지 (앞줄 정렬)

• 반대로 비슷하게 응용을 해줄 수도 있습니다. ②번은 0px로 고정한 상태에서 ⑤번을 12px 정도로 수정해주면 아래 그림과 같이 이번에는 윗줄이 들여 쓰기 된 것을 보실 수 있습니다.
• 윗줄을 들여 쓰기 하여 사용하고 싶으신 분들은 스타일을 이렇게 수정하여 사용하실 수 있습니다.

리스트 샘플 이미지 (윗줄 들여쓰기)

※ 주의: 위에서 들여 쓰기 위치를 조절하기 위하여 px을 수정하시는 경우, 숫자와 px 사이에 공백을 넣지 말고 붙여 써주시기 바랍니다. 공백이 있는 경우 제대로 반영되지 않는 문제가 있습니다.

 

2. '리스트' 기능 폰트 사이즈 수정하기

CSS 파일 중 List 정의 부분

• 리스트로 작성되는 부분의 폰트 사이즈를 키우거나 줄이고 싶으신 경우, 위의 그림의 ③번 "font-size" 항목의 숫자를 키우거나 줄여주시면 됩니다. 
• 기본 사이즈는 본문 폰트(p)와 동일한 0.9375em으로 되어 있는데, 본문 폰트 사이즈를 키우거나 줄이신 분들은 거기에 맞추어 '리스트'의 폰트 사이즈도 키우거나 줄여주실 수 있습니다. 

 

3. '리스트' 기능 줄 간격 수정하기

• 리스트의 줄 간격은 위의 그림에서 ④번 항목 "line-height"의 숫자를 활용하여 수정하실 수 있습니다.
• "line-height"를 '1.5714'에서 '2.5714'로 키워주니, 아래 그림과 같이 줄 간격이 확 커진 것을 보실 수 있습니다. 알맞은 숫자로 조절하여 원하는 줄 간격으로 맞춰주실 수 있습니다. 

리스트 샘플 이미지 (줄간격 키우기)

 

4. '리스트' 기능 마진 수정하기

CSS 파일 중 List 정의 부분

• 그림에서 보시면 ①번 항목 "margin-bottom"이 있는 것을 보실 수 있습니다. 리스트 기능을 활용하여 작성된 구간과 다음 구간과의 간격을 의미하는 것입니다. 
• 현재는 bottom(아래쪽)과 10px 만큼의 간격을 주라고 되어 있습니다. 간격을 조절하고 싶으신 분들은 숫자를 늘리거나 줄여주시면 됩니다.
• 또한 현재는 bottom과의 margin만 설정되어 있는데, 아래쪽뿐만이 아니라 위쪽과도 간격을 주고 싶으신 분들은 해당 부분을 다음과 같이 변경해주시면 됩니다. 
• "margin-bottom: 10px" → "margin: 10px 0 10px"과 같이 변경하면 아래쪽뿐만이 아니라 위쪽과도 margin이 설정됩니다.