본문 바로가기

스킨

오늘. 230.6초 찍음 (ver 1.2, 최장기록 by Ch. 더이상 수정할 마음 없음) 속성(速成)으로 상실경 스킨을 하루만에 기초공사 다했습니다. 오늘안에 완성하면 이틀안에 만드는 거겠군요. 기존의 스킨은 너무 구려서 ㅠㅠ 본진 스킨의 HTML을 복사해와서 필요없는 부분을 조금 가지치기 한 뒤 CSS만 새로 짰다죠. 이제 이전 스킨에서.... 잠깐, 이전 스킨 날라갔... 저장하고 불러와서 필수 스타일 부분 가져와서 ... 같은 짓을 하다보면 완성될 듯 합니다. 이걸 만들고 보니 어떻게 만드는게 빠르고 편한가에 대해서 좀더 알게 되는 것 같아요. 내일 개강... 책 준비해야 하는데... 첫날부터 책 안들고 가면 안되겠죠;; 어떻게 준비하는건지 알아봐야겠어요. 귀찮은데... ㅋㅋㅋㅋㅋㅋ 아 맞다...... .. 더보기
노트에 그려봤습니다. 오른쪽 아래나 왼쪽 위의 이상한 그림들은 무시하시고요. 상단을 삘받아서 해두고보니 어떻게 이을지 감이 안잡히길래, 한번 그려봤습니다. 이거라면 괜찮지 않을까 싶네요... TisWorld의 주안점은 「획일화」입니다. 그러면서도 배경 이미지만으로 깔끔하게 변경, 뭐 그런게 목표죠. 댓글란은 왠지 페이스북이 생각나지만 색이 다르도록... 이라는 느낌으로 생각중입니다. 이름에서 알 수 있듯이, 모티브는 CyWorld. 이 그림을 참고해서 HTML부터 구조 짠 다음, 기존의 건 거의 다 버리고 새로 만들어야 할 것 같네요. 구조는 전혀 생각 안해봐서... 스킨 만들기 강좌랑 같이해도 될 것 같기도 하고... 그런데 생각해보면, 그전에 카페에 게임툴 사용 강좌를 먼저 만들어서 올려야하네요. 두고두고 만들어야겠어요... 더보기
2. HTML & CSS, 어떻게 하지? (1/2) - 어떻게든 뭐든 만들어보자 *HTML과 CSS의 작성법 및 주요 태그를 다룰것입니다. 아시는 분은 넘어가주세요 티스토리 스킨은 일반적인 웹문서와 같이 정해진 언어(HTML,CSS)로 쓰여집니다. 언어라고 적어뒀지만 사실은 문법이에요, 문법. HTML html 문서에서는 문서의 실질적인 내용이 들어있습니다. 그리고, 이 문서는 "태그"라는 것들로 이루어져있죠. 태그 TAG 홀로 쓰이는 태그와 열고 닫는 태그 두종류가 있습니다. 보시다시피 로 둘러싸여 있으며, 사이에 그 태그의 명칭이 나옵니다. 여는 태그와 닫는 태그로 이루어진 태그는 닫는 태그의 의 어떤 태그들이 있는지는 차차 가면서 살펴보도록 하고요, 태그에 속성을 부여해보도록 합니다. * w3school에서 검색해봐도 됩니다. 단, 예제들이 후지다는 말을 본 적이 있어서... .. 더보기
1. 개요 - 배워야 할 것들 - 어떻게든 뭐든 만들어보자 스킨을 만들기 전에 일단 티스토리의 스킨이 전체적으로 어떻게 움직이는지 살펴봅시다. ( 너무 뻔한 내용들을 다루고 있으니까 넘어가셔도 됩니다 - 1 ) 대략 이렇습니다. 물론 정말 이런지는 저도 모르겠지만, 스킨을 만들 때 필요한건 이정도면 충분할 겁니다. 아마도요. 으으... 사용자가 블로그에 어떤 페이지를 요청합니다. 티스토리가 skin.html (실질적 내용이 있는 문서) 와 style.css (디자인이 담긴 문서) 에서 필요한 내용을 넣고, 필요없는 내용은 빼고 해서 수정한 다음 사용자의 웹브라우저에 파일을 보내줍니다. 이때 티스토리가 바꿔야될 부분을 인식하는데 치환자가 사용됩니다. ex) [＃＃_title_＃＃] → 그 블로그의 이름 ex2) 〈s_article_rep〉&〈/s_article_r.. 더보기
0. 소개 - 어떻게든 뭐든 만들어보자 Ch.입니다. 웹표준이고 나발이고 물론 제대로된 스킨을 제대로 만들 수 있지는 않지만 현재 쓰는 스킨처럼 엉성하게나마 만들줄은 압니다. 근데 스킨 조작이 어렵다는 분들이 있습니다. 물론 제대로 전문가처럼 만드려면 많은 노력과 능력이 필요합니다. 하지만 저처럼 엉성하게나마 만드는 수준 정도라면, 또한 수정하는 정도라면 그다지 어렵지 않습니다. 그래서 써보려고 합니다. 처음부터 말이죠. 물론 저부터가 실력이 전문가고 나발이고 웹표준이고 뭐고 하는 수준이라 정말 제대로 된걸 바라신다면 다른데로 가시는 게 맞습니다. 하여튼 할 수 있는대로 해보려고 합니다. 비공개로 돌리는 건 더이상 하지 않으려구요. ㅠㅠ 아마 해야될 건 html,css,티스토리 스킨의 대략적인 동작 방식, 직접 제작해보기, 뭐 이렇게... 해.. 더보기
MaSiZa v0.3 일단은 완성입니다. 안되어 있는 부분도 많지만... 버전 0.3이니, 그러려니 하시면 됩니다. 현재 (2012.01.14) 창작관에 적용되어 있습니다. CC-BY-NC-SA by Ch. (softblow.tistory.com) (저작자표시 - 비영리 - 동일조건변경허락) *직접 css를 읽어서 수정해야하는 거친 스킨입니다. 다운로드 전에 주의해주세요. *최적화고 개뿔이고 모르는 막만들어진(ㅠㅠ) 스킨입니다. html을 다른 스킨에서 복붙한 관계로... *아직 스킨위자드 같은건 지원 안합니다. *티스토리 툴바의 위치를 약간 강제조정합니다. *사이드바 객체 하나의 width는 200입니다. *왠만한 문의는 받지 않습니다. 알아서 읽어서 수정합시다. 막만든거라... IE6~IE8에서는 사이드바 영역을 제외한 .. 더보기
컨스트럭트 2로 HTML5 티스토리 스킨 만들기 ... HTML 5니까, HTML이니까 될줄 알고 시도해봤습니다. 엥? 자바스크립트 파일들의 경로만 바꾸니 안되는군요. 한참 뒤적거리다가 겨우 알아냈는데, 파이어폭스 웹 콘솔에서 알아낸 이유라는 것은... 어이없게도 이미지 경로를 못찾아서 (...) 생각해보면 당연한게, 티스토리의 치환자는 images 폴더의 하위 파일에까지 적용되지는 않으니까요. 해결책으로, c2runtime.js 파일에서 images/ 에 해당하는 구문을 모두 ./images/로 바꾸고 skin.html 자체에 포함시켜버리는 방법이 있더군요. 그 결과물은 아래 링크를 들어가보심이 옳겠죠. 스킨 테스트 공간 그렇지만 스크린샷도 박아두겠스빈다. *생각해보니, HTML5로 만들면서 캔버스 안쓰고 이미지로 만들면 그게 어디 HTML5인가 하.. 더보기
블로그에서 CSS3 Transition이 사라졌습니다. ㅠㅠ 스킨을 맹글다가 테스트용 블로그인줄 알고 실수로 저장했지 뭐에요. 다행이도 스킨을 저장해둔 게 있어서 불러왔는데, 그게 CSS3 Transition을 추가하기 전의 것이더군요. 흑흑 새 스킨은 거의 완성단계에 있는데... 어떻게 표현할지가 막막하네요. 하하하하ㅏ핳ㅎ 더보기

티스토리툴바