Odyssey 모바일 화면 본문 제목 크기 바꾸기

 

■ 웹 브라우저

Chrome

 

 

■ 오디세이 스킨 제목2 태그

.article-view h3

 

 

■ 웹 브라우저 개발자 도구 > 기기툴바전환 > 모바일 화면으로 전환

 

 

검사할 페이지 요소를 누르고 본문에 마우스를 갖다대면 마우스가 위치한 부분의 HTML 요소들이 나오는데 오디세이 스킨에서 제목2는 태그명이 <h3>으로 .article-view h3이다.

 

 

제목 요소를 클릭하면 개발자도구 화면에서 스타일시트에 그 요소의 스타일 설정 내용이 나오니 그 부분 코드를 수정해 바뀌는 모습을 보고 티스토리 스킨 편집에 가서 HTML이나 CSS 코드를 수정하면 된다.


■ 설정 부분
글자 크기 : font-size

글자 굵기 : font-weight
줄 간격 : line-height
선택된 박스 안쪽 여유 공간 : padding

선택된 박스 바깥 여유 공간 : border, border-left, right, top, bottom


border 설정은 border-left, border-top처럼 일일이 지정해도 되고 그냥 border에 위, 왼쪽, 아래, 오른쪽 순으로 크기값을 지정해도 된다.

위, 아래 간격을 15px씩 띄우고 싶다면
border: 10px 0 10px 0;


숫자값 부분을 클릭하고 원하는 값을 직접 입력해도 되고 키보드 위, 아래 방향키로 간격을 조정해도 된다. 시프트 Shift 키를 누른 상태로 마우스 클릭 후 조절하면 10 단위로 조절된다.

 

 

개발자도구에서 조정해보고 맘에 들면 티스토리 스킨 코드에 적용해야 실제 스킨에 적용된다.

 

 

 

티스토리 스킨 편집 위치

관리자 페이지 > 꾸미기 > 스킨 편집 > html 편집 > CSS

Ctrl / Command + F key > .article-view h3 검색

 

 

 

검색 결과에서 찾는 요소가 CSS 전체 영역에서 여러군데 나오면 Ctrl + G 키를 활용하면 찾은 부분이 위치한 곳에서 위에서 아래 방향으로 이동하며 찾고자 하는 부분만 보여준다. 

 

 

.article-view h3 위에 @media screen and (max-width: 1060px) 부분은 화면 크기가 최대 1060px까지는 브라켓 안의 내용을 수행한다는 의미.

 

 

그래서 이 브라켓 안의 h3 부분을 22px로 수정했다면 화면 크기가 1060px까지는 설정한 것처럼 보이고 브라켓 바깥에 위치한 h3을 수정하면 pc, 태블릿, 모바일 모두 적용된다.

 

모바일에서 보이는 글자 크기만 바꾸고 싶으면 max-width 옆 숫자도 812px(아이폰X 기준)처럼 값을 같이 바꿔야 한다.