티스토리 뷰

코드

[html, css]티스토리 블로그 스킨 편집하기 _ font

Junu_franco_moon 2020. 3. 12. 18:15

블로그 스킨을 편집하다가 별생각없이 html을 조금 손봤다. 이렇게 복잡한 html, css에도 아는대로 적용하니까 바뀌는 걸 보고 신기했다. 

 

1) 제목 폰트 바꾸기

우선 f12로 제목 부분의 html 구조가 무엇인지 확인한다.

</span> </s_not_var_logoImage> <span class="sub_title_text"> Error.Record(reason as text, optional message as nullable text, optional detail as any) as record</span> </a> </h1>

편집기에서 확인해보니 이러한 구조로 이뤄졌다. 텍스트가 들어가는 span에는 title_text라는 css가 붙어있었다.

header > inner_header > title_text 이기에 css를 찾아봤다.

 

박스 안을 수정하면 글씨체가 바뀌지 않을까하고 구글에 span 폰트 수정이라고 검색해봤다. 

 

span 에서 font를 수정하려면 class로 css를 만들고 css에서 폰트를 지정하면된다.

 

font-family를 통해 적혀진 순서대로 폰트를 적용한다. 예를 들어 cursive를 적용할 수 없으면 나무고딕, 산세리프 순으로 적용한다.

font-size는 폰크 크기.

 

 

###<html>
<span class="hello">Hello, world!</span>

###<css>
.hello {
    font-family: 'Cursive', 'Nanum Gothic', sans-serif;
    font-size: 40pt;
}

 

 

어떤 글씨체를 쓸까 구글에 서체를 검색하다가 구글에서 무료로 제공하는 서체 사이트를 발견했다.

https://fonts.google.com/

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

여기서 한글을 선택하면 여러 서체가 나온다. 나는 그 중에 East Sea Dokdo를 선택했다. 새로 뜨는 화면에서 select를 누르면 아래에 창이 올라온다.

위의 import부분을 편집기의 css창의 맨 위에 붙여넣고 밑의 css를  inner_header. text_title 안에다 넣으면 글씨체가 완성된다. 

이왕 하는 김에 부제도 넣고 싶어서 새로 span 태그를 하나 쓰고 class = sub_text_title로 해서 css도 적어넣었다. 그래서 완성:

제목 글씨체가 너무 튀는 것 같지만 앞으로 하나씩 티스토리 블로그 html을 손봐가볼 생각이다. 재미땅!

 

그냥 하니까 된다. 그냥 하자.

저작자표시 비영리

'코드' 카테고리의 다른 글

HTML/CSS 티스토리 블로그 폰트설정  (0) 2020.04.04
알고리즘따위 1도 모르는 코딩초보자, TextRank에 TF-IDF적용 분투기  (0) 2019.11.04
[SCRAPY/PYTHON] scrapy 로 wiki 크롤링하다가 마주친 오류  (0) 2019.10.30
[PYTHON/SCRAPY] scrapy 크롤러 파싱 오류(dont_filter)  (0) 2019.10.29
[python, MySQL] from 파이썬 크롤러 to MySQL via pymysql  (0) 2019.10.17
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
글 보관함