티스토리 개발 블로그 세팅

티스토리 커스텀 경험

블로그 사용 목적에 맞게 다양한 스킨을 사용했다. 꾸미는 걸 좋아해서기도 하다.

커스텀하면서 배운 노하우를 적어보려 한다. 모두 개발 블로그로 사용했고, 코드 + 수식 + 글이 주를 이룬다.

티스토리 커스텀 방법

HTML/ CSS 수정

티스토리는 HTML/ CSS 레벨에서 직접 수정한다. html 편집을 누르면 코드가 나온다.

블로그 관리 > 스킨 편집 > html 편집

기본적인 HTML/ CSS를 알고 있어야 한다. 모른다면 힘들 수 있다. 간단히 소개하면, HTML은 뼈대고 CSS는 장식이다. 구조는 HTML이 결정하고, 디자인은 CSS로 다듬는다.

개발자 도구

HTML/ CSS를 보기 위해 개발자 도구를 사용한다. 브라우저에서 F12를 누르면 페이지를 구성하는 코드가 나온다.

특정 부분을 찾고 싶다면 좌측 상단 커서 모양 버튼을 누른다. 그리고 원하는 부분을 클릭하면 자동으로 코드를 찾아준다. 우측 CSS를 수정하면 반영된 결과를 바로 볼 수 있다. 개발자 도구를 이용해 어디를 어떻게 바꿀지 분석하고 테스트한다.

기술 블로그 만들기

기술 블로그에 맞게 기능을 추가한다. 이 글에 작성한 복붙 위치는 초보자를 위한 가이드이다. 프런트 지식이 있다면 눈치껏 알아서 복붙하면 된다.

코드 하이라이팅

코드 블록은 highlight.js로 테마를 입힌다. highlight.js는 코드 블록을 감성 있게 꾸며준다.

<head>
    <!--
        원래 있는 HTML 코드 위치
    -->
    <!-- '테마' 대신 원하는 테마 이름 넣기 -->
    <link rel="stylesheet"
        href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/테마.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
</head>

HTML로 들어가 </head> 태그를 찾는다. </head> 앞에 코드를 붙여넣기한다. 그리고 뒤에 원하는 테마를 작성해 준다. 테마는 여기서 찾을 수 있다. 테마 이름은 소문자와 대시(-) 그대로 적는다.

pre code.hljs {
  tab-size: 4;
}

Tab 크기를 조정하고 싶다면 CSS에 코드를 붙여 넣으면 된다. Python처럼 Tab에 민감한 언어는 설정이 필요하다.

더 쉬운 방법으로 "블로그관리 > 플러그인 > 코드 문법 강조"를 사용할 수 있다. 대신 선택 가능한 테마가 몇 개 없다.

수식 삽입

수식은 Mathjax를 이용한다. Mathjax는 LaTeX 문법으로 수식을 작성한 뒤 $로 감싼다. 예를 들어 $x_i^3$를 작성하면 $x_i^3$로 나온다.

<body>
    <script type="text/x-mathjax-config">
        MathJax.Hub.Config({
          tex2jax: {
            inlineMath: [ ['$','$'], ["\\(","\\)"] ],
            processEscapes: true
          }
        });
    </script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML'></script>
    <!--
        원래 있는 HTML 코드 위치
    -->
</body>

이번에는 <body>를 찾아 뒤에 코드를 붙여준다. 그럼 끝이다. 수식을 편집하고 싶다면 LaTeX 편집기를 사용하면 된다.

한번씩 수식으로 변환이 안 될 때가 있다. 그럼 티스토리 편집기에서 '기본모드' 대신 'HTML'로 들어간다. 만약 작성한 수식이 $x_i$인데 $<span>x_i</span>$처럼 이상한 태그가 붙어 있다면 삭제한다. 그럼 정상 작동한다.

형광펜 효과

::selection을 이용해 형광펜 효과를 낸다. 마우스로 드래그하며 읽는 사람이 꽤 있다.

초기 설정은 파란 배경에 흰색 글씨다. 이 부분을 원하는 색으로 변환해보자.

::selection {
  background-color: 색상;
}

/* 예시 */
::selection {
  background-color: #e9604835;
}

색에 투명도를 주면 은은한 느낌을 낸다. 모르겠으면 아래 예시를 복사해서 쓰자. 직접 드래그해서 색상을 확인할 수 있다.

색상: #E9604833

색상: #FFC70133

색상: #0051B333

인라인 블록

사용하지 않는 태그로 인라인 블록을 흉내 낸다. 필자의 경우 밑줄은 사용하지 않는다. 그래서 밑줄로 편집하면 인라인 블록처럼 보이도록 했다. 밑줄은 <u> 태그로 감싸진다. 따라서 본문 <u> 태그를 인라인 블록처럼 보이게 수정하면 된다.

p u,
ul li u {
    padding: .2em .4em;
    text-decoration: none;
    border-radius: 6px;
    color: #030303;
    background-color: #3a49541f;
    font-size: 85%;
}

이 스킬을 응용하면 사용하지 않는 태그를 내 마음대로 수정할 수 있다. 일종의 눈속임이다.

티스토리 커스텀 팁

범위는 상세하게

CSS-Selector를 작성할 때 가능한 자세히 작성한다. 표를 수정하기 위해 <table>을 수정하면 코드 블록까지 깨지게 된다. 따라서 수정할 범위를 자세하게 선택해야 한다. 이때 본문 태그를 파악하면 좋다. 경험상 본문 내 요소를 수정하는 경우가 많다. 따라서 습관적으로 본문 태그를 포함시켜 범위를 줄일 수 있다.

u                  // 범위가 너무 넓음
p u                // 본문 밖 요소들이 깨질 수 있음
.post-content p u  // 본문 내 밑줄만 편집

본문 태그는 스킨마다 다르다. 개발자 도구를 이용해 찾아야 한다. 본문 내 여러 요소를 살펴보고 공통적으로 포함되는 class를 찾으면 된다.

깨지는 서식 복구

의도치 않게 깨지는 경우 initial로 원상 복구한다. initial은 초기값을 뜻한다. 예를 들어, table에 margin을 추가했는데 코드블록이 깨졌다고 하자. 그럼 코드 블록 margin을 다시 initial로 세팅해 주면 된다. Ctrl+Z(되돌리기) 느낌이다.

.contents_style table {
  margin: 16px; // 추가한 스타일
}

.contents_style table.hljs-ln {
  margin: initial; // 깨진 스타일 되돌리기
}

스타일은 미니멀하게

심플하고 쉽게 만드는 것이 중요하다. 스킨이 화려해지면 글에 집중할 수 없다. 따라서 최소한의 요소만 남기고 지우는 걸 선호한다. 여백이 많다는 건 그만큼 방해되는 요소가 없다는 뜻이다. 과감하게 지우자. 필요 없는 걸 걷어내야 중요한 게 보인다. ~~진짜 지우진 말고 주석처리하자.~~

색은 다양할 필요 없다. 글자 크기도 마찬가지다. 많으면 오히려 정신없다. 스타일도 다양할 필요 없다. 티스토리는 가로선(hr) 8종류를 지원한다. 필자는 한 종류로 보이도록 변경했다. 인용구는 4가지 스타일을 지원한다. 필자는 커스텀을 통해 두 종류만 사용하도록 변경했다. 외부 인용과 필자 의견 작성, 이렇게 두 종류가 필요하기 때문이다. 필요한 게 뭔지 고민하고, 필요한 부분에 집중하자.

content.css는 덮어쓰기

'content.css'에 작성된 코드는 덮어써야 한다. 개발자 도구로 봤을 때 있는데, 티스토리 편집기에 안 보이는 CSS 코드가 있다. 이런 스타일은 content.css에 작성된 경우다. 우리가 편집하는 파일은 style.css다.

당황하지 말고 style.css에 새로 작성하면 된다. 그럼 스타일이 덮어쓰기 된다.

마무리하며

개발 블로그를 만들기 위해 필요한 스킬을 알아봤다. 위에서 소개한 요소만 잘 적용해도 부족함 없는 블로깅을 할 수 있다고 생각한다. 가장 좋은 건 남이 만든 거 그대로 쓰는 방법이다.hELLO'나 '#1'처럼 잘 만든 스킨을 적용하고, 수식이나 형광펜 정도 추가해서 사용하면 편하다. 튜닝의 끝은 순정이다. 이 스킨 저 스킨 다 입혀본 사람으로서 맞는 말이라고 생각한다. 너무 복잡하게 만들지 말고, 심플하고 단순하게 쓰는 게 좋다.

+ 2024.03.30. 위 조건을 모두 만족하는 캥거루 스킨을 무료로 배포합니다.

https://dev-roo.tistory.com/entry/about

저작자표시 비영리