본문 바로가기

스킨

Hare for Tistory - 가장 빠르고 가벼운 티스토리 반응형 스킨 HTML5와 CSS3 기반으로 만들어진 초경량 스킨입니다. 스킨의 총 용량은 0.27mb로 여태까지 나온 반응형 스킨 중에서는 가장 가볍습니다. 블로그 로딩시간에 신경을 아주 많이 쓰시는 부분이라면 권장해드리는 스킨입니다. 자바스크립트나 제이쿼리등의 스크립트는 일체 적용하지 않아 불 필요한 요청시간을 줄였습니다. 극단적인 경량화를 통해서 정말 빠른 로딩시간을 지원합니다. HTML5 semantic ready semantic 구조로 구성이 되어있어 SEO가 기본지원 됩니다. 미려한 스타일 색 배치를 최대한 절제해서 사용하고, 그리드 레이아웃을 통해서 반응형 스킨을 구성했습니다. 견본 페이지 웹폰트 기본 적용 영문과 한글 웹폰트가 적용 되어있습니다. 기본 한글 웹폰트는 나눔 고딕이며 가독성이 좋습니다. 별도.. 더보기
Hare 사이드바/ 하단부 완료 사이드바/ 댓글/ 하단부의 스타일이 완성되었습니다. 기본 Glyphicon으로는 FontAwesome을 사용합니다. 참고로 IE8 하위지원은 전혀 계획이 없습니다. 더보기
Hare - Ultra Lightweight Tistory Skin 이전 부터 제작하고 있었던 스킨입니다.이미 오래 전에 만들어 두었지만 뒤늦게 내놓는 이유는 관리가 안되는 동안에도 꾸준한 방문자 유치를 위한 자구책이라고 보시면 됩니다. -ㅅ-;시중에 있는 반응형 티스토리 스킨 중에서 가장 가벼울 것으로 예상 (총 용량 0.19mb)제작과정 몇 번 포스팅하고 마지막으로 본 스킨파일이 업로드 됩니다. 더보기
스킨 업데이트 v 2.1 - 오프켄버스 메뉴 어쩌면 이게 마지막 업데이트가 될지도 모르겠군요...사이트 전반에 오프켄버스 메뉴를 추가했습니다.이제 모바일에서도 손쉽게 메뉴에 접근이 가능합니다. 더보기
티스토리 새 관리 - 메인 완료 이제 이짓을 모든 페이지마다 할걸 생각하니 정신이 아득하군요 -ㅅ-그리고 SVG를 CSS에 쑤셔 넣는거 너무 귀찮아요... 색상 변경도 귀찮고... 더보기
티스토리 새 관리 - 오늘은 여기까지 데이터 url로 SVG를 CSS에 심어넣는 것은 처음 써봤는데 생각보다 신기합니다. 문제는 코드가 너무 길어서 SCSS에 집어 넣으면 가로 스크롤이 엄청 길어지는게 좀 귀찮습니다. -ㅅ- 그리고 티스토리 이 미친놈들이 거의 모든 UI요소를 스프라이트로 짜버려서 그거 없애느라 혼났습니다. -_- 아니 셀렉터가 모자라던 시절인 것은 이해는 하지만, heading까지 다음체로해서 png로 만들 필요는 있었나 싶네요 (걍 웹폰트 쓰지...) 마크업이 아니라 CSS로 위에 덮어 씌우는 일은 마이피 스킨만들때도 해봤지만, 아이콘 같은거 집어넣으려고 하면 :before 써가면서 삽질해야 하는거 사람할일 아닙니다; 걍 워드프레스처럼 관리도 스킨질 좀 하게 해주지... P.S 반응형 됩니다. 일부 플래시 요소는 어떻게 .. 더보기
스킨 업데이트 v 2.0.1 초고해상도(1920px 이상)에서 탑바와 하단부가 삐져나가는 문제를 수정했습니다. 스킨의 컨테이너 최대크기는 1920px으로 잡아놓았기 때문에 그 이상으로는 안 커집니다. 모바일에서 좀 더 누르기 쉬운 버튼으로 상단 메뉴 디자인을 바꾸었습니다. 크기를 키우고 애니메이션을 제거하여 프레임 드랍도 줄였습니다. 티에디션에 있는 상단 슬라이더에 컨트롤 부가 마우스 호버시에만 노출됩니다. 섬네일 갯수를 12개에서 24개로 증가했습니다. 기타) 네이버 이웃커넥트 버튼이 추가 되었습니다. 더보기
Syntax Highlighting 기능 추가 했습니다. 이전부터 Syntax Highlighting 에는 SyntaxHighligher를 사용해 왔으나, 이번에는 좀 더 커스텀을 많이 할 수 있는 Highligter.js로 갈아탔습니다. SH 보다 장점이라고 하면 더 광범위 하게 적용 되는 스타일이라고 보시면 됩니다. 게다가 테마도 많아서 굳이 새로 만들필요도 없더군요. 기존에 있던것 가져다가 약간 변형만 시켰습니다. SH는 브러시라는 개념으로 자신이 쓸 언어의 갯수만큼 스크립트 파일을 추가해줘야 하나, Highlight.js는 자체적으로 선택해서 단일 파일을 생성할 수 있는 점이 참 마음에 듭니다. 저 같은 경우 제가 현재 쓰고 있는 CSS,HTTP,Javascript,Ruby,CoffeeScript,PHP,Markdown,HTML/XML,Python,Ha.. 더보기
스킨 구조 플로우 차트 심심해서 현재 사용중인 Life is a Journey v.2의 구조를 플로우 차트로 만들어 보았습니다. SVG이미지 이기 때문에 구형 브라우저에서는 보이지 않습니다. 구현방식이 꽤 삽질을 해서 알아낸 방식이라 그렇지 실제로는 정말 별거 아닙니다. 스크립트가 브라우저와 카테고리를 구분 시켜주고, 그에 맞게 CSS만 넣어주면 알아서 됩니다. 웹 언어 처음 배울때는 ‘도대체 이런걸 어떻게 하는 거지’ 했는데 점점 비슷한걸 만들어가고 있습니다. ㅎㅎ 더보기
티스토리 역사상 가장 막장스킨 후속작 한때 제 블로그에서 화제가 되었던 것 중 하나가 바로, 이 멋드지고 간지터는 IE 전용 스킨 입니다. 최신 브라우저 용 스킨보다 더 큰 호응을 받았던 작품으로 “흡사 눈뽕맞는 기분이 이렇지 않을까" 라는 과분한 평가까지 주변사람들이 해주었습니다. 그래서 이번에 차기 작은 어떻게 만들어야 할지 상당한 고민을 했습니다. 흰 바탕에 흰 글자로 써볼지, 아니면 빨간 바탕에 주황색 글자를 써볼지 등등 아주 여러가지 시안을 만들었습니다. 곰곰히 생각하다가 보니, 이번에는 그냥 흰 바탕에 검은 글씨를 쓰는게 어떨까? 라는 아주 좋은 아이디어가 나왔고 그에 맞춰 스킨을 만들었습니다. 이전에는 맞지도 않는 IE8에서 미디어 쿼리를 꼼수로 작동시킬 수 있다는 명분으로 기존 스킨을 어거지로 돌렸으나, 아무리 생각해도 제대로.. 더보기

티스토리툴바