원래 사용하던 스킨은 만들고 보니 너무 큐티한 디자인이라 상당히 부담스러웠었습니다. 그래서 "본문의 배경은 반드시 흰색"이라는 전제하에 스킨을 만들어봤습니다. 지난번 스킨을 한번 만들어봤더니 이번에는 시간도 더 적게 든 것 같습니다. 하지만 그 시간이 전부 버그 잡는데 들었다는 걸 생각하면 세심함이 부족한 것 같아 한숨이 나옵니다.
일단 디자인은 몇시간 걸리지 않았습니다. 기본적인 구조를 html로 작성하는데도 시간이 얼마 걸리지 않았구요. 하지만 역시 문제는 css를 작성하는데 너무 오래 걸렸다는 것입니다. 하루가 넘도록 css 작성하고 버그 수정했네요.
이번 스킨의 주목할 만한 점은 "상단의 탭"입니다. <body id>를 이용해 블로그상의 현재 위치에 따라 탭이 변경됩니다. 또, 클릭이펙트를 아주 간단하게 소개한 글이 있어서 탭이나 검색 버튼에 적용해 봤습니다. 결과는 만족스럽네요.
다음줄의 서브탭은 자주 등록하는 포스트나 개인적으로 좋아하는 주제에 대해 링크를 걸었습니다. 전에 쓰던 스킨은 블로그에서 로그인과 글쓰기 아이콘이 없어서, 단축키로 로그인한 뒤 관리센터에 들어가 글을 써야 한다는 불편함이 있었기에 이번에는 관리자 메뉴를 만들고 그 안에 아이콘을 집어 넣었습니다.
가장 고생했던 두가지 입니다. "다음뷰 추천 버튼"과 "댓글 창"을 만드는데 고생했습니다. 우선 다음뷰 추천 버튼은 이전에 사용하던 코드가 어디가 엉켰는지 작동하지 않아 새로운 방식을 서너개쯤 적용해 보고 죄다 실패해서 다시 처음으로 돌아왔습니다. 역시 쓰던 코드가 가장 손쉽군요 ㅜㅜ 다음뷰 추천버튼의 이동에 관해 명확하게 설명한 글이 조금은 있었던게 도움이 됐습니다.
또 댓글창은 모두 이미지로 구현하느라 고생 좀 했습니다. 원래 border-radius를 이용해 적용하려고 했지만, IE에서는 적용되지 않더군요. 우회하는 방법이 있다고는 하는데 너무 복잡해지고 불편해서 막무가내로 이미지로 만들었습니다. 나중에 방법이 생각나면 다시 border를 이용해서 만들어 봐야겠어요.
사용하지 않는 태그로그, 미디어로그, 위치로그 등은 하나도 작성하지 않았습니다. 사이드 바에서도 제가 딱 사용할 것들만 작성해 그런지 시간이 조금 단축됐습니다. 파일을 공개할까 생각했지만 워낙 두서없이 작성한 코드라 부끄럽기도 해서 그냥 안하기로 했습니다. 뭐... 어차피 우클릭 소스보기로 보시는 분들도 있으시겠지만요....
백그라운드 이미지 이동에 관한 코드를 배웠기 때문에, 생동감있는 버튼을 만들었다고 당시에는 생각했습니다. 그러다 보니 맨 처음 만들었던 스킨보다 더 무거워졌고, 더 많은 이미지를 사용했습니다. 심지어 댓글창도 이미지처리했기 때문에 댓글하나만 해도 엄청난 공간을 차지했습니다.
다행이도 그나마 색상에 대한 구성은 괜찮은 편이라고 자평합니다. ㅎ
이 역시 부끄럽지만 기록을 위해 파일을 올려둡니다.
100726 xor_VioletTab.zip [다운로드]
일단 디자인은 몇시간 걸리지 않았습니다. 기본적인 구조를 html로 작성하는데도 시간이 얼마 걸리지 않았구요. 하지만 역시 문제는 css를 작성하는데 너무 오래 걸렸다는 것입니다. 하루가 넘도록 css 작성하고 버그 수정했네요.
이번 스킨의 주목할 만한 점은 "상단의 탭"입니다. <body id>를 이용해 블로그상의 현재 위치에 따라 탭이 변경됩니다. 또, 클릭이펙트를 아주 간단하게 소개한 글이 있어서 탭이나 검색 버튼에 적용해 봤습니다. 결과는 만족스럽네요.
다음줄의 서브탭은 자주 등록하는 포스트나 개인적으로 좋아하는 주제에 대해 링크를 걸었습니다. 전에 쓰던 스킨은 블로그에서 로그인과 글쓰기 아이콘이 없어서, 단축키로 로그인한 뒤 관리센터에 들어가 글을 써야 한다는 불편함이 있었기에 이번에는 관리자 메뉴를 만들고 그 안에 아이콘을 집어 넣었습니다.
가장 고생했던 두가지 입니다. "다음뷰 추천 버튼"과 "댓글 창"을 만드는데 고생했습니다. 우선 다음뷰 추천 버튼은 이전에 사용하던 코드가 어디가 엉켰는지 작동하지 않아 새로운 방식을 서너개쯤 적용해 보고 죄다 실패해서 다시 처음으로 돌아왔습니다. 역시 쓰던 코드가 가장 손쉽군요 ㅜㅜ 다음뷰 추천버튼의 이동에 관해 명확하게 설명한 글이 조금은 있었던게 도움이 됐습니다.
또 댓글창은 모두 이미지로 구현하느라 고생 좀 했습니다. 원래 border-radius를 이용해 적용하려고 했지만, IE에서는 적용되지 않더군요. 우회하는 방법이 있다고는 하는데 너무 복잡해지고 불편해서 막무가내로 이미지로 만들었습니다. 나중에 방법이 생각나면 다시 border를 이용해서 만들어 봐야겠어요.
사용하지 않는 태그로그, 미디어로그, 위치로그 등은 하나도 작성하지 않았습니다. 사이드 바에서도 제가 딱 사용할 것들만 작성해 그런지 시간이 조금 단축됐습니다. 파일을 공개할까 생각했지만 워낙 두서없이 작성한 코드라 부끄럽기도 해서 그냥 안하기로 했습니다. 뭐... 어차피 우클릭 소스보기로 보시는 분들도 있으시겠지만요....
140831 내용추가
2010년 7월에 만든 스킨입니다. 쓸데없는 코드사용이 절정에 달했던 스킨이기도 합니다.백그라운드 이미지 이동에 관한 코드를 배웠기 때문에, 생동감있는 버튼을 만들었다고 당시에는 생각했습니다. 그러다 보니 맨 처음 만들었던 스킨보다 더 무거워졌고, 더 많은 이미지를 사용했습니다. 심지어 댓글창도 이미지처리했기 때문에 댓글하나만 해도 엄청난 공간을 차지했습니다.
다행이도 그나마 색상에 대한 구성은 괜찮은 편이라고 자평합니다. ㅎ
이 역시 부끄럽지만 기록을 위해 파일을 올려둡니다.
100726 xor_VioletTab.zip [다운로드]
