본문 바로가기

스킨

IE7,8 어거지 지원 사이드바고 탑바고 전부다 안보이지만.... 뭐 포스팅 내용만 보이면 장땡 아니겠습니까! 하하하핳한달 2만명중에서 4천명은 결코 무시할 숫자가 아니라는 것을 뼈저리게 느끼고 있습니다.특히나 IE왕국인 한국에서는... -_-; - 이해 안가는 문제#1 - 디스커스가 안뜹니다. 얘내들 크로스 브라우징 지원할텐데... 그냥 쿨하게 포기 인가 -ㅅ-- 이해 안가는 문제#2 - 오프스크린 메뉴만 꺼버리니 의외로 문제 없이 블로그가 잘 돌아간다 (IE8 지원 완전 포기요 ㅇㅇ 외치던 파운데이션 제작팀은 츤데래 였던 것인가?!) 더보기
스킨 검색 목록 수정 검색목록 수정했습니다. 3단 레이아웃 적용, 2칼럼 목록에서 1단으로 다시 변경, 카테고리 표시, 목록 번호 다시 표시 됩니다. 더보기
스킨 v2.0 업데이트 겉모습으로는 달라진거 하나도 없지만(상단 로고 뺴고요) 코드를 엄청 갈아 엎었습니다. 스크립트 위치도 바꾸었네요. 그리고 엑수시아님의 TS-plugin(http://zion437.tistory.com/363)을 설치했습니다. 현재 이글을 보시면 사이드바가 왼쪽에 가있습니다. 원래 제 블로그는 사이드바가 오른쪽에 가있죠 ㅎㅎ 물론 로딩 되기전에 바뀌어서 보이는게 정상이긴 하지만 HTML구조가 하도 복잡해서 CSS전환이 빠르지 못하네요 -_-; 오프켄버스 매뉴때문에 이너 컨테이너안에 내용물이 들어가고 아웃 컨테이너에 오프스크린용 메뉴와 버튼이 들어가는 구조이다보니...ㅠㅠ 그래서 페이지 로딩도중에 번쩍!(레드썬) 하고 바뀝니다. ㅋㅋ 로딩바를 넣어볼까 라는 생각도 해보았지만 로딩바를 넣으면 체감속도가 오히려.. 더보기
Meltdown 이글루스 스킨 v2 업데이트 내역 거의 완성되었습니다. 자잘하게 수정해야 될부분은 있는데 크게 문제시 되진 않고요, 일부 이글루스 기본 스타일 요소가 어느정도 남아있긴하지만 더 이상은 손 안댈 생각입니다. 관리페이지에서 보면 사이드바가 옆말고도 본문의 상단과 하단에 추가 되었습니다. 와이드 위젯은 상단이나 하단만 쓸수 잇는 병신력 충만한 이글루스 구조때문에 이렇게 만들었습니다. 우선 변경사항부터 알아보겠습니다. 사이드바에 최상단 로고가 이미지 파일로 바뀌었습니다. 기존의 로고는 CSS3 transform속성인 screw를 사용해서 기울인 글자를 구현했지만 이게 브라우저나 운영체제를 심하게 타서 이미지 파일로 교체하였습니다. 기본이미지 크기는 가로 780px이미지 이며 레티나 디스플레이를 위해서 @2x형식으로 축소시켜서 사용중입니다. 그 .. 더보기
Burarikun - 루리웹 마이피용 CSS3 스타일 제가 이전에 만들었던 마이피용 CSS3 스타일 입니다. 딱히 베포를 고려하고 만든건 아닌데, 막상 마이피 활성화시켜 놓고 보니 쓸일이 거의 없어서 저보다 활발하게 운영하시는 분들이 쓰시는게 더 좋을것 같아 CSS 소스를 공개합니다. 상단배경에 들어오는 부분이 화면 가장 상단에 위치하며 고정되어 있습니다. 기본 루리웹 툴바나 다음 툴바는 아래 위치해서 안 보입니다. 마이피 관리에서 메인 인사말 부분은 전체글 보기시 게시글 맨위에 나타나는 부분입니다. 좌측배경은 이자리에 위치하게 됩니다. 위젯 코드를 넣으면 여기 배치가 되며, 자동으로 왼쪽 정렬이 됩니다. 관리자 뷰에서는 메뉴가 이렇게 뜹니다. 비회원 뷰에서는 메뉴가 아래로 밀리지 않으니 크게 신경안쓰셔도 될 부분입니다. 스타일 시트에서 주의 하셔야 할부분.. 더보기
이글루스 스킨 제작 후기 티스토리 스킨 제작은 너무 번거롭고 힘든작업이라서 매번 하지는 못합니다. 그러나 스킨 변경이 가능한 몇몇 사이트들은 티스토리 스킨 변경하는데 비해서 아주 적은 노력만으로도 스킨을 바꿀수 있습니다. 물론 제약이 티스토리보다 커서 완전히 뜯어고치기는 힘들지만요. 실력 갈고닦는 개념으로 루리웹 마이피 스킨제작에 이어서 이글루스 스킨제작에 도전했습니다. 이전 마이피는 아무 계획없이 순수 CSS만으로 삽질했던데 비해서 이번 것은 PURE 프레임워크를 기반으로 만들어서 금방 만들었습니다. 사실 이번에 티스토리 스킨 바꾸면서 사용하며 되게 만족한 파운데이션이나 스켈레톤, HTML5 보일러플레이트, 그럼비, 그리고 새로나온 부트스트랩3도 고려를 해보았습니다. 제가 방금 말한 5개 프레임웍의 공통점이 뭔지 아시나요? 네.. 더보기
iOS 테마가이드 - 섬머보드와 윈터보드의 차이점은 무엇인가? 섬머보드의 스크린샷. 별도의 아이콘은 없고 설정앱에 포함되는 모습이었습니다. 초창기 시디아가 열렸을때 처음으로 iOS에 테마를 가능하게 해주었던 트윅이 섬머보드(Summer Board)입니다. 섬머보드는 스프링보드가 로드 될때 화면상에 나타나는 이미지를 덮어 씌우는 역할을 합니다. 그래서 화면에 보이는 이미지의 경로만 알면 바로 적용 가능한 것이 섬머보드 입니다. 보통 섬머 보드로 구현하는 테마의 형태들이 iNav 형태나 한 줄에 한 가지 아이콘이 꽉꽉 채우는 형태의 테마가 있습니다. 대표적인 섬머보드 태마 - iNav 테마 이미지를 원본 그대로 아이콘화 할 수 있기 때문에 적은 노력을 들이고도 눈에 보이는 모양을 그대로 태마로 구현할수 있다는 장점이 있습니다. 아이콘 크기에 제한이 없어 약간의 공을 들.. 더보기
Prototype 스킨 제작 후기 초기에 블로그를 오픈할때 사용하였던 Cognoscenti 스킨은 제가 직접 하드 코딩을 하긴 했지만 여러가지 삐걱거림과 알 수없는 문제들에 시달렸습니다. 속도면에서는 일반 티스토리 스킨에 비해서 이미지를 거의 쓰지 않았기 떄문에 빨랐지만 코딩능력의 부족으로 꽤 볼품 없는 스킨 인것은 부정할수 없습니다. 스킨 제작을 위해서 열심히 구글링과 공부를 하다보니 프레임웍이라는 것을 알게 되었습니다. 기본적으로 사이트에서 사용되는 요소들을 미리 만들어 놓고 이를 활용하여 편하게 웹페이지를 제작할수 있게 하는 도구 입니다. 그래서 무슨 프레임 웍을 쓸까 알아보던중 선택한 것이 부트스트랩 이었습니다. 물론 여러가지 프레임 웍이 웹상에 있지만 부트스트랩으로 만들어진 트위터와 GitHub를 보면서 "그래도 많이 쓰는게 좋.. 더보기
Ver 1.1로 업글 + 속도 최적화 1.1 업데이트 - 페이지별 스타일을 추가했습니다. 태그로그/로컬로그/방명록/메인화면/게시글/미디어로그(현재는 아무것도 없습니다.)/키로그에 따로 배경스타일을 추가했습니다. 직접들어가서 한번보세요 ^^ 맥용 이미지 최적화 어플인 Image Optim으로 전체 이미지를 60%정도 압축했습니다. 온라인 YUI 압축기로 자바스크립트 파일을 하나로 합쳤습니다. gZip 파일을 직접 쓰고 싶긴한데 이게 서버단에서 php로 읽어들여야 하는 거라서 티스토리는 그게 불가능하기 때문에 포기입니다. gZip쓰면 속도가 3배는 빨라질텐데..... 쩝. CSS파일을 하나로 합쳤습니다. 코드 수정용으로는 비압축을 쓸것이지만 실사용으로는 압축파일을 사용합니다. 더불어 HTML도 압축을 했습니다. 이전에는 Quote까지 다 지워버.. 더보기
Introducing Prototype 제 3번째 자작스킨인 Prototype을 공개합니다. 지금 부터 새 스킨의 주요 기능을 설명드리겠습니다. HTML5 시멘틱 구조 도입 시멘틱 구조를 통해서 SEO에 최적화 되어있습니다. 이전스킨도 HTML5 기반이었지만 소심하게 쓴것에 비해서 이번에는 Section, Article 시멘틱 태그를 적극활용했습니다. HTML5, CSS3 웹 표준 검사 통과 본 스킨의 HTML마크업과 CSS스타일링은 W3C 웹표준을 엄격히 준수합니다. Mobile-First 티스토리 최초의 모바일 퍼스트 스킨입니다. 구성요소를 크기만 줄여서 재활용하는 대신 각 스크린 사이즈에 맞는 요소들을 따로 만들어 더 쾌적한 사용환경을 제공합니다. *모바일퍼스트: 웹페이지를 제작할때 PC버전의 크기를 줄이는 기존 방식 대신 반대로 모바일.. 더보기

티스토리툴바