글자크기를 수정하고보면 어딘가모르게 글자 사이, 높이 간격이 아쉬울 때가
있습니다.
간단하게 HTML 편집을 통해서 본문 행간, 자간 여백 조절하는 방법을 알려드리겠습니다.
블로그스팟 본문 행간, 자간
행간 : 한줄 한줄 사이의 간격
자간 : 글자 사이의 간격
행간은 문장 간의 간격이라고 보시면 되는데요! 글이 2줄이면 줄 간격을 의미합니다.
자간은 글자 간의 간격을 말하는데 [자간]이 넓어지면 [자 간] 이렇게 보이겠죠? 😅
사진을 보시면 좀더 이해가 잘 되실거라 생각합니다.
본문 행간, 자간 여백 조절 방법
블로그스팟의 본문 행간을 수정하기 위해서는 테마 > HTML 편집 메뉴로
이동합니다.
(이제는 익숙하시죠? 😀)
그리고 컨트롤(Ctrl)+ F 키를 눌러서 검색창(Search)을 띄워서 post-body를 검색합니다.
post-body 검색하면 여러 곳에서 검색이 되는데요~
/*! Blog */ 글씨가 보이는 곳에 있는 post-body가 수정해야할 값이 있는 곳입니다.
여기서 #post-body{postion:relative;float:left;width:100% ... margin:0}까지 선택합니다.
중간에 ... 은 너무 길어서 생략한 것이지 선택하지 말라는 것이 아닙니다!!
이렇게 선택한 부분을 수정해야하는데.. 하나씩 수정하면 헷갈리실수 있으니 아예 통으로 바꾸겠습니다.
현재 선택한 #post-body{ }부분을 삭제하고, 제가 알려드리는 코드로 대체합니다.
#post-body {
position: relative;
float: left;
width: 100%;
font-family: var(--text-font);
font-size: $(itempost.content.size);
color: var(--post-text-color);
line-height: 1.8em; /* 행간 수정 */
letter-spacing: 0.02em; /* 자간 추가 */
padding: 0;
margin: 0;
}위 코드를 복사해서 삭제한 자리에 그대로 붙여넣습니다(실제로는 2줄만 추가된 코드입니다)
위 사진처럼 기존 코드를 삭제하고 그 자리에 방금 알려드린 코드를 넣으시면 됩니다.
중간에 코드를 추가하는 방식으로 하면 헷갈려하시는 분들이 계셔서 아예 지우고 다시 붙이는 방법으로 알려드렸습니다!
/* 행간 수정 */ /*자간 추가*/ 식으로 제가 주석을 달아놨으니 해당부분 숫자들을 수정하시면 됩니다.
블로그스팟 본문 단락 여백 조절
글자와 글자, 문장과 문장의 여백을 수정했다면 이제는 본문 단락 여백을 조절해보겠습니다.
단락 = 문단(글을 내용상 끊어서 구분한 하나하나의 토막)
쉽게 말해서 글자가 모여서 문장이 되고, 문장이 모여서 문단(단락)이 된다고 보시면 됩니다.
소제목과 단락 부분만 간격이 벌어진 것을 확인할 수 있습니다.
문장과 문장 사이의 간격에는 변화가 없죠?
본문 단락 여백 조절하기
본문 단락(문단) 여백 조절하는 코드는 좀전에 작업했던 부분 바로 아래에 있습니다.
.post-body { } : 본문 전체에 영향을 주는 스타일 정의
.post-body p { } : 본문 내의 단락<p>에만 영향을 주는 스타일 정의
그래서 이번에 단락 여백은 .post-body p { } 부분을 수정하겠습니다.
margin-bottom: 1.2rem; /* 단락 아래 여백 */ margin-top: 1.2rem; /* 단락 위 여백 */
이렇게 2줄만 추가하고, 주석 처리한 단락 아래, 위 여백 숫자를 수정하면 단락 여백 조절이 가능합니다.
HTML, CSS 코드 수정하는게 익숙하지 않으시다면 가급적 순정 그대로 쓰시는 것을 추천드립니다.
괜히 잘못 고쳤다가 블로그 전체 글자가 엉망이 될 수 있으니 잘 확인하면서 수정하시기 바랍니다.