본문 바로가기

css3

이글루스 스킨 제작 일지 이글루스 스킨을 제작하면서 만나는 별의 별 개같은 경우를 아주 상세히 열거하고, 어떻게 우회를 했는지도 간략하게 설명해보려 한다. 일단 이글루스는 head 부분을 수정할 수 없기 때문에 meta 태그를 쓸 수가 없고, 따라서 view port를 수정할 수 없기 때문에 반응형 스킨의 적용이 불가능하다. 걍 동명의 티스토리 스킨 scss가 아까워서(사실은 입대 전에 잉여력 폭발해서) 이글루스에 적용시도를 해보았으나 티스토리 만들때 보다 더 작업이 많아졌다 -_- 이글루스는 스킨의 기본폰트가 굴림으로 뜬다 (님들아 자비 좀…) 티스토리는 돋움이 기본 폰트고, 네이버는 돋움 기본에 나눔고딕 설치 되어있을시에는 나눔고딕으로 로드를 하게 설정이 되어있다. 제발 좀… 굴림 좀 쓰지말자. 스킨 곳곳에 em,abbr 같.. 더보기
Dynamite - 페이지 별 페럴랙스 헤더 dynamite 스킨의 최대 특징으로는 페이지 별로 별도의 페럴랙스 헤더 배경을 지정할 수 있습니다. 티에디션 방명록 키로그 위치로그 미디어 로그 보호글 검색 결과 태그 클라우드 본문 본문 제목이 아주 길때 본문 제목이 아주 길때는 타이틀 부가 커지면서 밑부분이 드러나게 됩니다. 권장하는 헤더 배경 크기는 1920x1080 사이즈이며, 그 이상도 괜찮지만 너무 크면 스크롤시 버벅거리므로 신중하게 적용하셔야 할듯 합니다. 더보기
Hare for egloos -가장 빠르고 가볍고 '이쁜' 이글루스 반응형 스킨 본 스킨은 동명의 티스토리 스킨인 Hare for Tistory를 컨버전 하여 이글루스 용으로 변경해 놓은 것 입니다. 티스토리 용은 HTML5와 CSS3 기반으로 되어있으나 이글루스용 스킨은 이글루스의 저질스런 구조에 맞추어 XHTML Transitional 기반으로 변경되었으며, 시멘틱 구조를 지원하지 않기 때문에 SEO 따위는 꿈도 꾸지 않는게 좋습니다. 제 이글루스 블로그에 적용되어 있는 스킨이 바로 이 스킨이며 아주 미려한 디자인과 색상 배치가 적용되어 있습니다. 스킨의 주요 특징으로는 레스터 이미지가 일체 사용되지 않았으며 각종 아이콘은 SVG로 스타일시트를 통해 injection되게 해놓았습니다. 그래서 따로 번거롭게 이미지 파일을 넣는다던가 하는 삽질을 할 필요 없이 원터치로 인스톨이 가능.. 더보기
Dynamite - 티스토리용 페럴랙스 스킨 페럴랙스를 기본으로 지원하는 스킨입니다. CSS3으로 구현한 반쪽짜리 페럴랙스가 아닌 자바스크립트로 지원하는 페럴랙스 입니다.페이지 별로 다른 베너가 들어가며, 베너는 모두 페럴랙스 기능이 제공됩니다. 더보기
Hare for Tistory - 가장 빠르고 가벼운 티스토리 반응형 스킨 HTML5와 CSS3 기반으로 만들어진 초경량 스킨입니다. 스킨의 총 용량은 0.27mb로 여태까지 나온 반응형 스킨 중에서는 가장 가볍습니다. 블로그 로딩시간에 신경을 아주 많이 쓰시는 부분이라면 권장해드리는 스킨입니다. 자바스크립트나 제이쿼리등의 스크립트는 일체 적용하지 않아 불 필요한 요청시간을 줄였습니다. 극단적인 경량화를 통해서 정말 빠른 로딩시간을 지원합니다. HTML5 semantic ready semantic 구조로 구성이 되어있어 SEO가 기본지원 됩니다. 미려한 스타일 색 배치를 최대한 절제해서 사용하고, 그리드 레이아웃을 통해서 반응형 스킨을 구성했습니다. 견본 페이지 웹폰트 기본 적용 영문과 한글 웹폰트가 적용 되어있습니다. 기본 한글 웹폰트는 나눔 고딕이며 가독성이 좋습니다. 별도.. 더보기
스킨 V.2 업데이트 후기 + 디자인 사설 디자인과 속도. 웹 페이지를 만들 때 항상 충돌하게 되는 요소 입니다. 디자인에 신경을 쓰다 보면 웹 페이지 속도가 서서히 감소하는 것이 눈에 보일 것이고, 속도에 신경을 쓰다보면 정말 흰화면에 글자와 사진만 몇 개 떠다니는 수준이 되어버릴 수도 있습니다. 보통 스킨을 제작하게 되면 항상 고민하는 것이 바로 속도와 디자인 입니다. 늘 좀 더 새롭고 좋은 모습을 추구하면서도, 바라는 대로 무턱대고 만들어버리면 속도에 치명적인 영향을 미쳐버리고 맙니다. 그래서 스킨을 처음 만들 때 부터 지금까지도, 좋은 디자인을 가지면서 속도가 빠를 수는 없을까 라는 생각을 늘 상 하곤 했습니다. 이런 고민을 항상 하면서 스킨을 제작하다 보니 이전에는 단순한 구조임에도 속도가 한심할 정도로 느렸지만 지금은 숙련도가 쌓였는지.. 더보기
게임 카테고리 스킨 추가 압축 버전을 끝으로 '추가 스킨 제작은 끝~!' 이라고 선언했지만 사이트 몇 군데 돌아다니다가 본 마음에 드는 스타일 몇가지와, 헤더를 세로로 만들어보고 싶어 후딱 작업했습니다. 미디어 쿼리는 이론상으로 세로 해상도도 적용되는 걸로 알고 있어서 시험 삼아 적용 해보았는데, 실제로 세로 해상도 768px 이하로는 헤더가 사라집니다. 더보기
프로필 페이지 개편 간결하고 깔끔하게 프로필 페이지를 새로 디자인 했습니다. 취미란과 좋아하는것/싫어하는것 란은 따로 만들 계획을 가지고 있으나 귀찮아서 언제할지는 의문이네요 -_-a 더보기
TechAesthetic - 반응형 티스토리 스킨 13년 08.07~ 11/12까지 사용하였던 티스토리 스킨을 다른 티스토리 블로그에도 적용이 가능하게 바꿔서 공개합니다. 초기버전을 올릴까... 라는 생각도 해보았지만 코드도 지저분하고, 반응형도 아니라서 가장 마지막 버전이었던 2.8을 개정해 3으로 업그레이드 하였습니다. 작년 7월 하반기에 작업에 들어가서 약 일주일만에 만들어낸 스킨입니다. 물론 그 이후로 오랜시간동안 수 많은 개선작업을 거쳐와서 현재의 완성도를 가지게 되었습니다. 초창기에는 배경색도 존재하고 그림자도 여러군대 쓰인 모습이었지만 버전업을 거치면서 점점 플랫한 스타일로 바꾸어 나갔습니다. -> 스킨업데이트 내역 기본 바탕이 된 프레임웍은 부트스트랩 2.3.2이며 부트스트랩 2.x버전을 사용했기 때문에 IE7이상의 브라우저에 모두 호환이.. 더보기
iOS7 스타일 시계 위젯 HTML5와 CSS3, jQuery만 이용해서 만들었습니다. 이미지 파일이 하나도 들어가 있지 않아 저사양 휴대폰에서도 부담없이 돌아갑니다. 랜더링 방식이라 크기를 아무리 크게 만들거나 작게 만들어도 깨지거나 뭉개지지 않습니다. 달력이랑 크기를 맞춰놓았으며 패드에서 사용하실 분들은 zoom 태그를 지워주시면 됩니다. HTML5 마크업 호환성 검사 통과, CSS3 마크업 검사 통과 제작 시간 약 2시간 기부 감사합니다. 더보기

티스토리툴바