티스토리에서 공식적으로 제공하는 스킨 제작 가이드 문서만으로는 당췌 무슨 소린지 알 수 없는 분들이 많으실 것 같습니다. 저 역시 그 중 한 명이었습니다. 친효스킨을 제작하면서 여러 스킨들을 분석했고 현재는 티스토리 스킨을 어떤 식으로 제작해야하는지 완벽히 이해를 했습니다. 그래서 제가 설명해드리는 방식으로 티스토리 스킨 제작 가이드 페이지를 따로 만들어보기로 했습니다. 최대한 이해가 쉽도록 도움을 드려보려고 합니다. 단 스킨 제작 가이드라고 해서 처음부터 하나 하나 알려드리기에는 무리가 있습니다. 일단 티스토리 스킨 제작은 웹퍼블리싱과 같이 HTML과 CSS가 주력으로 사용됩니다. 레이아웃과 스타일은 어느정도 만들 줄 아는 분들이어야 합니다. 아예 모르신다면 이 부분을 별도로 배우셔야 합니다. 제 티스..
안녕하세요. 친절한효자손입니다. 친효스킨의 두번째 버전인 아트북의 완성이 코 앞 입니다. 이제 푸터 영역까지 만들었습니다. 나머지는 페이지 표현 부분과 커버 기능만 추가하면 끝입니다. 이후에는 좀 더 디테일한 스타일 수정만 진행하면 될 것 같습니다. 미리보기 푸터 영역은 위의 이미지와 같이 생겼습니다. 색상 및 글씨 크기, 스타일은 이후에도 바뀔 수 있는 점 미리 밝힙니다. 하지만 기본적인 레이아웃은 이대로 쭈욱 진행할 생각입니다. 푸터 영역 또한 당연히 반응형으로 대응하게 됩니다. 프로필 모듈을 푸터 영역으로 옮겼습니다. 원래는 왼쪽의 사이드바에 들어가 있었는데 굳이 프로필 내역을 사이드바에 넣어둘 필요는 없을 것 같았습니다. 이 스킨의 테마는 아트북이므로 뭔가 아티스트의 정보를 푸터 영역의 한 곳에 ..
안녕하세요! 친절한효자손입니다. 점점 스킨의 윤곽이 잡혀가고 있습니다. 친효스킨 아트북 반응형 스킨의 댓글과 방명록에 대한 스타일 세팅이 완료되었습니다. 이제 진짜 얼마 남지 않았습니다. 커버 기능 하나만 남았군요. 완성이 코 앞입니다. 어서 완성하여 배포할 날을 학수고대하고 있습니다. 미리보기 먼저 댓글 리스트입니다. 기존 친효스킨의 말풍선 스타일이 너무 마음에 들기에 스타일을 대체로 유지하되 답글에 대한 스타일만 변경했습니다. 답글은 좀 더 직관적으로 보이게 하고 싶어서 답글 프로필의 왼쪽 상단에 뱃지를 달았습니다. 반응형으로 동작합니다. 모바일같은 가로가 좁은 화면에서는 안쪽 여백이 줄어들고 프로필 사진도 작아집니다. 폰트 크기는 변하지 않습니다. 방명록 스타일은 댓글 스타일과 동일합니다. 굳이 다..
티스토리 HTML 구조는 공지글과 본문의 태그가 각각 독립적으로 존재합니다. 하지만 대다수의 티스토리 스킨 스타일을 보면 공지글과 본문 글의 레이아웃이며 디자인이 똑같습니다. 친효스킨도 그렇습니다. 굳이 따로 레이아웃을 구성할 필요는 없지요. "글"이니까요. 공지글이나 본문글이나 같은 글입니다. 그래서 친효스킨 아트북에서도 스타일을 똑같이 구성했습니다. 미리보기 인덱스 페이지는 지난 시간에 완성했죠? 클릭하면 본문으로 바로 들어갑니다. 아트북 컨샙에 맞게 본문 레이아웃을 엘범의 사진첩 느낌이 나도록 만들어봤는데 의도되로 잘 표현되었는지는 모르겠습니다. 깔끔하고 심플한걸 좋아하기에 최대한 기본 스타일을 이용해서 구성했습니다. 친효스킨 아트북 본문도 당연히 반응형으로 대응합니다. 사이드바의 공지모듈에 있는 ..
안녕하세요. 친절한효자손입니다. 메인화면의 한 축을 담당하는 인덱스 페이지 완성했습니다. 인덱스 페이지는 검색 결과 페이지의 리스트 형태이기도 합니다. 티스토리 커버 기능 이전에 가장 기본이 되었던 메인 화면이지요. 따라서 기본 of 기본이기에 반드시 스타일을 만들어야만 하는 과정입니다. 친효스킨을 완성해본 경험이 확실히 엄청나게 도움이 되고 있습니다. 처음에는 HTML의 구조 파악부터 난관의 연속이었으나 지금은 구조는 파악했으니 스타일만 만들면 됩니다. 그렇기에 시간이 그리 오래 걸리지는 않습니다. 경험의 유무는 정말이지 엄청납니다. 이래서 경력자 우대라는 말이 나오는 것 같습니다. 미리보기 움짤로 친효스킨 아트북의 인덱스 페이지를 살펴봅시다. 인덱스 페이지는 당연히 반응형으로 동작합니다. 친효스킨과 ..
안녕하세요. 친절한효자손입니다. 본 페이지는 그동안 작성한 스킨 제작 관련 글들을 한데 모은 링크 페이지입니다. 티스토리 사용 설명서 페이지와 같은 역할을 합니다. 제 경우 HTML와 CSS 등의 웹퍼블리싱을 배우고 티스토리에 적용시키려 했는데 아시다시피 티스토리에서는 치환자라고 하는 스크립트를 사용하기에 HTML의 뼈대도, 또 그에 따른 CSS 스타일도 사용자 임의대로 자유롭게 편집을 하기가 곤란했습니다. 그리고 치환자 개념도 없었기때문에 스킨 제작에 더 큰 어려움이 있었습니다. 저와 같은 어려움을 겪으시는 분들에게 도움이 되고자 열심히 글을 작성했습니다. 친효스킨을 제작하면서 알게된 개념들을 최대한 이해가 쉽도록 작성했지만 저 역시 사람인지라 제대로 전달이 되지 않을수도 있습니다. 머릿속에 개념은 있..
지난 시간에 이어서 추가 설명을 드리겠습니다. 바로 이전 시간에 커버 기능에 대해 소개해드렸습니다. 친효스킨에서 커버 기능을 구축하기위해 HTML와 CSS, index.xml에 관련 태그들을 모두 마크업했는데 몇 가지 자세히 설명을 못 드린 부분이 있습니다. 그것을 오늘 소개시켜드리고자 합니다. 친효스킨 2.4 버전까지는 네 가지의 스타일 커버가 적용되었습니다. 그 중에서 썸네일 관련 태그를 HTML에서 살펴보시면 다음의 영역을 확인할 수 있습니다. HTML 살펴보기 특히 style 부분에 보시면 다소 복잡한 태그들이 이것 저것 들어가있습니다. 제가 웹퍼블리싱 시간에 배우기로는 이런 형태가 아닌, 스타일을 정의하는 CSS 부분에 대해서만 마크업하도록 배웠습니다. 근데 뭔가 이상한 태그들이 더 추가가 되어..
모바일 웹 퍼블리싱 작업을 위해서 HTML 문서 내에 있는 안쪽에 다음의 메타 태그를 삽입하면 두 손 가락을 사용한 핑거스냅 사용을 할 수 있습니다. 확대 혹은 축소가 가능해집니다. 친효스킨에도 다음의 메타태그가 적용이 되어 있지만 최근에 이 메타태그가 업데이트가 된 모양입니다. HTML는 웹문서로서 버전이 있는데 시간이 지날수록 버전은 올라갑니다. 그러면서 잘 쓰이지 않는 구형의 코드들은 점점 사라지고 있습니다. 새롭게 추가되는 신형 태그(요소) 혹은 메타태그들이 있으면 기왕이면 사용해주는것이 좋을 것입니다. 앞으로의 무궁한 발전을 위해서지요. 거두절미하고 어떤 메타 태그인지 살펴보겠습니다. 뷰포드 살펴보기 구형 : 신형 : 친효스킨에서는 구형의 메타 뷰포트 코드가 삽입되어 있습니다. 작년까지는 정말 ..
이번에는 타입 중 아직까지 언급을 하지 않은 마지막 단계인 COLOR(컬러)입니다. 어떤 설정인지 단어만 봐도 바로 이해할 수 있을겁니다. 바로 그렇습니다. 색 지정에 대한 설정이 가능한 옵션을 부여합니다. 친효스킨에서는 컬러 설정 부분이 상당히 많이 쓰입니다. 대표적으로 댓글과 메인 테마 색상을 설정하는데 이 옵션이 사용되었습니다. 댓글의 경우는 세부적으로 나뉘어 다양한 영역에 대한 색 지정이 가능합니다. COLOR 타입 또한 STRING 처럼 HTML 문서 내의 안쪽에 존재하는 영역에서 CSS를 제어할 수 있습니다. 또한 내의 인라인 방식의 스타일도 제어가 가능합니다. 하지만 굳이 인라인 방식까지 제어할 필요는 없는 것 같습니다. 그냥 내에서도 충분합니다. COLOR 타입은 STRING과 똑같다고 보..
이번에는 옵션 중 STRING에 대해 알아볼 차례입니다. 이 타입도 정말 쓰임새가 많습니다. 친효스킨의 경우에도 정말 많이 적용된 스킨 편집 옵션 중 하나입니다. 대표적으로 애드센스 클라이언트값 입력 부분과 슬롯 번호 입력 부분의 경우입니다. 그밖에도 추천글 모듈에 대한 부분으로 URL 입력 항목이나 텍스트 입력 항목이 모두 STRING 타입을 이용한 부분입니다. STRING 타입은 HTML에서, 그리고 HTML 문서 내의 안에 존재하는 의 내부 방식에 따른 CSS 스타일에서 그 값을 로드합니다. 더욱 이해가 쉽도록 친효스킨에서 실제로 사용된 예시를 살펴보겠습니다. HTML 살펴보기 첫 번째 예시입니다. #contents .article { font-size: !important; } @media (mi..
이번에는 index 페이지에 있는 여러 타입들 중에서 SELECT에 대해서 자세히 알아볼 것입니다. 친효스킨에도 Select 타입의 스킨 설정 옵션이 몇 가지 적용되어 있습니다. 단어의 의미를 그대로 직역해 보시기 바랍니다. 말 그대로 선택이라는 의미입니다. 그렇습니다. 여러가지 옵션들 중에서 선택을 필요로할때 적용할 수 있는 스킨 옵션입니다. 지금까지 소개해드렸던 스킨 제작 가이드 중에서 아마 설명이 많이 복잡하게 들어갈 것 같습니다. 이게 단순하게 작업이 진행되는것이 아니기 때문입니다. BOOL 타입의 경우는 그룹치환자를 만들어서 감싸주고 치환자 매소드를 index 페이지에 연결만 시켜주면 On / Off 스위치를 스킨설정 페이지에 만들 수 있었습니다. 그러나 SELECT 타입은 이렇게 단순하지가 않..
지난 시간에 이어서 이번에는 커버 코드에 있는 일부 기능에 대해 더 자세히 알아보는 시간을 가져보겠습니다. 개인적으로 정말 많이 사용하는 기능 중 하나입니다. 사용 방법도 그리 어렵지 않습니다. 티스토리 반응형 스킨 설정 옵션을 보시면 스킨마다 다르겠으나 기본적으로 토글(Togle) 스위치가 있는 옵션을 발견하실 수 있을겁니다. 켜고 끄는 스위치 옵션입니다. 친효스킨의 경우에는 애드센스를 켜고 끌때, 프로필 사진이라던지 프로필 아래의 다양한 SNS 아이콘들을 켜고 끌 때에도 이 기능을 사용했습니다. HTML 살펴보기 친효스킨 커버에 있는 HTML 코드 중 일부입니다. 태그를 그룹치환자가 감싸고 있는 형태입니다. 이 그룹 치환자는 제가 임의로 만든 치환자 태그입니다. 그룹 치환자를 만들었으니 이것은 ind..
이번에는 커버 기능에 대해 좀 더 자세히 살펴보겠습니다. 이미 티스토리 스킨 제작 가이드 페이지에서 커버 부분이 나름 상세하게 나와있으니 한번 확인해 주시기 바랍니다. 특히 치환자 부분을 꼼꼼히 살펴보시기 바랍니다. https://tistory.github.io/document-tistory-skin/common/cover.html 홈 커버 · GitBook 홈 커버 홈 커버는 홈화면을 꾸미기 위해 제공되는 치환자입니다. : 커버 그룹 치환자 : 개별 커버 표시 : 개별 커버. name 애트리뷰트로 이름을 지정한다. 정의되지 않은 이름의 커버는 사용되지 tistory.github.io 치환자 종류가 생각보다 많습니다. 중요한 포인트는 반드시 가이드에 명시된 치환자 전부를 다 사용할 필요는 없다는 것입니다..
티스토리는 index.xml 문서와 HTML 문서가 밀접하게 연결되어 동작하는 플랫폼입니다. 앞서 두 개의 강좌를 다 살펴보셨다면 index.xml은 티스토리 스킨을 제어하는 목적으로 사용한다는것을 알 수 있습니다. 그렇다면 제어를 위해서는 반드시 HTML에 무언가가 존재해야한다는걸 짐작할 수 있을 것입니다. 그것이 바로 티스토리 스킨 가이드에서 명시하고 있는 그룹 치환자와 값 치환자입니다. 치환자 공통 부분 그룹 치환자와 값 치환자는 정해진 태그가 있는 반면 개발자가 임의로 만드는 형태도 존재합니다. 친효스킨을 기준으로 설명드리자면 정해진 치환자는 다음과 같습니다. 전체가 아닌 일부만 말씀드리겠습니다. 그룹 치환자 : , , 값 치환자 : , , 티스토리 스킨 가이드에 공식적으로 나와있는 모든 그룹 및..
HTML과 CSS, 자바스크립트를 어느정도 할 줄 아신다면 아마 레이아웃 구성 부분은 큰 문제없이 세팅을 할 수 있을 것입니다. 제가 티스토리 스킨을 만들 때 가장 어려웠던 부분은 바로 index.xml의 활용이었습니다. 이 문서를 어떻게 적용시켜야 제어가 가능한지 전혀 몰랐기 때문입니다. 그러니 가장 먼저 index.xml 문서에 대해서 개념을 이해할 필요가 있겠습니다. 티스토리 스킨 제작 가이드 페이지에도 정의가 나름 명시되어 있지만 너무 요약된 설명 때문에 초보자인 제가 볼 때는 당췌 이게 무슨 의미인지를 전혀 알 수 없었습니다. 아마 저와 비슷한 시행착오를 겪는 분들이 많을 것이라 짐작을 하며 최대한 쉽게 정리를 다시 해보려고 합니다. index.xml 페이지 구조 앞서 설명드렸던 강좌를 정독하셨..
티스토리 스킨 제작을 위한 티스토리 가이드 페이지가 있긴 합니다만 설명이 많이 부실합니다. 저 같은 초보자에게는 이게 대체 무슨 의미인지를 모르겠더군요. 제가 만약 티스토리 부서에 배치된 직원이라면 절대 그렇게 설명하지 않습니다. 제대로 설명을 해놨을 것입니다. 그런 마음을 담아서 이번 강좌부터는 제 스타일대로 나름 자세한 설명을 진행하려고 합니다. 부디 이 내용이 티스토리 스킨을 제작하시는 분들에게 도움이 되기를 바랍니다. 스킨 구성 파일 중 index.xml 의 역할 이 파일은 티스토리 스킨편집의 구성을 담당합니다. 스킨의 설정을 직접적으로 진행하기 위한 페이지로서 사용자 편의성을 제공하는데 목적을 두고 있습니다. 스킨 편집을 위한 파일이라고 생각하시면 됩니다. 스킨의 HTML에 특수 태그를 만들고 ..
저도 까먹기 전에 빨리 이걸 써놔야 할 것 같습니다. 더불어 티스토리 스킨을 직접 제작하려고 결심하신 분들도 계실 것 입니다. 그분들에게 조금이나마 도움이 되었으면 하는 바램도 있습니다. 티스토리 스킨을 처음 만들려고 도전했을 때, HTML 스킨 구조가 어떤건지 쉽사리 파악이 되지 않아서 다소 고생한 경험이 있습니다. 경험을 바탕으로 최대한 자세하면서 단순하게 설명해 보겠습니다. 또한 티스토리에서 제공하는 스킨 가이드 페이지도 같이 참고하시면 이해하는데 도움이 될 것입니다. 이곳에서의 설명은 HTML과 CSS를 어느정도 이해하고 계신 분들을 위한 강좌입니다. HTML 웹코딩을 좀 하실 줄 아신다면 아마 쉽게 이해가 되시겠지만, 코딩과 태그에 대한 기초 지식이 없으신 분들이시라면 파악하시는데 조금 어려움이..