func(sikk)

티스토리에서 제공하고 있는 서체를 변경하고 싶은 마음이 들어서 폰트부터 찾아봤습니다.

나름 바꿔본게 본고딕이었네요😂

티스토리 편집할 때도 프리뷰를 옆에 두고 실시간으로 볼 수 있었으면 좋겠습니다 🥲 좀 많이 불편하네요

저는 ppt 작업하면서 깔끔한 고딕체 느낌을 좋아하는데, ko pub 돋움체였나? 그걸 가장 좋아합니다ㅎㅎ

아쉽게도 웹폰트로 사용하는 건 없더라고요..

그래서 눈누에서 맘에 드는 폰트들을 폭풍 서치해봤습니다.

저는 그중에서도 둘기마요고딕을 선택했어요!

폰트 검색

https://noonnu.cc/

저는 눈누에서 마음에 드는 폰트를 골라봤는데요.

이런식으로 굉장히 다양한 폰트들이 존재합니다.

한가지 잘 살펴보셔야 하는 것은

이런식으로 웹폰트 사용에 내용이 있어야 합니다.

티스토리 스킨 편집하기

https://[내 블로그 이름].tistory.com/manage/design/skin/edit#/source/

본인 블로그 주소에 맞게 이동해볼까요? 클릭을 통해 이동하고 싶다면,

https://0secusik0.tistory.com/69#:~:text=%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC%20%EC%8A%A4%ED%82%A8%20%ED%8E%B8%EC%A7%91%EC%9C%BC%EB%A1%9C%20%EC%A7%81%EC%A0%91%20%EC%A0%81%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0

제가 업로드 했던 게시글 참고해주시면 되겠습니다.

css 탭에서 원하는 폰트에 대해서 눈누에서 복사한 코드를 넣어 주시면 됩니다.

아! 여기서 끝은 아니고, 서체는 font-family로 설정하게 되는데 기존에 작성되어 있던 부분들을 변경해주는 작업이 필요합니다.

@font-face 하위에 보이는 font-family: [폰트 이름] 에서 폰트 이름을 복사해주세요.

Ctrl+F를 통해 서치 창을 확인할 수 있는데 font-family를 검색해줍니다.

이런식으로 찾을 수 있어요

여기서 제가 넣고자 하는 폰트 이름인 Dovemayo_gothic을 넣어줬습니다.

에러 사항

font-family를 모두 바꿔주었는데 볼드 처리한 글꼴만 바뀌었습니다.

기존에 이렇게 평문으로 작성한 것에 대해서는 글꼴이 바뀌지 않았고,
개발자 도구를 열어서 확인해보니 글이 작성된 것이 span 태그 안에 있었습니다.
<span style="font-family: 'Noto Sans', 'Noto Sans KR';> 글 내용 </span>

element style이 적용되어 있어서 제가 넣은 css가 동작하지 않았습니다.

관련하여 구글링을 해보았는데요.

element.style이란?

• 읽기 전용으로 인라인으로 정의된 스타일 속성
• 읽기 전용이므로 CSSStyleDeclaration을 정의할 수 없다.
• CSSStyleDeclaration.cssText를 통해 덮어쓸 수 있다.

<span style="font-family: 'Noto Sans', 'Noto Sans KR';> 글 내용 </span>

앞서 말씀드린 인라인 스타일에 대해 말하는 것 같았습니다.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style

사전에 미리 적용되어 있는 인라인 스타일이라 어떻게 제거해야 할 지 고민이 되었습니다.

찾아보니 !important 속성을 추가하거나 javascript를 이용하여 수정 및 제거를 할 수 있더라고요!

important을 남발하면 안되긴하지만.. 간단하게 해결하기 위해서 important를 사용하였습니다.

참고로 javascript로는

document.querySelector('#선택자').removeAttribute('style');

이런식으로 쓸 수 있다고 합니다.

텍스트에 입혀지는 태그들에 전부다 넣어줬어요

근데 important 한번 들어가고 나서 저 css 들을 지워봤는데도 잘되네요 영구적인걸까요?

뭔가 제 생각에 제가 한 것처럼 p, span, h1, h2, ... 이부분이랑 #text가 필요치 않은 것 같긴해요

body, input, textarea 부분에만 잘넣어줘도 되지 않을까.. 싶네요

아! 그리고 important를 넣어주니 기존에 span 태그 안에 작성되던 글들이 모두 p태그 안에 작성되고 있었습니다.

신기한 일이 생겼네요. 이유는 왜그런지 아직 모르겠어요. 아시는 분 있으면 댓글 남겨주세요 :)

결과물

최종적으로는 이렇게 원하는 형태로 모든 글꼴이 변경되었습니다!

참고로 폰트 색이나 크기는 스킨 편집 창의 CSS 탭에서 font-size, color 이런 속성들을 검색해서 원하는 크기나 색상으로 조정하시면 됩니다 !

오랜만에 블로그를 작성하려고 하니 마음에 들지 않는 테마들 때문에 글쓰고 싶은 마음도 사라지는...

직접 블로그 사이트를 만들기 전에 기존 티스토리 테마를 조금씩 바꿔보려고 합니다.

가장 먼저 해본 것은 코드 블럭!

기존 코드 블럭에 대해서 syntax highlight 테마중 default로 사용하고 있어서 굉장히 마음에 안들었어요..

저는 파스텔톤이나 무채색을 좋아하거든요ㅎㅎ..

제가 하고 싶었던 것 다음과 같아요

1. 코드 블럭 색상 테마 변경하기
2. 라인 번호 추가
3. 코드 블럭 접기
4. 줄바꿈에 대한 제어
5. 코드 복사 버튼

마침 관련해서 구글링해보았는데, 아래의 분께서 정리를 잘해주셨더라고요! 저도 따라하면서 조금 더 커스터마이징 해보았습니다.

https://jinyh.tistory.com/10

조금 더 해보고 싶은 것이 있다면 code 실행에 대한 result 보이게 하는 것이에요.

codepen에서는 embed 링크로 제공하고 있지만, mdn docs에서 보이는 것처럼 직접 만들어보고 싶다는 생각이 들었습니다!

그리고 요즘 옵시디언으로 문서들을 정리하다보니 마크다운에 html 요소들을 나름 많이 넣을 수 있어서 기본 문법 외에도 많은 것들을 활용할 수 있더라고요. 그런 것들을 버튼으로 조금더 스타일링할 수 있는 마크다운 에디터+프리뷰어를 제작하고 싶다는 생각을 하고 있습니다.

아직은 실력이 부족해서 어렵겠지만 조만간 꼭 도전할 예정입니다!

어쨌든 저도 성공했으니까 차근히 따라오시면 쉽게 넣으실 수 있을거에요 :)

티스토리 내 테마 사용하기

우선 티스토리에서는 8가지의 코드 블럭 테마를 제공하고 있습니다.

https://[내 블로그 이름].tistory.com/manage/plugins

본인 블로그 주소에 맞게 이동해볼까요? 클릭을 통해 이동하고 싶다면,

[톱니바퀴 모양 (블로그 관리 홈으로 이동해요)] - [왼쪽 사이드 바의 플러그인 클릭]으로 이동할 수 있어요!

아래로 조금 내려보면 코드 문법 강조라는 플러그인이 있는데요.

여기서 테마를 선택할 수 있어요. 하지만 미리보기 기능이 없어서 하나씩 적용해봐야 하는 ..

제가 한번 정리를 해봤는데요. 저는 사실 이중에서 마음에 드는게 없었어요.

왜냐하면 저는 우선 블로그 전체가 흰 배경인데 코드 블럭까지 흰바탕이면 구분이 잘가지 않고 눈이 아파서 다크모드였으면 좋겠고 너무 쨍한 색은 싫었거든요!

highlight.js를 이용한 테마 변경

highlight.js 에서는 굉장히 다양한 테마를 제공하고 있는데요.

링크의 데모 페이지에서 언어와 테마를 선택하여 프리뷰를 확인해볼 수 있습니다.

여기서 마음에 드는 테마를 고르면 될 것 같아요.

그런데 유의할 점은 highlight.js를 사용하기 위해서는 티스토리에서 제공하고 있는 코드 문법 강조 플러그인은 해제해주셔야 합니다.

https://highlightjs.org/demo

저는 마음에 드는게 꽤나 있어서 뭘 골라야 하나 고민이 됐네요.

저는 여러 언어에 대해서 테스트 해보고 고르게 되었는데,

python, css, javascript, markdown, c, json 정도 확인해보고 골랐어요.

(보다보니 전부다 봐버린..)

제가 고른건 접은 글 안에 있어요!

저는 이중에서 nord를 선택하였습니다.

고르셨다면 아래의 링크에서 cdnjs를 복사해주세요!

(하이라이트 링크를 복사했더니 링크 보양이 이상하게 보이는데 정상 링크입니다.)

https://highlightjs.org/#usage:~:text=our%20README.-,As%20HTML%20Tags,-cdnjs

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>

<!-- and it's easy to individually load additional languages -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js"></script>

<script>hljs.highlightAll();</script>

이걸 가져오시면 되는데요! 

제가 넣어보니 가장 마지막 script 태그가 안먹는건지 테마가 안씌워지더라고요.

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/nord.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>

  <!-- and it's easy to individually load additional languages -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>

그래서 저는 이렇게 넣어줬습니다.

넣는 방법 알려드릴게요.

티스토리 스킨 편집으로 직접 적용해보기

블로그 관리 홈에서 스킨 편집 탭을 클릭해주세요

오른쪽 화면에서 html 편집이라는 버튼을 찾을 수 있습니다. 클릭해주세요

이런식으로 HTML 파일이 보이실텐데요.

가장 상위의 <html> 태그 아래에 <head> 태그가 있습니다.

<head> ~~~ 다른 태그들 </head> 형태로 구성이 될텐데, head 태그 안에

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/nord.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>

  <!-- and it's easy to individually load additional languages -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>

아까 복사하였던 cdnjs를 넣어주세요!

참고로 첫 줄의 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"> 
이 부분의 default 자리에 마음에 드는 테마의 이름을 넣어주시면 됩니다. 
테마에 - 로 단어가 연결되어 있다면 그대로 stackoverflow-dark.min.css 이런식으로 넣어주시면 돼요.
저는 nord 테마를 선택했기 때문에 nord라고 작성하였습니다.

그런데 한가지 이슈가 있었어요. 다른 테마들은 잘 적용되었는데 base16-[이름] 형태인 테마는 적용이 안되더라고요.. 이유는 아직 못찾았습니다. 아시는 분 계시면 답글 남겨주세요!

어쨌든 이렇게 코드 넣어주시고 적용을 누르시면 됩니다.

이렇게 원하는 테마를 적용할 수 있습니다 :)