티스토리 반응형 스킨 #2 h태그(헤딩 태그) 폰트와 사이즈를 바꾸는 방법

이번 포스팅은 티스토리 반응형 스킨 #2에서 h태그의 폰트와 사이즈를 바꾸는 방법 되시겠다.

여기서 말하는 h태그는 글 에디터에서 선택할 수 있는 제목1, 제목2, 제목3 이 친구들이다.

티스토리 앱 에디터는 언제쯤 편해질까

 

기본적으로 티스토리 스킨 #2의 h태그는 다 똑같이 나온다.

뭘 선택하던 똑같다.

폰트 종류야 뭐, 기본적으로 각각 지정된 게 없으니 그렇다 치더라도 -

정말 따로 따로 제목을 적용한 화면이다.

최소한 제목끼리 사이즈는 달라야하는 거 아님 ...?

두께까지는 바라지도 않아요. 사이즈는 달라야지, 사이즈는.

하, 역시 티스토리.

그리고 다른 의미로 역시 티스토리이기도 하다.

css를 건들여서 h태그의 폰트와 사이즈를 뭉뚱그려서 하나의 스타일로 바꿀 수도 있고 h2, h3, h4 태그마다 폰트와 사이즈를 다 다르게 설정할 수도 있다.

사실 이 포스팅, 저번에 반응형 스킨 #2 폰트 변경 총 정리 포스팅을 할 때 같이 하려고 했었던 건데 깜박했 ㅎ ...

티스토리 반응형 스킨 #2 폰트 변경의 모든 것, PC와 모바일 전부 폰트 변경하는 법!

h태그를 바꾸는 건 어렵지 않다.

귀찮을 뿐이지 ...

스킨 편집 - html편집 -css탭으로 가자. 그 다음 .area_view h를 검색하면 두 군데 정도 나오는데, 그 중 처음 등장한 .area_view h쪽을 보자.

그러면.

.area_view h1,
.area_view h2,
.area_view h3,
.area_view h4 { line-height:30px; margin:52px auto 28px }  

이렇게 h1부터 h4까지의 코드를 볼 수 있다.

슬슬 css를 건들다보면 눈치를 깔 수 있다. 저 코드, h1부터 h4까지 콤마(,)로 한데 뭉뚱그려진게 문제라는 것을.

저걸 이제 콤마를 떼버리고 {}를 달고서

font-family (폰트 종류)
font-size (폰트 사이즈)
font-weight (폰트 두께)
color (색상)

이런 폰트 관련 속성을 추가로 집어넣으면 다양하게 커스터마이징을 할 수 있다.

테스트용으로 h태그의 코드를 건들여보았다.

아, 테스트 전에 일러둘 것이 있다.

h2가 제목1
h3가 제목2
h4가 제목3  

이렇게 대응하고 있더라. h1은 어디서 일하고 있는 친구인지 모르겠다. (사실 관심이 없음...)

그런 고로 h2, h3, h4에 테스트 용으로 적당히 이런 저런 값을 넣어보았다.

.area_view h1,
.area_view h2 { font-family:'Cafe24Ssurround';font-size: 50px; line-height:30px; margin:40px auto 30px;color:#CD3B3B}
.area_view h3 { font-family:'Bareun_hipi';font-size: 40px; line-height:30px; margin:40px auto 30px;color:#008299}
.area_view h4 { font-family: 'RIDIBatang'; font-size: 22px; line-height:30px; margin:40px auto 30px;color:#F361DC}

이 코드의 결과물은 아래의 캡쳐와 같다.

태블릿 pc 화면과 같은 중간 너비의 화면에서의 모습

밋밋했던 h태그들이 폰트 종류부터 색상, 사이즈까지 싹 바뀌었다.

테스트 용으로 눈에 확 튀게 잘 보이게 하려고 코드를 막 넣어서 예쁘진 않지만 개인 입맛에 맞게 얼마든지 예쁘게 꾸밀 수 있다는 게 중요한 거 아니겠나.

h태그 폰트 변경 방법은 여기서 끝!

 

 

 

... 이면 참 좋겠지만.

모바일 화면 기준

염병하게도 모바일 모드에선 h태그들의 사이즈가 바뀌지 않았다. 분명 코드에 사이즈별 변화를 주었는데도 불구하고.

그 와중에 h4에 적용한 리디바탕('RIDIBatang')체는 왜 또 포스팅 하단의 ''여행' 카테고리의 다른 글' 부분 폰트까지 바뀌게 했는가...

후 ... 모바일 h태그 사이즈 고치러 가자.

위에 언급했듯, .area_view h를 검색하면 두 군데가 나온다. 이번엔 아래 쪽 .area_view h으로 가자.

.area_view h1,
.area_view h2,
.area_view h3,
.area_view h4 { font-size:20px; }

... 이렇게 콤마가 달려있으니 h태그의 폰트 사이즈들이 하나같이 똑같지.

아니, 늬들 대체 왜 묶어놓은건데.

크게 건들 것 없이 콤마만 지우면 h태그들끼리 사이즈가 달라진다. 위에 이미 h태그에 해놓은 값에 바로 영향을 받기 때문. 만일 모바일에서 따로 사이즈를 바꾸고 싶다면 여기서 일일이 사이즈를 지정해주자.

나는 콤마만 지웠다.

드디어 h태그 사이즈의 변경이 전부 완료가 되었다. 초반에 건든 코드에서 지정해둔 사이즈의 영향을 제대로 받고 있는 걸 확인할 수 있다.

만약 모바일 화면 모드에서의 h태그와 다른 너비의 모드의 h태그와 아예 따로 놀게 하고 싶다?

콤마를 없앤, 저 두 번째로 등장한  .area_view h 쪽 코드를 사부작거리면 이런저런 설정을 때려넣은 h 태그가 모바일 화면에서만 적용이 된다.

h태그에 관하여 사족을 조금만 덧붙이자면.

많은 사람들이 구글 SEO를 위해서 h1태그는 1개만 써야하고 소제목들을 순차적으로 써야하고 어쩌고 저쩌고 말이 많던데 그거, 루머란다.

무려 구글 오피셜이다.

그럼에도 불구하고 내가 h2, h3을 쓰는 이유는 ... 티스토리 갓 시작했을 때에 h1, h2, h3사이즈가 각각 다 다른줄 알고 ... (._.

소제목인데 h1을 쓰면 너무 사이즈가 클 것 같지 뭔가. h3은 너무 작을 것 같고. 그래서 h2가 적당한 사이즈겠거니하고 h2를 커스터마이징해서 썼었다. 하, h태그들 사이즈가 다 같은지도 모르고 ...

여하튼 사이즈가 다 같다는 건 뒤늦게서야 깨닫고 h2랑 h3을 서로 폰트 다르게 지정할 겸 그제서야 사이즈도 약간 건들였다는 그런 슬프고 쓰잘데기없는 히스토리가 있다.

마침 SEO에 영향을 준다고 하지도 않으니 h태그를 자유롭게 사용하길!

---