본문 바로가기
  • AI 개발자가 될래요
블로그 꾸미기 (HTML, CSS)

[티스토리] Tistory 코드블럭 폰트 변경법 / CSS 고치기

by 꿀개 2023. 11. 10.

[티스토리] Tistory 코드블럭 폰트 변경법

 

안녕하세요 꿀개입니다.

이번엔 티스토리에서 코드블럭 부분에만 적용될 폰트를 변경하는 방법을 알아보겠습니다.

 

먼저, 모든 텍스트의 글씨체와 블로그 이름의 글씨체를 변경하는 방법은 아래 링크에 나와있습니다.

https://hsyaloe.tistory.com/93

 

[티스토리] 아주 쉽게 Tistory 폰트 변경, 글씨체 변경하는 법 / "웹폰트로 사용" 쓰는법

[티스토리] 아주 쉽게 Tistory 폰트 변경, 글씨체 변경법 / "웹폰트로 사용" 쓰는법 안녕하세요 꿀개입니다. 오늘은 티스토리 웹페이지의 폰트를 변경하는 방법을 알아보겠습니다. CSS에 대한 지식

hsyaloe.tistory.com

 

1. 원하시는 폰트를 골라서 CSS 코드를 가져옵니다.

 

이에 대한 자세한 방법은 위 링크의 1~2 번에 나와있습니다.

 

2. CSS 코드에 [code] 태그 수정

 

이제 [블로그 관리 > 스킨 편집 > html 편집 > CSS] 에 들어가셔서 아래 텍스트를 추가로 넣어주시면 됩니다.

 

code{
	font-family: 'intelone-mono-font-family-regular';
}

 

이것이 무엇을 의미하냐면, code 태그를 가진 친구들은 'intelone-mono-font-family-regular' 폰트를 사용해라. 라는 뜻입니다.

'intelone-mono-font-family-regular' 폰트는 코딩 폰트로 주로 사용되어서 가져왔습니다.

이 폰트를 원하시면 아래 링크에서 '웹폰트로 사용' 부분을 복사해 CSS에 붙여넣으시면 됩니다.

( https://hsyaloe.tistory.com/93  에 해당 과정에 대해 설명이 있습니다.)

 

code

 

최종적으로 위와 비슷하게 넣으시면 됩니다. 위치는 상관 없습니다.

 

결과 비교

 

Before

코드블럭 폰트 바꾸기 전

 

After

코드블럭 폰트 변경 후

 

훨~씬 예뻐졌습니다 ㅎㅎ

 

참고로 위의 코드는 아래 문제 푸는 코드입니다..ㅎㅎ

https://hsyaloe.tistory.com/85

 

[Python/코테공부] 코드 처리하기

[Python] 코드 처리하기 내 풀이 사실 푸는데 애 좀 먹었다. 문제 이해를 잘못해서.. 전체 문자열의 인덱스에 대해 홀짝을 계산했어야 하는데 split된 문자열에 대해 계산해서 오류가 나왔다. 그래서

hsyaloe.tistory.com

 

이 방법은 꼭 코드블럭에만 적용할 수 있는게 아니라 다른 태그에도 적용 가능합니다.

태그를 변경해서 응용해보시는 것도 블로그를 예쁘게 꾸미고 개발 경험을 기르는 좋은 경험이 되겠네요!

 

감사합니다.