'엔터'와 '쉬프트+엔터'를 구분하여 글쓰기
일반적으로 Word나 한글 문서를 쓸 때 줄바꿈을 하려면 '엔터'를 누릅니다. 하지만 웹, HTML 상에서 에디터로 글을 작성할 때는 단순 줄바꿈이 아닌 단락이 나뉘게 되는데요. 엔터를 치고 타이핑을 때마다 p태그가 생성되며 <p></p>의 형태로 감싸 쥔 상태로 타이핑이 들어가게 됩니다.
<p data-ke-size="size16">'엔터'를 누를 때마다 이와 같은 p태그가 자동으로 추가됩니다.</p>Word나 한글 문서를 쓸 때 단락을 나누려면 의도적으로 '엔터'를 두 번 누르곤 합니다. 웹 상에서도 동일하게 '엔터'를 두 번 누르게 되면 불필요하게 <p></p><p></p>가 입력이 되게 되며 SEO 상에서는 빈 단락으로 인식하여 검색 시에 좋은 점수를 받지 못하는 데 영향을 줄 수 있습니다.
티스토리 에디터에서는 '엔터'와 '쉬프트+엔터'의 기능이 구분되어 있으며 줄바꿈만 필요할 때는 '쉬프트+엔터'를 누르고 단락을 나눌 떄는 '엔터'를 눌러 구분할 수 있습니다. 다만 기본 옵션으로는 에디터 상이나 실제 블로그 상에서 구분이 되지 않으므로 아래와 같이 옵션을 바꿔 줍니다.
단락 사이 여백을 기본으로 설정하기
콘텐츠 설정에서 '단락 앞뒤에 공백을 사용합니다'로 바꿔줍니다. 그러면 에디터 상에서는 '엔터'와 '쉬프트+엔터'가 행간의 간격차이로 명확하게 구분 지어집니다. 다만 실제 블로그, 오디세이 스킨 상에서는 구분이 되지 않는데요. 스킨의 CSS 편집에서 아래와 같이 몇 가지 바꾸어 줍니다.
'엔터' 후에 여백이 생기도록 CSS 편집하기
.article-view p {
font-size: 17px;
line-height: 32px;
color: #2E3338;
margin-bottom: 17px !important;
}CSS 편집에서 .article-view p를 검색하면 margin-bottom 값이 있는데요. 여기서 원하는 만큼 간격 값을 입력하고 뒤에 !important를 추가해 줍니다. 왜인지는 모르겠지만 !important 없이는 간격이 반영되지 않아 추가해 주었습니다.
.article-view blockquote {
margin: 0 0 20px 0 !important;
padding-left: 19px;
border-left: 1px solid;
font-size: 16px;
line-height: 1.75;
color: rgba(0, 0, 0, 0.54);
}.article-view blockquote는 인용문 스타일 값입니다. margin에서 0 0 20px 0 중 세 번째 자리는 bottom이므로 아래 간격을 늘리기 위해 값을 20px로 올려주고 !important를 넣어 주었습니다.
'엔터'를 두 번 치지 않고 포스팅하기 위해 오디세이 스킨편집을 해 보았는데요. 만약 '엔터' 한 번의 단락 변경만으로 간격이 모잘라 아쉽다면 '쉬프트+엔터'로 줄바꿈만 이용해서 글을 작성해 볼 생각입니다. 기존에 '엔터'를 두 번 친 글들은 일일이 수정해주어야 하지만 검색에 최적화된 글을 쓰기 위해서 하나씩 고쳐가 보고 있습니다. 😀
코멘트로 의견 교류는 환영합니다. 다만 의무적인 코멘트 작성, 비밀 댓글은 지양해 주세요. 🥹