티스토리 스킨 제작 가이드 (With 친절한효자손)

티스토리에서 공식적으로 제공하는 스킨 제작 가이드 문서만으로는 당췌 무슨 소린지 알 수 없는 분들이 많으실 것 같습니다. 저 역시 그 중 한 명이었습니다. 친효스킨을 제작하면서 여러 스킨들을 분석했고 현재는 티스토리 스킨을 어떤 식으로 제작해야하는지 완벽히 이해를 했습니다. 그래서 제가 설명해드리는 방식으로 티스토리 스킨 제작 가이드 페이지를 따로 만들어보기로 했습니다. 최대한 이해가 쉽도록 도움을 드려보려고 합니다. 단 스킨 제작 가이드라고 해서 처음부터 하나 하나 알려드리기에는 무리가 있습니다. 일단 티스토리 스킨 제작은 웹퍼블리싱과 같이 HTML과 CSS가 주력으로 사용됩니다. 레이아웃과 스타일은 어느정도 만들 줄 아는 분들이어야 합니다. 아예 모르신다면 이 부분을 별도로 배우셔야 합니다. 제 티스..

블로그/스킨제작 2023. 4. 28. 00:09

친절한효자손의 티스토리 반응형 스킨제작 가이드 문서

안녕하세요. 친절한효자손입니다. 본 페이지는 그동안 작성한 스킨 제작 관련 글들을 한데 모은 링크 페이지입니다. 티스토리 사용 설명서 페이지와 같은 역할을 합니다. 제 경우 HTML와 CSS 등의 웹퍼블리싱을 배우고 티스토리에 적용시키려 했는데 아시다시피 티스토리에서는 치환자라고 하는 스크립트를 사용하기에 HTML의 뼈대도, 또 그에 따른 CSS 스타일도 사용자 임의대로 자유롭게 편집을 하기가 곤란했습니다. 그리고 치환자 개념도 없었기때문에 스킨 제작에 더 큰 어려움이 있었습니다. 저와 같은 어려움을 겪으시는 분들에게 도움이 되고자 열심히 글을 작성했습니다. 친효스킨을 제작하면서 알게된 개념들을 최대한 이해가 쉽도록 작성했지만 저 역시 사람인지라 제대로 전달이 되지 않을수도 있습니다. 머릿속에 개념은 있..

블로그/스킨제작 2021. 8. 29. 00:07

티스토리 스킨 제작 도움말 : <s_if_var>, <s_not_var> 그룹치환자 사용법

지난 시간에 이어서 추가 설명을 드리겠습니다. 바로 이전 시간에 커버 기능에 대해 소개해드렸습니다. 친효스킨에서 커버 기능을 구축하기위해 HTML와 CSS, index.xml에 관련 태그들을 모두 마크업했는데 몇 가지 자세히 설명을 못 드린 부분이 있습니다. 그것을 오늘 소개시켜드리고자 합니다. 친효스킨 2.4 버전까지는 네 가지의 스타일 커버가 적용되었습니다. 그 중에서 썸네일 관련 태그를 HTML에서 살펴보시면 다음의 영역을 확인할 수 있습니다. HTML 살펴보기 특히 style 부분에 보시면 다소 복잡한 태그들이 이것 저것 들어가있습니다. 제가 웹퍼블리싱 시간에 배우기로는 이런 형태가 아닌, 스타일을 정의하는 CSS 부분에 대해서만 마크업하도록 배웠습니다. 근데 뭔가 이상한 태그들이 더 추가가 되어..

블로그/스킨제작 2021. 8. 4. 00:12

티스토리 스킨 제작 도움말 : COLOR 타입을 알아보자

이번에는 타입 중 아직까지 언급을 하지 않은 마지막 단계인 COLOR(컬러)입니다. 어떤 설정인지 단어만 봐도 바로 이해할 수 있을겁니다. 바로 그렇습니다. 색 지정에 대한 설정이 가능한 옵션을 부여합니다. 친효스킨에서는 컬러 설정 부분이 상당히 많이 쓰입니다. 대표적으로 댓글과 메인 테마 색상을 설정하는데 이 옵션이 사용되었습니다. 댓글의 경우는 세부적으로 나뉘어 다양한 영역에 대한 색 지정이 가능합니다. COLOR 타입 또한 STRING 처럼 HTML 문서 내의 안쪽에 존재하는 영역에서 CSS를 제어할 수 있습니다. 또한 내의 인라인 방식의 스타일도 제어가 가능합니다. 하지만 굳이 인라인 방식까지 제어할 필요는 없는 것 같습니다. 그냥 내에서도 충분합니다. COLOR 타입은 STRING과 똑같다고 보..

블로그/스킨제작 2021. 7. 11. 00:08

티스토리 스킨 제작 도움말 : STRING 타입을 알아보자

이번에는 옵션 중 STRING에 대해 알아볼 차례입니다. 이 타입도 정말 쓰임새가 많습니다. 친효스킨의 경우에도 정말 많이 적용된 스킨 편집 옵션 중 하나입니다. 대표적으로 애드센스 클라이언트값 입력 부분과 슬롯 번호 입력 부분의 경우입니다. 그밖에도 추천글 모듈에 대한 부분으로 URL 입력 항목이나 텍스트 입력 항목이 모두 STRING 타입을 이용한 부분입니다. STRING 타입은 HTML에서, 그리고 HTML 문서 내의 안에 존재하는 의 내부 방식에 따른 CSS 스타일에서 그 값을 로드합니다. 더욱 이해가 쉽도록 친효스킨에서 실제로 사용된 예시를 살펴보겠습니다. HTML 살펴보기 첫 번째 예시입니다. #contents .article { font-size: !important; } @media (mi..

블로그/스킨제작 2021. 7. 10. 00:06

티스토리 스킨 제작 도움말 : SELECT 타입을 알아보자

이번에는 index 페이지에 있는 여러 타입들 중에서 SELECT에 대해서 자세히 알아볼 것입니다. 친효스킨에도 Select 타입의 스킨 설정 옵션이 몇 가지 적용되어 있습니다. 단어의 의미를 그대로 직역해 보시기 바랍니다. 말 그대로 선택이라는 의미입니다. 그렇습니다. 여러가지 옵션들 중에서 선택을 필요로할때 적용할 수 있는 스킨 옵션입니다. 지금까지 소개해드렸던 스킨 제작 가이드 중에서 아마 설명이 많이 복잡하게 들어갈 것 같습니다. 이게 단순하게 작업이 진행되는것이 아니기 때문입니다. BOOL 타입의 경우는 그룹치환자를 만들어서 감싸주고 치환자 매소드를 index 페이지에 연결만 시켜주면 On / Off 스위치를 스킨설정 페이지에 만들 수 있었습니다. 그러나 SELECT 타입은 이렇게 단순하지가 않..

블로그/스킨제작 2021. 7. 7. 00:06

티스토리 스킨 제작 도움말 : BOOL 타입을 알아보자

지난 시간에 이어서 이번에는 커버 코드에 있는 일부 기능에 대해 더 자세히 알아보는 시간을 가져보겠습니다. 개인적으로 정말 많이 사용하는 기능 중 하나입니다. 사용 방법도 그리 어렵지 않습니다. 티스토리 반응형 스킨 설정 옵션을 보시면 스킨마다 다르겠으나 기본적으로 토글(Togle) 스위치가 있는 옵션을 발견하실 수 있을겁니다. 켜고 끄는 스위치 옵션입니다. 친효스킨의 경우에는 애드센스를 켜고 끌때, 프로필 사진이라던지 프로필 아래의 다양한 SNS 아이콘들을 켜고 끌 때에도 이 기능을 사용했습니다. HTML 살펴보기 친효스킨 커버에 있는 HTML 코드 중 일부입니다. 태그를 그룹치환자가 감싸고 있는 형태입니다. 이 그룹 치환자는 제가 임의로 만든 치환자 태그입니다. 그룹 치환자를 만들었으니 이것은 ind..

블로그/스킨제작 2021. 7. 6. 00:07

티스토리 스킨 제작 도움말 : 커버 기능

이번에는 커버 기능에 대해 좀 더 자세히 살펴보겠습니다. 이미 티스토리 스킨 제작 가이드 페이지에서 커버 부분이 나름 상세하게 나와있으니 한번 확인해 주시기 바랍니다. 특히 치환자 부분을 꼼꼼히 살펴보시기 바랍니다. https://tistory.github.io/document-tistory-skin/common/cover.html 홈 커버 · GitBook 홈 커버 홈 커버는 홈화면을 꾸미기 위해 제공되는 치환자입니다. : 커버 그룹 치환자 : 개별 커버 표시 : 개별 커버. name 애트리뷰트로 이름을 지정한다. 정의되지 않은 이름의 커버는 사용되지 tistory.github.io 치환자 종류가 생각보다 많습니다. 중요한 포인트는 반드시 가이드에 명시된 치환자 전부를 다 사용할 필요는 없다는 것입니다..

블로그/스킨제작 2021. 6. 30. 00:06

티스토리 스킨 제작 도움말 : 그룹 치환자와 값 치환자

티스토리는 index.xml 문서와 HTML 문서가 밀접하게 연결되어 동작하는 플랫폼입니다. 앞서 두 개의 강좌를 다 살펴보셨다면 index.xml은 티스토리 스킨을 제어하는 목적으로 사용한다는것을 알 수 있습니다. 그렇다면 제어를 위해서는 반드시 HTML에 무언가가 존재해야한다는걸 짐작할 수 있을 것입니다. 그것이 바로 티스토리 스킨 가이드에서 명시하고 있는 그룹 치환자와 값 치환자입니다. 치환자 공통 부분 그룹 치환자와 값 치환자는 정해진 태그가 있는 반면 개발자가 임의로 만드는 형태도 존재합니다. 친효스킨을 기준으로 설명드리자면 정해진 치환자는 다음과 같습니다. 전체가 아닌 일부만 말씀드리겠습니다. 그룹 치환자 : , , 값 치환자 : , , 티스토리 스킨 가이드에 공식적으로 나와있는 모든 그룹 및..

블로그/스킨제작 2021. 6. 25. 00:06

티스토리 스킨 제작 도움말 : index.xml 문서의 구조

HTML과 CSS, 자바스크립트를 어느정도 할 줄 아신다면 아마 레이아웃 구성 부분은 큰 문제없이 세팅을 할 수 있을 것입니다. 제가 티스토리 스킨을 만들 때 가장 어려웠던 부분은 바로 index.xml의 활용이었습니다. 이 문서를 어떻게 적용시켜야 제어가 가능한지 전혀 몰랐기 때문입니다. 그러니 가장 먼저 index.xml 문서에 대해서 개념을 이해할 필요가 있겠습니다. 티스토리 스킨 제작 가이드 페이지에도 정의가 나름 명시되어 있지만 너무 요약된 설명 때문에 초보자인 제가 볼 때는 당췌 이게 무슨 의미인지를 전혀 알 수 없었습니다. 아마 저와 비슷한 시행착오를 겪는 분들이 많을 것이라 짐작을 하며 최대한 쉽게 정리를 다시 해보려고 합니다. index.xml 페이지 구조 앞서 설명드렸던 강좌를 정독하셨..

블로그/스킨제작 2021. 6. 20. 00:07

티스토리 스킨 제작 도움말 : index.xml 문서의 역할 및 HTML 스킨편집 화면과의 관계

티스토리 스킨 제작을 위한 티스토리 가이드 페이지가 있긴 합니다만 설명이 많이 부실합니다. 저 같은 초보자에게는 이게 대체 무슨 의미인지를 모르겠더군요. 제가 만약 티스토리 부서에 배치된 직원이라면 절대 그렇게 설명하지 않습니다. 제대로 설명을 해놨을 것입니다. 그런 마음을 담아서 이번 강좌부터는 제 스타일대로 나름 자세한 설명을 진행하려고 합니다. 부디 이 내용이 티스토리 스킨을 제작하시는 분들에게 도움이 되기를 바랍니다. 스킨 구성 파일 중 index.xml 의 역할 이 파일은 티스토리 스킨편집의 구성을 담당합니다. 스킨의 설정을 직접적으로 진행하기 위한 페이지로서 사용자 편의성을 제공하는데 목적을 두고 있습니다. 스킨 편집을 위한 파일이라고 생각하시면 됩니다. 스킨의 HTML에 특수 태그를 만들고 ..

블로그/스킨제작 2021. 6. 16. 00:06

친절한효자손 취미생활