본문 바로가기

스킨

Mirage - 실험용 티스토리 스킨 티저 실험용이라고 해서 베포를 안 하는 것은 아니고요, 여태까지 시도된적 없는 방법을 많이 써봤습니다. 일단 그리드 부터가 16단 그리드 입니다. 그리고 사이드바를 옆으로 땡겨서 왼쪽에 위치되어있고요, 모바일 뷰에서는 아래로 내려갑니다. 이외에도 자동 숨김처리 되는 오른쪽 메뉴와 화면 크기가 줄어들때 자동으로 오프켄버스 메뉴가 뜹니다. 스킨의 전체적인 스타일도 아주 독특하게 만들었습니다. 메뉴는 전부다 아코디언 형태로 숨겨져 있고, 게시글의 코멘트와 트랙백, 태그는 텝 형태로 지원이 됩니다. 그리고 베포용 스킨으로서는 최초로 블루프린트를 제거하는 기능을 적용하였습니다. 이 때문에 적용과정이 약간 귀찮아 지긴했지만 그렇게 힘들진 않으니 초보자도 문제 없이 설치가 가능하리라 봅니다. 덕분에 반응형 스펙을 완벽하게.. 더보기
Modern Basic - 티스토리 기본 스킨의 HTML5/ CSS3 버전 여태까지 제가 만든 스킨인 TechAesthetic, Prototype, Congnoscenti를 제외하고 그 이외에 나온 모든 스킨들은 티스토리의 기본 스킨인 Basic 기반으로 되어있습니다. 현재 사용중인 Life is a Journey 스킨도 역시나 Basic 기반인데요, 이렇게 많은 도움을 받은 Basic 스킨에게 작게나마 Tribute를 하기 위해서 뼈대는 그대로 두고 구조만 최신 구조로 바꾸어 보았습니다. 모더나이즈라고 거창하게 이름 붙이긴 했는데요, 주요 개선 골자는 HTML5 시멘틱 구조 도입, CSS3 적용, 레스터 이미지 대신 SVG 100% 적용 입니다. 덕분에 스킨 용량은 157kb 입니다. (이상하게도 미리보기 이미지는 용량을 따지질 않는군요) 티스토리 기본 방식을 그대로 쓰다보니.. 더보기
Paper - 3단 반응형 티스토리 스킨 2단 사이드바 또는 3단 레이아웃이라고 불리우는 스킨 형태가 있습니다. 티스토리 기본 제공 스킨 중에도 이런 형태가 있는데요, 사이드 바에 아주 많은 것을 넣거나 아니면 사이드바 길이 때문에 스크롤이 길어지는 것을 꺼리는 경우에 이런 레이아웃을 사용합니다. 그러나 반응형 웹 시대가 도래하면서 이런 형태의 레이아웃은 점차 사라지게 되었습니다. 첫번째 이유는 여러 부분으로 쪼개지기 때문에 반응형으로 만들기가 까다롭습니다. 두번째는 사이드 바 하나 만으로도 반응형 만들려면 머리가 아픈데 2개나 되니 더욱 두통이 심해지기 때문입니다. 그래서 반응형 초창기 도입 단계에 3단 레이아웃은 종말을 선언하였고, 얼마 지나지 않아 2단 레이아웃도 서서히 종적을 감추고 있으며, 현재는 1단 레이아웃을 넘어서 full scr.. 더보기
Paper - 티저 2단 반응형은 여러개 만들어 보았지만 3단 반응형은 이번에 처음 만들어 봅니다.스킨의 특징이라면 글 너비가 무제한이라는 것을 들 수가 있겠내요마치 테블릿 앱 처럼 작동합니다. 더보기
Dynamite - Parallax Tistory Skin 티스토리로 옮겨온지도 거진 1년이 다 되어 가고 있습니다. 늘 사용하면서 느끼는 것인데, 베포용 스킨이나, 아니면 개인이 제작한 스킨을 보면 정말 독특한 몇몇 블로그를 제외하고는 그저 그런 2단,또는 3단형 레이아웃의 스킨이 대부분이며 흔히 볼수 있는 그런 지루하고 따분한 디자인 일색이었습니다. 혹자들은 티스토리의 구조가 가지는 한계성 때문에 요즘 유행하는 웹디자인 요소를 적용한 스킨이 나올수 없다고들 합니다. 그러나 제 생각은 다릅니다. 기본적으로 오로지 기능을 위한 티스토리 스킨만이 존재할 뿐이지 디자인에 중점을 두고 만들어진 티스토리 스킨은 그렇게 많지 않습니다. 물론 블로그는 컨텐츠가 주 목적이기 때문에 간단 명료 해도 된다고 하지만, 적어도 간단하고 심플한 범위내에서 남들보다 튀어볼만한 요소를 .. 더보기
Dynamite 거의 완료 어느정도 실사 좀 해보고 버그를 잡은 뒤에 업로드 하도록 하겠습니다. 더보기
Dynamite - 페이지 별 페럴랙스 헤더 dynamite 스킨의 최대 특징으로는 페이지 별로 별도의 페럴랙스 헤더 배경을 지정할 수 있습니다. 티에디션 방명록 키로그 위치로그 미디어 로그 보호글 검색 결과 태그 클라우드 본문 본문 제목이 아주 길때 본문 제목이 아주 길때는 타이틀 부가 커지면서 밑부분이 드러나게 됩니다. 권장하는 헤더 배경 크기는 1920x1080 사이즈이며, 그 이상도 괜찮지만 너무 크면 스크롤시 버벅거리므로 신중하게 적용하셔야 할듯 합니다. 더보기
Hare for egloos -가장 빠르고 가볍고 '이쁜' 이글루스 반응형 스킨 본 스킨은 동명의 티스토리 스킨인 Hare for Tistory를 컨버전 하여 이글루스 용으로 변경해 놓은 것 입니다. 티스토리 용은 HTML5와 CSS3 기반으로 되어있으나 이글루스용 스킨은 이글루스의 저질스런 구조에 맞추어 XHTML Transitional 기반으로 변경되었으며, 시멘틱 구조를 지원하지 않기 때문에 SEO 따위는 꿈도 꾸지 않는게 좋습니다. 제 이글루스 블로그에 적용되어 있는 스킨이 바로 이 스킨이며 아주 미려한 디자인과 색상 배치가 적용되어 있습니다. 스킨의 주요 특징으로는 레스터 이미지가 일체 사용되지 않았으며 각종 아이콘은 SVG로 스타일시트를 통해 injection되게 해놓았습니다. 그래서 따로 번거롭게 이미지 파일을 넣는다던가 하는 삽질을 할 필요 없이 원터치로 인스톨이 가능.. 더보기
Suit & Tie - Addon Stylesheet for Fastboot v1.5.1 Readiz님의 Fastboot 1.5.1 업뎃 소식을 30일날 접하고 잉여력 폭발해서 3시간 만에 만든 애드온 스타일 시트 입니다. HTML은 단 한 줄도 건드리지 않았으며 CSS 파일만 달랑 만들었습니다. 웹 폰트는 쓰지 않았으며, 매킨토시에서는 Helvetica Neue와 애플 산돌 고딕 네오, 윈도우 에서는 Arial과 맑은 고딕이 기본 적용 되며 맑은 고딕이 없을 경우에는 나눔고딕이 적용 됩니다. (마음 같아선 Proxima nova나 Gotham 쓰고 싶지만...) 사실 31일날 올리려 했으나, 그 날은 도무지 이런 글 올릴만한 기분이 아니어서 걍 예약 발행 해 놓았습니다. 살짝 걱정이 되는 것은 워낙 업데이트가 빠르셔서 제가 만든 스타일 시트가 이 글이 발행 될때 쯤에는 구버전에나 적합 할 .. 더보기
Dynamite - 티스토리용 페럴랙스 스킨 페럴랙스를 기본으로 지원하는 스킨입니다. CSS3으로 구현한 반쪽짜리 페럴랙스가 아닌 자바스크립트로 지원하는 페럴랙스 입니다.페이지 별로 다른 베너가 들어가며, 베너는 모두 페럴랙스 기능이 제공됩니다. 더보기

티스토리툴바