구글 블로그에서 코드 블록의 디자인을 변경해 보자.

 이번에는 코드 블록의 디자인을 변경해 보겠다.

이건 개발과 관련 없는 일반적인 블로그를 운영하는 사람들에게는 필요 없는 내용이다.

지금의 이 블로그처럼 HTML 편집에 들어가서 코드를 고쳐야 하는, 그런 내용의 포스트를 작성하는 블로그에 필요한 내용이다.

수정 전의 코드 블록을 캡처한 이미지다.

일단 이 코드 블록을 사용하는 방법은 다음과 같다.

<pre><code>
    {{-- 코드가 들어갈 곳 --}}
</code></pre>

다른 템플릿은 어떤지 모르겠지만, 현재 사용중인 Amalia 템플릿 무료 버전에서는 이 코드만 사용해도 이렇게 기본적인 코드 블록은 표시해 준다.

그런데 나는 여기서 글씨체(폰트)도 변경하고 싶고, 폰트 사이즈도 약간 줄이고 싶다.

코드 블록의 글씨체(폰트)를 변경하는 방법

CSS 코드가 어떤 식으로 정의되어 있는지 확인하기 위해서 이번에도 어김없이 개발자 도구를 열었다.

키보드의 [F12] 키를 누르면 개발자 도구가 뜬다.

이 글을 볼 정도의 레벨에 있는 사람이라면 뭐 이런 설명들은 필요 없을 거라고 생각한다.

어쨌든 개발자 도구를 통해서 코드 블록의 폰트를 수정하고 싶다면 pre code의 CSS를 수정하면 된다는 것을 알게 됐다.

구글 블로그 관리 페이지에서 '테마' > 'HTML 편집'으로 이동한다.

그리고 [ctrl + F] 키를 눌러서 'pre code'를 검색해 보면 개발자 도구를 통해서 봤던 수정해야 할 부분이 보일 것이다.

그런데 이 구간.. 코드의 가독성이 심각하게 좋지 않다.

나는 개인적으로 VSCode를 이용해서 아주 약간의 노가다를 해서 코드를 전체적으로 가독성이 좋아지도록 수정했다. (아래에 캡처된 이미지를 참고)

그리고 pre code { }에는 font-family: Consolas;를 추가한다.

이 폰트가 VSCode 같은 코드 에디터의 기본적인 폰트이기 때문에 코드에 어울리는 폰트라는 느낌이 든다.

코드 블록의 폰트가 바뀌었다.

VSCode에서 항상 보던 폰트라서 훨씬 보기 편하다.

코드 블록에서 자동 줄 바꿈이 되지 않는 문제를 해결해 보자.

그리고 코드 블록에 문제점을 하나 발견하게 되었다.

위의 이미지에서 보이는 것처럼 코드가 길어서 한 줄을 넘어가게 되면 자동 줄 바꿈이 되지 않고, 코드가 잘리게 되어버린다.

문제를 해결하는 방법은 두 가지다.

하나는 코드가 길어지면 좌우로 이동할 수 있는 스크롤이 생기게 만들거나,

또 하나는 자동 줄 바꿈이 되도록 하는 것이다.

여기서는 자동 줄 바꿈이 되도록 해보겠다.

이번에는 pre{ }에 있는 white-space를 pre-wrap로 수정하면 된다.

이젠 코드가 길어지면 자동으로 다음 줄로 줄 바꿈이 된다.

마지막으로 폰트 사이즈 조절과 헤드 부분 색상 변경

위의 이미지처럼 코드를 바꾸면 된다.

코드 블록의 헤드 부분의 배경색을 바꿨고, 코드의 폰트 사이즈를 아주 약간 줄였다.

참고로 지난 포스트에서 변수를 이용해서 색상을 바꾸는 방법을 다뤘었는데,

이 구간에 있는 CSS에서는 변수를 사용할 수가 없다.

최종적으로 이런 디자인으로 수정되었다.

폰트를 바꿨고, 헤드 부분의 배경색을 블로그에 맞게 바꿨으며, 우연히 발견한 자동 줄 바꿈이 되지 않는 문제를 해결했다.

자동 줄 바꿈은 나중에 스크롤이 되도록 수정을 할지도 모르겠지만, 일단 이대로 써보기로 했다.

코드 블록에 스크롤 바가 생기도록 수정

자동 줄 바꿈 보다는 스크롤 바가 생기는 쪽이 좋을 것 같아서 내용을 추가한다.

스크롤 바가 더 낫겠다고 판단한 이유는 다음과 같다.

VSCode의 자동 줄 바꿈을 캡처했다.

h2 태그의 코드가 길어서 다음 줄로 자동 줄 바꿈이 생겼는데,

보이는 것처럼 들여쓰기가 된 줄에서 자동 줄 바꿈이 생기면 그 아랫줄도 자동적으로 들여쓰기가 되어야 코드가 보기 편하다.

하지만 블로그의 코드 블록은 그렇게 안된다.

CSS만으로 그런 효과를 주는 것이 나중에 가능해지는 때가 올지 모르겠지만, 일단 현재는 CSS만으로는 이런 논리적인 자동 들여쓰기가 불가능하다고 알고 있다.

자바스크립트를 사용하면 되겠지만, 일단 그 방법이 간단하지는 않을 테고, 코드 블록을 꾸미기 위해서 블로그 템플릿이 점점 무거워지는 것은 비효율적인 것 같다.

그래서 CSS만을 이용해서 자동 줄 바꿈을 취소하고, 스크롤 바가 생기도록 수정해 보겠다.

다시 'pre'로 검색해서 수정해야 할 부분을 찾는다.

이번에는 pre{ }에 있는 padding을 삭제하고, white-space를 다시 pre로 돌려놓는다.

그리고 pre:before{ }에 있는 margin-left와 margin-right를 삭제하고,

pre code{ }에서 padding: 0 7px;을 추가하고, overflow-x: auto;를 추가한다.

이제는 한 줄의 코드가 길어지면 이렇게 스크롤 바가 생기도록 바뀌었다.

한 줄짜리 코드의 디자인도 변경

또 내용을 추가한다. (참고로 지금은 2025-08-15)

글의 본문 안에 자연스럽게 들어가는 한 줄짜리 짧은 코드 블록을 사용할 경우에는 <pre>는 빼고, <code> 태그만 사용하면 된다.

그런데 CSS를 수정하지 않으면 이렇게 가독성이 썩 좋지는 않다.

그냥 폰트만 약간 다를 뿐이다.

p code,
li code{
  padding:.2em .4em;
  font-size: 85%;
  font-family:Consolas;
  background-color:#f0f1f2;
  border-radius:6px
}

이 코드도 추가하자.

나는 이 위치에 추가했다.

이 글을 작성한 지 11일이 지난 시점에 추가하는 내용이기 때문에 이 단계에서는 아직 없는 다른 코드들이 보일 텐데, 눈치껏 .post-body h3{ } 아래에 추가하도록 하자.

훨씬 보기에 편해졌다.

코드와 일반 텍스트의 경계가 확실해졌다.

참고로 <pre>와 <code> 태그를 이용해서 코드 블록을 만들 때,

코드가 들어갈 자리에 HTML 코드를 넣을 때에는 당연히 꺽쇠 <>를 태그로 인식하지 않는 특수문자로 변경을 해서 넣어줘야 한다.

참 귀찮은 일이 아닐 수 없다. 🙄

그나마 다행인 것은 그걸 대신 해주는 사이트가 있다는 점이다.

다음 포스트에서는 그 사이트를 소개해볼까 한다.

다음 포스트

HTML 코드의 특수 문자를 엔티티 문자로 변환하는 사이트, TRICKS OF IT

발 블로그에 HTML, CSS, 자바스크립트 소스 코드를 그대로 올리고 싶다면 엔티티 문자 변환이 필수입니다. 코드를 간편하게 변환하고 복사하여 블로그에 붙여 넣는 방법을 배워보세요.

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

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