최근 블로그에 포스팅 작업을 하면서
작업하고 난 후 완성된 글을 PC로 볼 때는 큰 이상을 못 느꼈는데
핸드폰으로 내가 쓴 글을 보다보니 가독성이 PC에 비해 많이 떨어진다는 것을 알게 되었다.
대부분의 사람들이 PC보다 손쉬운 핸드폰을 많이 사용하기 때문에
가독성을 높이기 위한 수정이 필요했다.
상대적으로 가로폭이 좁은 핸드폰 화면에서는 단어가 강제로 잘리면서 줄바꿈이 되기 마련이다.
다만 핸드폰 기종별로 화면 크기가 모두 다르기 때문에
모든 기종에 맞게 내가 간격을 조정하는건 불가능하다.
티스토리에서는 CSS를 활용하여 내 블로그의 스킨을 편집할 수 있기 때문에
CSS의 word-break 속성값을 변경하여
줄바꿈 시 단어가 강제로 잘리지 않도록 수정이 가능하다.
word-break 속성이란?
텍스트가 자신의 콘텐츠 박스 밖으로 나갈 때 줄바꿈을 할지 지정하는 속성이다.
word-break 속성에는 아래와 같이 4개의 속성 값이 존재한다.
1. normal : 한글은 글자 단위, 영어는 단어(띄어쓰기) 단위으로 줄바꿈된다.
2. break-all : 한글과 영어 모두 글자 단위로 줄바꿈된다.
3. keep-all : 한글과 영어 모두 단어(띄어쓰기) 단위로 줄바꿈 된다.
우리는 CSS의 word-break 속성값을 위 3번 keep-all 값으로 바꿔줘야 한다.
CSS 편집을 통해 word-break 속성값 변경하기
1) 내 블로그 관리 페이지에 들어가서 "스킨 편집" 메뉴로 들어간다.
2) CSS 편집화면에서 Ctrl+F 입력, ".contents_style" 검색 후 모든 "word-break: keep-all;"값을 추가후 적용 버튼을 누른다.
.contents_style 은 블로그 전체에 공통적으로 적용되는 클래스 값으로 해당 값을 수정하면 블로그 전체에 스타일이 적용된다.
3) 이후 블로그 포스팅글을 비교하면 줄바꿈이 변경된 것을 확인할 수 있다.
'일상 > 블로그운영' 카테고리의 다른 글
| 티스토리 네이버에서 검색되도록 등록하기 - 네이버 서치 어드바이저 (2) | 2025.02.16 |
|---|---|
| 티스토리(Tistory) 블로그 구글에서 검색되게 하기 (Google Search Console) (2) | 2025.02.05 |