가끔일기

다시 티스토리 / 블로그 스킨 변경 / 마루부리 폰트로 마무리.

2022. 11. 8.
SMALL

예전에 HTML 태그에 관심이 많았었다. 20년도 더 지난 일이다. 지금 아는 태그 가지고는 뭘 할 수가 없다. 테터툴즈도 나는.. 안다. 되돌아보니, 나 굉장히 늙은 것 같다.

 

이미 10여년 전에도, 나의 멈춰버린 HTML 태그 지식 몇 개 가지고는 뭔가를 만들기엔 택도 없었다. 그 때 쯤,

나는 네이버 블로그가 굉장히 마음에 들었다. 네이버 블로그로 이동했다. 하지만, 주기적으로 티스토리로 돌아오게 되었다. 이유는 나도 모른다.

 

망할, kakao 서버 오류 때문에 tistory 자료들이 엉망이 되었다는 후기들을 어제 발견했다.

그래도 다시 돌아왔다. 새로운 스킨을 입히고, 내가 좋아라 하는 폰트와 사이즈로 대충 바꾸었다.

이마저도 곧 잊어버릴 것 같다. 방법을....

 

 

 

 

 

블로그 스킨 변경하는 방법

티스토리 스킨을 변경하는 방법은 굉장히 단순하다.

자기가 직접 만들어서 변경하는 법 or 남이 만들어 놓은 것을 다운받아 입히는 법.

 

자기가 직접 만드는 것은 굉장히 어렵다. 그러니 다운을 받자.

위 사이트에 들어가면, 티스토리 스킨들이 많이 있다.

 

 

 

 

 

파일을 다운 받은 후에, 블로그 관리 메뉴에서 스킨 변경 > 스킨 등록 으로 들어간다.

스킨을 등록할 때에, images 폴더 안에 있는 파일도 함께 등록을 해야 한다. images 폴더를 클릭해 안에 있는 것들을 드래그 해서 추가하면 알아서 경로 설정이 되어 파일 추가가 된다.

파일 추가를 한 후에 저장을 하고 나서, 스킨 변경 > 스킨 보관함 에 있는 방금 등록한 스킨을 찾아 적용하기를 하면, 스킨 적용은 끝이다.

그러고 나서, 디테일한 설정들은 알아서 인터넷 태그 찾아 해석하면서 수정한다.

요즘은 인터넷에 검색하면 어지간한 것은 잘 나와 있어서, 공부하기도 편할 것 같다.

 

 

 

 

 

마루부리 웹폰트 적용하는 방법

나는 개인적으로 마루부리 폰트를 좋아하는데, 이 폰트는 무료로 사용할 수 있는 글씨체이다.

눈누 라는 사이트에서 폰트를 쉽게 적용할 수 있도록, 제공하고 있다.

@font-face {
    font-family: 'MaruBuri-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/MaruBuri-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

마루부리 폰트 자체를 다운받아 티스토리에 업로드할 필요는 없다.

위의 @font-face 를 티스토리 스킨 css 에 추가해서 입히면 된다.

 

 

 

 

 

@font-face 를 티스토리 스킨 css 에 입히는 방법은 위와 같다.

css 에 @font-face 이하를 적어주기만 하면 된다.

이제 CSS 에 마루부리 폰트를 입력했으니, 티스토리 스킨에서 마루부리 폰트를 불러들일 수 있게 되었다.

그런데 내가 다운받은 이 스킨은 티스토리 스킨 관리에서 보여주는 CSS 에 많은 정보가 담겨 있지 않았다.

css 에서 본문과 메뉴 등에 마루부리 폰트를 쓰라고 명령을 해야 한다. 어디서???

 

원리는 단순한데, 모르는 사람은 이걸 찾아야하는 건지도 모르고, 못 찾은 줄 알고 포기할 수도 있겠다.

 

 

 

 

 

CSS = cascading style sheets

웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트

그렇다면, 업로드한 스킨 파일 목록을 확인해서 css 파일을 찾아본다.

 

 

 

 

 

업로드했었던 스킨 파일을 찾아 보았다. 보통 style.css 에 이러한 스타일이 들어 있어야 하는데, 이 스킨은 달랐다.

여기에 있는 style.css 는 위에 마루부리 @font-face 를 입혔던 파일이다.

그럼 images 폴더 안을 확인해 본다. default.min.css 파일을 열어 보았다.

 

찾았다.

맞다. 뭐든 열어 보면 된다. 메모장으로..

 

 

 

 

 

머리 아픈 파일이었다. 기본적인 정렬이 되어 있지 않았다. -_-

그럼 Ctrl + F 로 단어 찾기를 해 본다. font-family 라고 검색해 본다.

검색해보니 font-family 가 여러개 검색이 되었다.

그럼 하나하나 수정을 해 준다.

 

 

 

 

 

font-family : 뒤에 티스토리 스킨 관리에서 추가로 적어 두었던 @font-face 중에 font-family명인 MaruBuri-Regular 을 연속해서 적어 준다.

font-family 에 마루부리도 포함시켜 준다는 정도로 해석하면 될 것 같다. 그러니 MaruBuri-Regular, 라고 쉼표를 꼭 적어주자. 그 뒤에 있는 폰트들도 포함할 수 있도록, 지우지 말자.

font-family 를 계속 검색하면서, 원하는 폰트를 제일 앞에 추가해 준다.

 

이 때, font-family : inherit; 라고 뒤에 inherit 라는 문구가 적혀있다면, 수정없이 그냥 패스해도 된다. 나머지에만 해주자.

그러고 나서, 결과 화면을 새로고침하면서 확인해 보면 된다. PC로 작업하면서 모바일에서 확인하면 편하다.

 

 

 

 

 


이제까지 끄적거렸던 블로그 기록을 살펴보니, 스킨을 변경할 때마다 기록을 남겨놨었더라.

그래서 이번에도 기록을 남겨놔 본다.

직전까지 쓰던 블로그 스킨을 캡쳐해 놨어야 하는데, 그걸 빼먹어서 아쉽다.

 

오늘 일기는 여기까지 끝.

 

 

 

 

 

LIST


공유하기