티스토리 반응형 스킨 #2에서 태그가 같은 폰트 사이즈로 보일때 해결방법

 

문제: 티스토리 반응형 #2 스킨 에디터에서 h태그를 쓰면 모두 같은 크기로 브라우저상에서 표시됩니다. 

에디터 화면상에서는 제대로 글자가 보이지만 발행하면 모두 동일한 크기로 보이는 문제가 발생합니다. 여기다가 안에 강제로 <span>태그로 크기를 설정하면 제대로 보이지만 그렇게 하면 너무 번거로운 작업입니다. 해결방법을 알려드립니다.

 

티스토리 반응형 스킨 #2에서 <H>태그가 같은 폰트 사이즈로 보일때 해결방법

해결방법: 스킨의 CSS의 관련 부분을 수정해줘야 합니다.

<처음 스킨을 설치한 후 CSS 상태>

1. .areaview는 본문관련 CSS설정입니다. CSS상에서 CTRL-F로 찾기  .area_view h1     

아래, 티스토리 EDIT의 스킨 CSS 기본 설정에 보면 h1부터 h4까지 전부 24px로 되어 있는 것을 알 수 있습니다.

아래 소스복사는 크롬 브라우저에서는 CTRL-X

 

<수정 한 상태> 폰트의 사이즈부분을 수정해보자. 폰트 사이즈와 line-height를 수정했습니다. 

margin:52px auto 28px는 마진이 위 52px, 오른쪽과 왼쪽은 auto, 아래는 28x입니다. <h1>~<h4> 태그별로 마진도 달리 설정했습니다. 

 

 

 

여기까지 하면 데스크탑에서는 설정대로 잘 보입니다만, 모바일에서는 기존의 문제가 그대로 발생합니다.

모바일 뷰를 위한 설정

2. Ctrl - F 로   .area_view { 

로 아래부분을 찾습니다. 폰트 사이즈가 h1~ h4까지 20px로 동일합니다. 

 

 

폰트 사이즈를 수정했습니다. ..area_view의 line-height을 수정했습니다. 다른 부분은 추가할 수 있습니다. 

 

결과화면: 설정한 사이즈대로 제대로 보입니다.

제목 h1

h1 내용입니다.

제목 h2

h2 내용입니다.

제목 h3

h3 내용입니다.

제목 h4

h4 내용입니다.

제목 h1

제목 h2

제목 h3

제목 h4

copyright(c) techwillgo.com all rights reserved.
컨텐츠 무단 전재, 복사, 배포 금지