티스토리 장문의 글 작성 후 제목 색 한번에 바꾸기

장문주의

본 글은 방법을 알려드리기 보다는 CSS에 이제 막 입문한 필자가 문제를 해결해나가는 과정을 기록한 내용입니다.

방법이 궁금하신 분들께는 결론을 먼저 말씀드립니다.

더 좋은 방법이 있는지 더 찾아보겠습니다.

 

1. 글쓰기 편집 모드를 HTML 모드로 바꾸어 내가 바꾸고자 하는 곳의 태그를 찾아 일괄적으로 수정하기. (단 폰트 사이즈는 바뀌지 않음. 티스토리 CSS 설정을 우선함.)

2. 스킨편집에서 CSS 설정 자체를 바꿔버리기.

문제 상황

공부한 것을 나중에 찾아보기 위해서 티스토리 블로그를 만들어서 메모를 하고 있는데, 처음으로 장문의 글을 작성했다.

그런데 장문의 글을 작성하는데 시간이 오래 걸리고, 다른 사람에게 보여주기 위해 작성한 글은 아니지만

제목1, 제목2 등 제목 크기의 변화가 티스토리에서 기본으로 제공하는 기능에서 차이가 크지 않아 눈으로 보았을 때 가독성이 떨어져 보였다.

위 사진에서 문제 상황은 제목1이고, 아래는 제목2다. 큰 차이가 안 느껴진다. 자세히 보면 보이지만 글이 길어 한 눈에 들어오지 않는다.

 

문제상황이라는 제목1의 폰트 사이즈를 더 키우거나 색상을 다른 것으로 바꾸면 가독성이 조금 더 나아질 것 같다.

문제 해결

일단 신경쓰지 말고 글 이어서 쓰기

일단 글을 전부 작성한다. 그런데 여기서 팁은 티스토리에서 기본으로 제공하는 단축키를 활용하면 제목1, 제목2, 본문1, 본문2 등으로의 전환이 빠르다.

일단은 글을 작성하고 한 단락을 다 작성했다면 변화를 주고 싶은 곳을 블럭 지정하고 ctrl + alt + 1을 누르면 제목1, 제목2가 바뀌고, 2를 누르면 본문이 변경된다.

헷갈린다면 ctrl + / 를 눌러보면 티스토리 단축키 도움말이 나온다.

여러번 연타하다보면 가끔 단축키가 안 먹힐 때가 있다. 이럴 땐 어쩔 수 없이 마우스로 바꿔줘야 하는 것 같다.

HTML 편집모드에서 한 번에 속성 수정하기

글을 전부 작성하고 글쓰기 에디터 상단 부분에 기본모드라고 되어 있는 것을 HTML로 바꾼다.

그러면 이런 화면이 나온다. 내가 쓴 글이 HTML로 어떻게 작성되었는지 보여주는 화면이다.

여기서 <style>이라는 태그로 한 번에 바꿔보려 위처럼 시도했는데, HTML 편집 기능만 제공하는 듯하다. 이 방법은 안 된다.

 

내가 작성한 것들 중 내가 서식을 바꾸고 싶은 것을 찾는다.

필자는 서론이라고 쓰인 저 크기의 제목들(기본에디터에서는 제목1)의 크기를 더 키우고, 색상을 바꾸고 싶다.

찾아보니 서론이라는 글자 앞에 size26이라는 속성값이 보인다. HTML을 전혀 모르는 사람이더라도 이것이 폰트 크기를 의미한다는 것을 눈치챘을 것이다.

그리고 h2가 html 에서는 heading이라는 의미고, 2번째로 큰 제목이라는 의미인데 그렇다면 본인이 쓴 글 중 기본 에디터에서 제목1로 쓴 글자는 전부 h2가 적용되어 있는 것이다.

 

저 부분을 전부 복사해서 ctrl + f로 찾아보니 필자는 본문에서 h2 제목을 4번을 사용했다.

저 긴 글에서 h2를 일일이 찾을 필요는 없고, 어차피 무조건 저 태그와 속성값이니 <>로 묶여 있는 저 부분을 통째로 복사해서 찾으면 빠르다.

 

필자는 폰트 크기를 40 정도로 키우고 글자색을 #E63946이라는 색상으로 바꾸고 싶다.

참고로 글자색은 red, white처럼 미리 단어로 입력된 색들도 있고 #000000와 같은 형태인 hex코드도 있고, rgb, rgba 방식도 있고 전부 다 여기에 적용이 된다. 그러나 제일 간단한 것은 hex코드이므로, 더 많은 색을 찾고 싶다면

구글에 헥스코드 추천 사이트를 검색해서 마음에 드는 색상을 골라보면 좋다.

 

따라서 필자는 <h2 data-ke-size="size26">를 이렇게 바꾸었다.

<h2 data-ke-size="size40" style="color: #e63946;" >

그 다음 이것을 복사해서 저 네 군데를 모두 바꿔주었다. 원래는 <h2 style="color: #e63946;" data-ke-size="size40"> 처럼

style 속성이 먼저 오도록 작성하지만, 어차피 위처럼 편하게 뒤에 작성해도 수정완료를 누르면 알아서 바뀐다.

 

그런데, 문제가 생겼다.

 

 

글을 확인해보니, 색상은 제대로 바뀌었는데 폰트 사이즈가 그대로다.

그래서 다시 HTML 편집기를 들어가보니 분명히 속성값은 바뀐 상태로 있다.

다시 기본에디터로 넘어와서 확인해보니 티스토리에서는 폰트 사이즈를 임의로 변경할 수 없는 것 같다

 

티스토리 설정 - 스킨편집 - CSS 편집기에서 일괄적으로 바꿀 수 있는 것 같다.

만약 본인이 무조건 h2 태그(제목1)은 폰트사이즈와 색상을 고정할 것이라면 필자와 같이 수정하면 된다.

 

ctrl + f 눌러 아래를 검색한다.

#article-view h2[data-ke-size]

 

 

그리고 폰트 사이즈를 내가 원하는 수치로 변경하고, 컬러까지 변경할 거라면

color : #000000; 과 같이 아랫줄에 추가하면 된다.

 

참고로 폰트 사이즈가 em으로 되어 있는데 px에 익숙할 것이다. em은 모바일 등 다양한 기기에서도 적용 가능한 상대적인 폰트 사이즈의 단위이다. px로 바꿔도 상관없으나, 모바일 기기 등에서 내가 원하는 대로 안 나올 수 있으니 단위는 건드리지 말고 앞의 숫자만 0.00 형태로 바꿔준다.

그런데 em 단위가 감이 오지 않을테니 아래의 사이트를 이용하면 편리하다.

https://www.toolo.kr/pxtoem/

PX / EM 변환하기

 

이렇게 바꾸고 나면 글쓰기 에디터에서는 원래대로 보이지만, 글 작성을 완료하고 나면 내가 설정한 대로 화면에 보인다.