티스토리 가독성 높이기 / 줄 간격 조절하는 방법

반응형

 

 

 

줄 간격이 좁으면 답답하고, 줄 간격이 너무 넓어도 내용이 한 눈에 들어오지 않아 가독성이 낮아집니다.

읽고 싶은 티스토리를 만들기 위한 방법으로  줄 간격을 조절하는 방법을 정리해보겠습니다.

 

적당한 줄 간격이 보기도 좋고 읽기도 좋다는 것은 알지만,

그 적당한 줄 간격이 얼마인지 알기 위해서는 실험과 테스트가 필요할 것 같습니다. 

 

 

 

 티스토리 줄 간격 조절하는 방법 

 

STEP 1. [관리]-[스킨편집] -[HTML편집]-[CSS]  클릭

 

 

STEP 2.  [ line-height  ] 값 조정

 

보통의 기본값은 28px로 설정되어 있습니다. 값을 조정한 뒤 [적용] 버튼을 누르면 줄간격이 변경됩니다. 

본문 글, 헤드(제목)의 줄간격을 각각 조정할 수 있습니다.

 

- 본문 글의 줄간격은 article이나 content  태그에 위치한 line-height를 조정하여 설정합니다.

- 타이틀은 h1,h2,h3,h4 태그 하단의 line-height를 조정하여 설정합니다. 

 

 

 

 

 

  티스토리 알쓸신잡

 

[HTML과 CSS]

 

HTML (Hypertext Mark-up Language)

웹 문서를 만들기 위해 사용하는 기본적인 웹 언어의 한 종류

웹 브라우저는 HTML의 명령어를 이해하고 실행함

ex. <img src = "image.jpg"> 와 같은 html 명령어는 "이미지파일 'image.jpg' 를 보여줘"와 같은 말이다.

 

CSS  (Cascading Style Sheets)

HTML, XHTML, XML 와 같은 웹 언어로 만들어진 문서의 전반적인 스타일을 설정할 때 사용하는 스타일 시트 언어

문서 전체에 적용될 수 있는 표준 스타일 시트로 문서 전체의 일관성을 유지할 수 있고 수시로 스타일을 지정하지 않을 수 있게 해주는 스타일 시트이다.  문서 전체에 적용되는 글꼴, 배경색, 너비, 높이, 줄간격, 배열위치 등의 기본값을 설정할 수 있다.

 

 

[HTML - h 태그 ] 

html 에서 문서의 제목 (heading) 은 h 태그로 표시합니다. h1~h6 까지의 제목태그를 사용할 수 있으며, 뒤에 붙은 숫자가 커질 수록 하위제목, 작은 글씨 사이즈를 의미합니다. 

 

- 웹 브라우저 상에서 h 태그는 웹상의 정보를 계층화하여 정보의 속성을 쉽게 파악할 수 있게 하는 기능을 합니다.  따라서  h태그를 잘 활용하면 검색에 유리한 구조를 만들 수도 있습니다. 

 

 

반응형
  • 네이버 블로그 공유
  • 네이버 밴드 공유
  • 페이스북 공유
  • 카카오스토리 공유