구글 블로그 본문의 줄 간격을 가독성 좋게 수정하는 방법

오늘 정리하는 내용은 HTML과 CSS에 대한 기본 지식이 없다면 이해하기 힘든 내용이다.

그리고 템플릿에 따라 HTML과 CSS가 전부 다 다른 방식으로 적용이 되어있을 것이라서, 여기서 내가 한 방법을 그대로 따라하기만 하면 문제가 해결되지 않을 가능성이 높다.

본인의 블로그 템플릿에 맞게 응용을 할 수 있을 정도의 HTML과 CSS에 대한 지식이 필요하다.

그렇다고 HTML과 CSS에 대해서 공부한 적이 없는 사람도 이해 시킬 정도로 글을 쓰려면 너무 글이 길어진다.

그러면 너무 비효율적인 포스트가 될 가능성이 있다.

그럴거면 차라리 HTML과 CSS의 기초에 대한 글을 쓰는 편이 나을 것이다.

어쨌든 이번에는 구글 블로그의 포스트 줄 간격을 가독성 좋게 수정해 보도록 하겠다.

가독성이 안 좋은 구글 블로그의 글 간격

내가 적용한 블로그 템플릿인 Amalia의 무료 버전은 초기에 줄의 간격이 이렇다.

설마 유료 버전이면 줄 간격이 예쁘게 되어 있으려나..? 설마 치사하게 그런 것까지 차이를 두진 않았겠지..?

다들 뭔가 줄 간격이 어색하다는 느낌이 들 것이다.

'enter 키로 줄 바꿈을 한 부분'과 '한 문장의 길이가 한 줄을 넘어가서 자동으로 줄 바꿈이 된 부분'의 줄 위아래 간격이 다르다.

참고로 이런 줄의 간격은 본인 블로그에 적용한 템플릿에 따라 다 다르다.

어떤 템플릿은 글들이 너무 딱 붙어있어서 답답해 보일 수도 있고,

어떤 템플릿은 처음부터 줄 간격이 가독성 좋게 예쁘게 되어있을 수도 있다.

도대체 CSS가 어떻게 적용이 되어있길래 글의 줄 간격이 이러한지 개발자 도구를 통해 살펴보자.

웹 브라우저에서 키보드의 [F12] 키를 누르면 개발자 도구가 뜬다.

그러면 우측에 뜬 개발자 도구의 좌측 상단에 있는 버튼을 클릭한다.

그리고 블로그에 마우스를 올리면 이렇게 궁금한 부분을 확인해 볼 수 있게 된다.

포스트 본문의 어느 한 줄에 마우스를 올리니, 글의 위아래로 15px씩 간격이 생기고 있는 게 보인다.

이 부분(포스트 본문의 한 줄)에 마우스를 클릭한다.

그러면 개발자 도구에서 해당 부분의 CSS 코드를 확인할 수 있다.

포스트의 본문을 감싸고 있을 p 태그의 CSS 코드들이 보인다.

지금 나의 블로그의 경우에는 p 태그 이외에도 a, div, h1부터 h6까지의 태그 등등.. 다양한 태그들에 공통된 CSS 코드들이 적용되어 있다.

그런데 이 부분에는 딱히 글의 위아래에 15px씩 간격을 주는 코드가 보이지 않는다.

그런데 아래쪽을 보면 'user agent stylesheet'라는 부분이 있고, 거기서 또 p 태그에 뭔가 CSS 코드들이 적용된 것이 보인다.

거기에 'margin-block-start'와 'margin-block-end'에 1em이라는 값이 적용되어 있는데,

이것이 p 태그의 위아래에 15px씩 간격을 주고 있는 것이다.

그런데 user agent stylesheet에 적용된 CSS는 이 블로그에 적용이 되어있는 CSS가 아니다.

이건 브라우저가 자동으로 적용해 놓은 CSS 값이다.

이걸 무효화 시키려면 블로그의 코드 편집으로 들어가서 직접 p 태그에 margin 값을 적용시켜야 한다.

이번에도 개발자 도구 좌측 상단의 버튼을 클릭해서 블로그의 본문 전체를 선택해서 클릭한다.

그리고 개발자 도구를 확인하면 본문 전체를 감싸고 있는 div 태그가 하나 있는데, 이 div 태그의 class 속성에 'post-body'와 'post-content'가 있는 것이 보인다.

이제 어디를 수정하면 되는지 찾았으니 블로그의 코드를 편집하는 곳으로 가서 코드를 수정하자.

구글 블로그의 HTML 편집을 통해 글 간격 조절

구글 블로그 관리 페이지의 왼쪽에 있는 메뉴들 중에서 '테마'를 클릭하고,

드롭다운 메뉴 중에서 'HTML 편집'을 클릭한다.

수천 줄이 넘는 코드에서 'post-body' 클래스를 직접 눈으로 찾을 수는 없을 것이다.

[ctrl + F] 키를 눌러서 '.post-body'를 검색해 보자.

우리는 class 속성이 'post-body'인 태그의 내부에 있는 p 태그에만 CSS를 적용할 것이기 때문에 그 코드를 넣을 적절한 위치를 찾는 것이다.

여기서는 '.post-body h3'의 바로 아래에 넣는 게 가장 적절할 것 같다.

/* 직접 추가 */
 .post-body p{
    margin:0;
}
/* 추가 끝 */

이와 같은 코드를 추가하고 저장을 해보자.

margin 값을 0으로 주고 저장을 했다.

내가 직접 수정하거나 추가한 코드는 나중에 다시 찾기 쉽도록 주석을 넣었다.

결과는 이렇다.

수정 전에는 'enter 키로 줄 바꿈을 한 부분'과 '한 문장의 길이가 한 줄을 넘어가서 자동으로 줄 바꿈이 된 부분'의 줄 위아래 간격이 달라서 굉장히 보기 불편했는데, 지금은 그 문제가 해결되었다.

하지만, 이번에는 반대로 줄의 위아래에 간격이 너무 없어서 답답한 느낌이 든다.

/* 직접 추가 */
 .post-body p{
    margin:0;
    line-height:2
}
/* 추가 끝 */

그래서 이번에는 'line-height'를 추가하고 값은 2를 넣었다.

저장 버튼을 클릭하고 다시 블로그를 확인해 보자.

비교를 위해서 다시 아직 아무런 수정을 하지 않았을 때의 글 간격을 캡처했다.

이것이 margin과 line-height 값을 수정한 모습이다.

처음에 비해서 훨씬 보기 편해졌다.

이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요. (비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊

지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.