[정보] 티스토리 모바일웹 본문 꾸미기 4탄 | 블로그 정보 꾸미기

1. 티스토리 모바일웹 본문 꾸미기 - 블로그 정보 꾸미기

 

우리는 이번에 티스토리 모바일웹 본문에서 블로그 정보를 꾸며줄 것이다. 앞서 말했듯 폰트 바꾸기만 알려드릴테니 다양한 활용할 생각은 여러분들이 생각해보시기를 바란다. 본문의 블로그 정보는 글을 다 읽고 난 하단 부분에 존재한다.

 

블로그 정보

 

일단 예시로 보여주는 부분은 내 티스토리의 블로그 정보이다. 보면 알겠지만 UNIVERSE 글씨 같은 경우, 흔히 인스타그램 영문 폰트로 검색하면 나오는 폰트를 사용하였다. 영문이 아닐 경우에도 폰트를 수정할 수 있으니, 이 점은 참고하시길 바란다.

 

2. 블로그 정보 꾸미기

 

먼저 우리는 블로그 정보를 어디서 바꿀 수 있는지 알아보도록 하자.

 

블로그 관리 > 관리 > 블로그 클릭하면 아래에서 수정이 가능하다. 참고로 우리가 사용할 부분은 블로그 이름과 블로그 설명 부분에 효과를 주니, 해당 내용을 기입해두면 좀 더 좋다.

 

 

2.1 폰트를 바꿔보기

 

앞선 <style></style>에 대한 내용은 이제 언급하지 않으려고 한다. 1탄, 2탄, 3탄 등을 봐주시면 감사하겠다. 읽어보시다보면 이해가 되실 것이다. 앞으로는 코드만 입력하여 예시를 보여드리겠다.

 

2.1.1 폰트 불러오기

<style>
@font-face { font-family: 'NanumSquareNeo-Variable'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff2') format('woff2'); font-weight: normal; font-style: normal; }
</style>

 

2.1.2 블로그 정보 폰트 지정해주기

 

블로그 정보 폰트를 지정해줄 건데, tit_blog는 블로그 타이틀을 의미한다. 현재 나는 인스타그램의 특유의 영문 폰트로 폰트를 지정해도 변경되지 않지만, 일반적인 text로 했다면 폰트 적용이 가능하다.

 

desc_blog는 내가 소개글로 작성해놓은 설명글이다. 여기에도 line-height를 지정할 수 있는데 최대 1.7이 가장 적정한 것으로 보인다. 모바일로 봤을 때 2.2도 괜찮긴 했지만, 티스토리 앱에서 볼 때는 소개글이 아래가 잘리는 경우가 생겨서 1.7 정도로 하는 걸 추천한다.

 

<style>
@font-face { font-family: 'NanumSquareNeo-Variable'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff2') format('woff2'); font-weight: normal; font-style: normal; }
.tit_blog {font-family: 'NanumSquareNeo-Variable';}
.desc_blog {font-family: 'NanumSquareNeo-Variable';}
</style>

 

2.1.3 결과물 보기

 

앞서 말했듯 내 블로그명이 인스타그램 영문 폰트로 되어 있기 때문에 아무리 설정해주어도 변하지 않는다. 일반적으로 작성했다면 폰트가 바뀐 것을 확인할 수 있다.

 

2.2 블로그 정보 배경색 바꾸기

 

가장 기본적인 틀이다. 아래와 같이 설정만 해주면 된다. #facac9 같은 경우 여러분이 원하는 색상으로 입력만 한다면 변경이 가능하다.

 

<style>
.cont_blog_info {background-color:#facac9}
</style>

 

 

배경색 바꾸기

 

2.2.1 배경화면으로 바꿔보기

 

이걸 응용을 해보도록 하겠다. 일단 이 포스트에 이미지 하나를 올려보도록 하자.

 

나는 unsplash에 찾은 이미지 하나를 활용해서 background로 사용해보도록 하겠다. 업로드를 한 다음 아래에 이미지에 마우스를 올리고 오른쪽 버튼을 눌러서 이미지 주소 복사를 클릭하자.

 

 

그럼 주소가 추출되었을텐데, 그 주소를 활용해서 입력해주면 된다.

 

<style>
.cont_blog_info {background-image: url("이미지 경로")}
</style>

ex)
<style>
.cont_blog_info {background-image: url("https://blog.kakaocdn.net/dn/xO7VQ/btrT407tUTl/DcdMaMPuFAKxKSY77lkm0k/img.jpg")}
</style>

 

다만 어두운 화면으로 하면 기본 폰트 색상이 까만색에 가까워서 잘 보이지 않을 수 있으니 폰트 색상을 수정해주도록 하자. 폰트 색상을 수정하고 옆에 있는 이미지도 나름 변신을 해주었다.

 

<style>
@font-face { font-family: 'NanumSquareNeo-Variable'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff2') format('woff2'); font-weight: normal; font-style: normal; }
.cont_blog_info {background-image: url("https://blog.kakaocdn.net/dn/xO7VQ/btrT407tUTl/DcdMaMPuFAKxKSY77lkm0k/img.jpg"); box-radius=10px;}
.tit_blog {font-family: 'NanumSquareNeo-Variable';}
.desc_blog {font-family: 'NanumSquareNeo-Variable';}
.cont_blog_info a{color:white;}
.thumb_g img{ border: 1px #eee dotted; padding: 3%; margin: 3%;}
  .box_blog_info .thumb_g img{ border-radius: 100%; }
  </style>

 

 

사실 이렇게 꾸미고 나서 생각한 건데, 저걸 기왕이면 동그랗게 만들었으면 저 블로그 이미지에 달을 넣어두었으면 참 잘 어울렸을 거라는 생각이 문득 든다. 여러분들은 그렇게 생각하지 않은가? 되게 잘 어울릴 것 같다. 이렇게 하나 하나 시도해보면서 잘 어울리는 걸 찾아야 할 듯 하다.

 

 

 

※ 참고로 폰트 색상은 tit_blog와 desc_blog에 font-color나 color를 활용해서 사용할 수 없다. 굳이 사용하시는 분이 있나 싶어서 적지 않았지만, 위와 같은 폰트 색상 변경하는 방법에 알고 싶으신 분은 해당 게시글에 댓글을 달아주셔라. 기본적으로 html에 대한 답변은 안 해드리지만, 저 폰트 색상 변경하고 싶은 방법은 알려드리겠다. 다만 내가 알려드릴 방법은 블로그명과 설명글이 같은 색상인 방법이며 따로 설정하는 방법은 모른다.

 

‘서로 다른 색상으로 할 수 없나요?’ 같은 질문에는 답변드리지 않겠다.

 

 

티스토리 모바일웹 꾸미기와 관련한 글을 읽으시려면 여기를 클릭!