본문 바로가기

html5

Paper - 3단 반응형 티스토리 스킨 2단 사이드바 또는 3단 레이아웃이라고 불리우는 스킨 형태가 있습니다. 티스토리 기본 제공 스킨 중에도 이런 형태가 있는데요, 사이드 바에 아주 많은 것을 넣거나 아니면 사이드바 길이 때문에 스크롤이 길어지는 것을 꺼리는 경우에 이런 레이아웃을 사용합니다. 그러나 반응형 웹 시대가 도래하면서 이런 형태의 레이아웃은 점차 사라지게 되었습니다. 첫번째 이유는 여러 부분으로 쪼개지기 때문에 반응형으로 만들기가 까다롭습니다. 두번째는 사이드 바 하나 만으로도 반응형 만들려면 머리가 아픈데 2개나 되니 더욱 두통이 심해지기 때문입니다. 그래서 반응형 초창기 도입 단계에 3단 레이아웃은 종말을 선언하였고, 얼마 지나지 않아 2단 레이아웃도 서서히 종적을 감추고 있으며, 현재는 1단 레이아웃을 넘어서 full scr.. 더보기
Dynamite - Parallax Tistory Skin 티스토리로 옮겨온지도 거진 1년이 다 되어 가고 있습니다. 늘 사용하면서 느끼는 것인데, 베포용 스킨이나, 아니면 개인이 제작한 스킨을 보면 정말 독특한 몇몇 블로그를 제외하고는 그저 그런 2단,또는 3단형 레이아웃의 스킨이 대부분이며 흔히 볼수 있는 그런 지루하고 따분한 디자인 일색이었습니다. 혹자들은 티스토리의 구조가 가지는 한계성 때문에 요즘 유행하는 웹디자인 요소를 적용한 스킨이 나올수 없다고들 합니다. 그러나 제 생각은 다릅니다. 기본적으로 오로지 기능을 위한 티스토리 스킨만이 존재할 뿐이지 디자인에 중점을 두고 만들어진 티스토리 스킨은 그렇게 많지 않습니다. 물론 블로그는 컨텐츠가 주 목적이기 때문에 간단 명료 해도 된다고 하지만, 적어도 간단하고 심플한 범위내에서 남들보다 튀어볼만한 요소를 .. 더보기
Dynamite 거의 완료 어느정도 실사 좀 해보고 버그를 잡은 뒤에 업로드 하도록 하겠습니다. 더보기
Dynamite - 페이지 별 페럴랙스 헤더 dynamite 스킨의 최대 특징으로는 페이지 별로 별도의 페럴랙스 헤더 배경을 지정할 수 있습니다. 티에디션 방명록 키로그 위치로그 미디어 로그 보호글 검색 결과 태그 클라우드 본문 본문 제목이 아주 길때 본문 제목이 아주 길때는 타이틀 부가 커지면서 밑부분이 드러나게 됩니다. 권장하는 헤더 배경 크기는 1920x1080 사이즈이며, 그 이상도 괜찮지만 너무 크면 스크롤시 버벅거리므로 신중하게 적용하셔야 할듯 합니다. 더보기
Dynamite - 티스토리용 페럴랙스 스킨 페럴랙스를 기본으로 지원하는 스킨입니다. CSS3으로 구현한 반쪽짜리 페럴랙스가 아닌 자바스크립트로 지원하는 페럴랙스 입니다.페이지 별로 다른 베너가 들어가며, 베너는 모두 페럴랙스 기능이 제공됩니다. 더보기
Hare for Tistory - 가장 빠르고 가벼운 티스토리 반응형 스킨 HTML5와 CSS3 기반으로 만들어진 초경량 스킨입니다. 스킨의 총 용량은 0.27mb로 여태까지 나온 반응형 스킨 중에서는 가장 가볍습니다. 블로그 로딩시간에 신경을 아주 많이 쓰시는 부분이라면 권장해드리는 스킨입니다. 자바스크립트나 제이쿼리등의 스크립트는 일체 적용하지 않아 불 필요한 요청시간을 줄였습니다. 극단적인 경량화를 통해서 정말 빠른 로딩시간을 지원합니다. HTML5 semantic ready semantic 구조로 구성이 되어있어 SEO가 기본지원 됩니다. 미려한 스타일 색 배치를 최대한 절제해서 사용하고, 그리드 레이아웃을 통해서 반응형 스킨을 구성했습니다. 견본 페이지 웹폰트 기본 적용 영문과 한글 웹폰트가 적용 되어있습니다. 기본 한글 웹폰트는 나눔 고딕이며 가독성이 좋습니다. 별도.. 더보기
구글 유입이 폭발하고 있습니다. 사이트 구조만 HTML5의 시맨틱 구조로 전환 했을 뿐인데... 유입 경로 페이지에서 70%는 전부 구글입니다. @_@구글이 HTML5로 구성된 사이트에 보상의 의미로 검색 유입을 약간 더 몰아준다는 말은 암암리에 듣고 있었지만 엄청나네요...체감상 1.5배는 되는 것 같습니다. 헤헤 HTML5 Rocks 라고 구글에서 지원하는 프로잭트가 있습니다. 심심하면 들어가서 둘러보시는 것도 좋습니다. 더보기
스킨 V.2 업데이트 후기 + 디자인 사설 디자인과 속도. 웹 페이지를 만들 때 항상 충돌하게 되는 요소 입니다. 디자인에 신경을 쓰다 보면 웹 페이지 속도가 서서히 감소하는 것이 눈에 보일 것이고, 속도에 신경을 쓰다보면 정말 흰화면에 글자와 사진만 몇 개 떠다니는 수준이 되어버릴 수도 있습니다. 보통 스킨을 제작하게 되면 항상 고민하는 것이 바로 속도와 디자인 입니다. 늘 좀 더 새롭고 좋은 모습을 추구하면서도, 바라는 대로 무턱대고 만들어버리면 속도에 치명적인 영향을 미쳐버리고 맙니다. 그래서 스킨을 처음 만들 때 부터 지금까지도, 좋은 디자인을 가지면서 속도가 빠를 수는 없을까 라는 생각을 늘 상 하곤 했습니다. 이런 고민을 항상 하면서 스킨을 제작하다 보니 이전에는 단순한 구조임에도 속도가 한심할 정도로 느렸지만 지금은 숙련도가 쌓였는지.. 더보기
프로필 페이지 개편 간결하고 깔끔하게 프로필 페이지를 새로 디자인 했습니다. 취미란과 좋아하는것/싫어하는것 란은 따로 만들 계획을 가지고 있으나 귀찮아서 언제할지는 의문이네요 -_-a 더보기
TechAesthetic - 반응형 티스토리 스킨 13년 08.07~ 11/12까지 사용하였던 티스토리 스킨을 다른 티스토리 블로그에도 적용이 가능하게 바꿔서 공개합니다. 초기버전을 올릴까... 라는 생각도 해보았지만 코드도 지저분하고, 반응형도 아니라서 가장 마지막 버전이었던 2.8을 개정해 3으로 업그레이드 하였습니다. 작년 7월 하반기에 작업에 들어가서 약 일주일만에 만들어낸 스킨입니다. 물론 그 이후로 오랜시간동안 수 많은 개선작업을 거쳐와서 현재의 완성도를 가지게 되었습니다. 초창기에는 배경색도 존재하고 그림자도 여러군대 쓰인 모습이었지만 버전업을 거치면서 점점 플랫한 스타일로 바꾸어 나갔습니다. -> 스킨업데이트 내역 기본 바탕이 된 프레임웍은 부트스트랩 2.3.2이며 부트스트랩 2.x버전을 사용했기 때문에 IE7이상의 브라우저에 모두 호환이.. 더보기