티스토리 문서작성 글자 벌어짐 현상 해결 방법

티스토리 블로그를 운영하다 보면 글자 간격이 이상하게 벌어지는 현상을 경험할 수 있습니다. 이러한 문제는 방문자 경험을 해치고 가독성을 떨어뜨릴 수 있으므로 빠르게 해결해야 합니다. 이번 글에서는 간단하게 글자 벌어짐 현상을 해결하는 방법을 소개합니다.

 

 

 

 

CSS 수정으로 글자 간격 해결

 

가장 기본적인 방법은 스킨의 CSS를 수정하는 것입니다. 티스토리 관리자 페이지에서 아래 단계를 따라 해보세요:

body {
    letter-spacing: normal; /* 글자 간격 초기화 */
    line-height: 1.6;       /* 줄 간격 설정 */
}
        

 

위 코드를 적용하면 글자 간격과 줄 간격이 정상적으로 표시됩니다.

 

 

 

 

 

 이미지 태그의 alt 속성 활용

 

 

 

이미지와 텍스트 간의 간격이 이상하다면, 이미지 태그에 alt 속성을 추가하고 스타일을 수정하세요:

 

 

<img src="example.jpg" alt="티스토리 글자 벌어짐 해결 방법" style="letter-spacing: normal; display: block; margin: 0 auto;">

 

 

 

이렇게 설정하면 이미지와 텍스트 간의 충돌을 방지할 수 있습니다.

 

 

 

 

 

외부 문서 복사 시 스타일 초기화

 

 

외부 문서(워드, 엑셀 등)에서 텍스트를 복사/붙여넣기할 경우 불필요한 스타일 태그가 포함될 수 있습니다. 이런 경우 다음과 같은 단계를 따르세요:

 

● 복사한 텍스트를 메모장에 붙여 넣어 스타일을 제거합니다.

●  티스토리 에디터에서 "스타일 초기화" 버튼을 사용합니다.

●  HTML 편집 모드에서 불필요한 태그를 삭제합니다.

 

 

 

모바일과 PC 환경 테스트

 

 

모바일과 PC에서 각각 글자 간격이 다르게 보일 수 있으므로, 반응형 코드를 추가하세요:

 

@media screen and (max-width: 768px) {
    body {
        letter-spacing: normal;
    }
    img {
        max-width: 100%;
        height: auto;
    }
}
        

 

 

이렇게 하면 모바일에서도 가독성이 유지됩니다.

 

 

 

 

마무리

 

티스토리 글자 벌어짐 현상은 간단한 CSS 수정과 HTML 정리로 해결할 수 있습니다. 문제를 해결한 후에는 방문자 경험이 개선되고 블로그 운영에도 긍정적인 영향을 줄 것입니다. 위 방법을 활용해 보세요!