티스토리 반응형 스킨 111 - 반응형 콰트로 v3 스킨 배포합니다.
--------------------------------------------------------------------
2021-09-02. 목차 기능 사용시 공감 버튼과 충돌하는 현상 패치 (스킨을 다시 다운로드 받아 script.js 파일만 재업로드)
--------------------------------------------------------------------
웹 브라우저 너비에 따라서 한 행에 표시되는 썸네일 갯수가 자동으로 변경되는 메이슨리 라이브러리를 사용하는 반응형 스킨입니다.
사진 중심의 포토 블로그에 적합한 스킨으로 사이드바가 기본으로 감추어져 있는 좌우 대칭인 레이아웃을 가지고 있습니다.
헤더 영역을 최소화해서 글 목록과 글 내용에 집중할 수 있도록 컨텐츠 중심으로 제작되었습니다.
■ 스킨 적용전 주의사항
- 스킨 소스 상단과 스킨 적용화면 하단에 표시되는 저작권 표시 삭제를 금지합니다.
- 스킨의 개별 커스터마이징 요청은 받지 않습니다.
- 새 스킨 적용전 기존 사용하던 스킨을 꼭 백업하시기 바랍니다.
- 반응형 스킨은 티스토리 모바일 꾸미기를 꺼야 합니다. 티스토리 관리자 화면 메뉴 꾸미기 > 모바일에서 티스토리 모바일웹 자동 연결을 "사용하지 않습니다" 로 설정해야 합니다.
■ 스킨 주요 기능 안내
특징요약
- 인터넷익스플로러11 지원
- 바닐라 자바스크립트만으로 스크립트 기능 구현
- 스킨 내장 아이콘 폰트를 이용해 아이콘 표시
- 티스토리 애드센스 전체 지원
- 80여가지의 스킨 커스터마이징 설정 옵션
- 구 버전 대비 2배 이상 빨라진 페이지 로딩 속도
- 최소 크기를 가진 가벼운 스킨 리소스 파일들
검색 최적화(SEO) 지원
- 빠른 블로그 로딩 속도
- 운영체제 시스템 글꼴 사용 지원으로 빠른 검색 최적화 지원
- 옵션 설정 항목에 검색 사이트 인증키 적용 지원
- 오프스크린 이미지 지연 로딩(Lazyloading) 지원
- 외부 자바스크립트 라이브러리(jQuery) 미사용으로 빠른 페이지 로딩 지원
- 외부 아이콘 라이브러리 미사용
- 가벼운 아이콘 리소스 사용
- 시멘틱 태그 사용으로 검색엔진 인덱싱 지원
80여가지의 스킨 옵션 설정 지원
- 블로그를 운영하면서 필요로 하거나 수정이 발생하는 대부분의 요구 사항을 옵션으로 지원
- 데스크탑, 타블렛, 모바일 환경을 모두 지원하는 반응형 스킨
- 모바일 글목록 타입으로 썸네일형 3종 지원
커스터마이징을 위한 소스 코멘트
- CSS 가 각 영역별로 세분화되어 작성되어 있습니다.
- 자바스크립트 코드에 상세한 코멘트가 작성되어 있습니다.
- 알기 쉽도록 구조화 작업이 되어있어 수정이 용이합니다.
티스토리 애드센스 지원
- 글목록 애드센스 지원
- 사이드바 애드센스 지원
- 자동 애드센스 지원
■ 스킨 적용 관련 안내
스킨 적용 방법을 모를 경우 다음 글을 먼저 읽어보시기 바랍니다.
> 티스토리 스킨 적용시 주의사항과 문제 해결 방법, 그리고 티스토리 버그 안내
■ 스킨 다운로드
■ 주요 스킨 옵션 설정 항목 안내
- 레이아웃
메이슨리 라이브러리 기반의 스킨이기 때문에 기본적으로 웹 브라우저 너비 전체를 레이아웃에 사용합니다.
헤더와 푸터 영역 또한 웹브라우저 너비 전체를 사용하기 때문에 헤더와 푸터 영역, 또는 헤더/푸터를 제외한 나머지 영역의 너비를 임의로 제한할 수 있도록 너비를 설정하는 옵션 항목을 제공합니다.
- 색상
전체 배경색과 헤더, 푸터, 본문 영역 등의 색상을 개별적으로 설정할 수 있어 다채로운 컬러 조합을 만들어낼 수 있습니다.
- 컨텐츠
스킨 각 요소들의 테두리를 둥글게 표현할 수 있습니다. 테두리를 둥글게 설정하면, 글 목록의 썸네일 모서리 또한 둥글게 표현됩니다.
- 글목록/커버목록
썸네일 크기와 여백, 그리고 썸네일 이미지 비율 등을 설정할 수 있습니다.
메이슨리 라이브러리로 제작된 스킨이기 때문에 설정한 썸네일 너비로 가로 크기가 고정되며, 세로 크기를 무제한이 됩니다. 스마트폰으로 세로 촬영한 이미지는 세로 길이 그대로 길게 표시됩니다.
모바일 화면에서는 하단 모바일 옵션 설정에서 썸네일 이미지 표시 방식을 개별 설정할 수 있습니다.
- 글 본문 내용
웹 브라우저 전체 너비를 사용하는 스킨 특성을 고려해 글 보기 화면시 글 본문 영역에 해당하는 부분만 너비를 제한할 수 있습니다.
- 모바일
모바일 화면 보기를 할 때 한 행에 표시되는 썸네일의 개수를 설정할 수 있습니다.
메이슨리 라이브러리를 사용하지만, 더 빠른 모바일 화면 로딩을 위해 메이슨리 방식이 아닌 썸네일 표시 2가지(한 행에 1개, 한 행에 2개)와 메이슨리 방식 표시 1가지(1행에 2개) 중에서 선택할 수 있습니다.
그 외에 80가지 이상의 스킨 옵션 설정 항목을 이용해 다양한 스킨 모습을 만들 수 있습니다.
