DesignMyself


'분류 전체보기'에 해당되는 글 9건

  1. 2008.01.10 [Lazylog ] 스킨을 배포합니다~ :: 버그픽스 08/01/14 63
  2. 2007.12.20 [ PinkPunkPianoStar ] 스킨을 배포합니다~ 20
  3. 2007.11.26 design tip. 플릭커 이미지 사용하기. 1
  4. 2007.11.05 css tip. FireBug 사용하기. 19
  5. 2007.10.16 [ crystalBlue 2nd ] 배포합니다~ 19
  6. 2007.10.15 [ crystalBlue 2nd ] 스킨을 수정해 봅시다. - 02 - 3
  7. 2007.10.03 bookskin을 공개합니다. 12
  8. 2007.09.26 [ crystalBlue 2nd ] 스킨을 수정해 봅시다. - 01 - 18
  9. 2007.09.20 CrystalBlue 스킨을 공개합니다. 16
사용자 삽입 이미지
제 개인 블로그에 쓰던 스킨을 배포용으로 만들었습니다.
세가지 색상이 있으니 취향대로 골라쓰시면 되겠습니다.

태터툴즈 1.x 나 티스토리 사용자분은 스킨 폴더 하위의 "for Tistory, Tattertools"폴더에 들어가 있는 skin.html을 밖으로 덮어 씌워주세요.
그냥 쓰시면 textcubve에 추가된 커버 페이지와 리스트 페이지가 출력되서 스킨이 깨지니 Tistory나 Tattertools 사용자 분들은 꼭 skin.html 파일을 교체해주세요.

아직 생활이 여유롭고 즐겁던때 Tattertools 1.0 버전으로 올라가면서 만든, 개인적으로 많은 의미가 있는 스킨입니다. 신경을 쓴답시고 어찌어찌하다보니 배포가 많이 늦어졌습니다. 아직도 이걸 찾으시는 분들이 있을지 모르겟네요. 여하튼, 예뻐해 주세요. 스킨에 제 애정이 담겨있습니다. :)

1월 14일 오후 7시 이전에 받으신분들은 다시 받아서 적용해주세요.
아래와 같은 버그들이 수정되었습니다.


- IE6에서 댓글 입력창이 펼쳐지지 않던 문제.
- 태그 클라우드와 키워드의 링크가 서로 바뀌어있던 문제.
   ** 티스토리의 경우 키워드기능이 없어서 링크가 작동되지 않으니 참고하세요.


Lazylog Skin Download

사용자 삽입 이미지

textcube 1.5 버전 기반으로 만들어진 텍스트큐브용 스킨입니다.

이미지 사용을 줄이고 텍스트로 구성한 1단 스킨입니다. 세가지 색상으로 구성되어있고 아래 다운로드 링크에 모두 포함되어있습니다.

태터툴즈1.0x나 티스토리에서 사용할때에는 cover 페이지와 tc에서 추가된 trackback list등을 삭제하셔야 제대로된 화면을 보실수 있습니다.
태터툴즈 1.x 나 티스토리 사용자분은 스킨 폴더 하위의 "for TT1.x, Tistory"폴더에 들어가 있는 skin.html을 기존의 skin.html을 대체하여 사용하시면 큰문제 없이 사용하실수 있습니다.

PinkPianoPunkStar 스킨의 가로 사이즈 조절 방법에 대해서 다음 포스팅으로 정리할 예정이니 가로사이즈를 수정하고 싶으신분들은 참고하세요.

스킨에 버그나 문의 사항이 있으면 댓글로 남겨주세요~

PinkPunkPianoStar Skin Download

플릭커(www.flickr.com)는 온라인 사진 공유 커뮤니티로, 전 세계인들이 올리는 엄청난 양의 사진 데이타를 가지고 있는 사이트입니다. 방대한 양을 자랑하는 사이트 답게 둘러보다 보면 "지난 1분 동안 2,470장의 사진이 업로드 되었습니다." 같은 문구도 볼수도 있습니다. 정말 어마어마하지요.

자, 우리가 플릭커를 중요하게 봐야할건 저런 엄청난 데이타 양과 함께 이미지를 검색할때 CCL 옵션을 지원한다는 것입니다. 고급 검색 옵션에 CCL 라이센스 관련 조항이 있어 개인 블로그에 쓸 용도뿐만이 아닌 상업적인 이용에 무리가 없고 2차 저작물을 배포까지할수 있는 이미지를 검색할수 있습니다.

그럼 한번 블로그 스킨에 많이 쓰일법한 구름 사진을 한번 찾아보도록 하지요.
www.flickr.com에 접속한뒤 "cloud"로 검색을 합니다.
한국어 사이트가 서비스되고 있긴 하지만 영어권에서 강세인 사이트이기 때문에 검색어는 영어로 하는 편의 결과물이 훨씬 좋습니다.

사용자 삽입 이미지

결과물이 뿌려지는 화면에서 고급 검색 링크가 나타납니다. 클릭해서 고급 검색 옵션으로 넘어갑니다.
평소 검색엔진에서 보이는 모습과 대동소이한 고급검색 옵션들이 펼쳐집니다. 맨밑에 보면 CCL관련 옵션들이 보여집니다.

사용자 삽입 이미지

개인 용도로 사용하실 분들은 "Creative Commons 사용권이 있는 사진 내에서만 검색합니다." 옵션만 체크하고 검색하셔도 됩니다만, 저같은 경우는 배포용 스킨에도 쓰고 있기 떄문에, 또한 회사원 신분으로 쓰는 이미지이기도 해서 상업성을 띄고 있다고 할수도 있기 때문에 모든 옵션을 키고 검색합니다.



사용자 삽입 이미지

짜잔!


이렇게 CCL이 적용된 구름 사진을 293,608장 (대단하죠@_@) 검색할수 있습니다.
이제 적당한 이미지를 찾아낸후 스킨에 맞게 수정하고 사용하면됩니다.


사용자 삽입 이미지

중요합니다.


여기서 중요!
이렇게 검색한 이미지를 사용한 결과물에는 원저작자를 표기해야합니다.
저같은 경우 스킨에 Background Images from pbyrne 같은 형식으로 표기하고 있습니다.

또한 CCL이 걸린 재료로 저작물을 만들었다면 배포시에 저작자표시-동일조건변경허락하에만 배포하실수 있습니다.  (위와 같은 방법으로 검색한 이미지의 거의 대부분이 저작자표시-동일조건변경허락 조항을 따르지만 이미지에 따라 다른 라이센스 조약이 걸려있는 경우도 있을수 있으니 사용전에 확인이 필요합니다!)



사실, 외국계 서비스이기도 하고 대부분의 사용자가 개인이기 때문에 저런 조항들을 지키지 않더라도 큰문제가 없을수 있습니다. 대리인을 고용해서 고소한다던가 하는 일은 아마 없을지도 모릅니다.
하지만 CCL이란게 저작물을 좀 더 쉽게 이용할수 있고 바람직하게 공유해보자란 취지로 생긴 약속입니다.
이게 있기때문에 우리가 좋은 이미지를 손쉽게 검색해서 사용할수 있는것이니 꼭 지키도록 합시다.
저작권을 표기하는 것, 배포시에 CCL을 따르는것, 그렇게 어려운 일이 아니잖아요 :)

xhtml 코딩 작업물의 구조를 알아보기 쉽게 도와주는 파이어폭스의 확장기능인 파이어버그에 대해서 알아보겠습니다.

파이어버그를 쓰면 블로그 본문의 글자를 바꾸고 싶은데 어디를 바꿔야하는지, 제목의 색은 어디서 바꿔야할지, 본문의 넓이는 어디를 수정해야하는지 쉽게 알수있습니다. 일일이 구조를 확인하고 css파일을 뒤질 필요가 없이 간단하게 수정할 위치를 파악할수 있습니다.

일단은 파이어폭스의 최신 버전과 파이어버그를 다운로드 받아 설치하도록 합시다.

사용자 삽입 이미지
설치한 파이어폭스를 실행하고 구조를 파악하고 싶은 블로그로 이동한뒤
오른쪽 아래에 보이는 초록색 버튼을 더블크릭하면 파이어버그를 활성화 시킬수 있습니다.
메뉴가 꽤 많이 보이는데 우리에게 필요한건 간단한것 몇개 뿐이니 벌써부터 복잡해할 필요없어요.

파이어버그에 보이는 메뉴중 Inspect를 선택하면 마우스를 화면에 옮길때마다 푸른색 박스가 따라다니게 됩니다. 원하는 부분을 선택하면 해당 부분이 어떤 HTML로 구성되어있고 어떤 style로 디자인되어있는지 아래에 나타나게 됩니다.

사용자 삽입 이미지

요렇게~


우리가 필요로 하는건 Style탭에 나오는 정보들입니다.
'파피용.'이란 제목 부분에 어떤 CSS 속성들이 적용되었는지 어떤 css 파일의 몇번째 줄에 표기되어있는지 정보가 다 나오고 있습니다. 원하는 부분을 좀더 쉽고 빠르게 찾아내어 수정할수 있다는 얘기지요 :)

예시에선 마우스가 오버된 상황이라 a:hover 속성이 적용되어있으며, a:link, a:visited 속성이 덮여버린것을 확인하실수 있습니다.
제목 부분의 색상과 크기를 수정하고 싶으시다면 style.css 파일을 열어 17번째, 19번째 줄을 수정하면 되는겁니다.


비슷한 기능을 지원하는 IE Dev Toolbar도 있습니다만 firebug 쪽이 좀더 구체적으로 css속성과 속성이 어디에 위치하는지 보여주기 때문에 이쪽을 더 추천합니다.
아주 유용하고 완성도 높은 툴인데 무료!입니다. 멋진 세상이에요. :)
사용자 삽입 이미지

Crystal Blue 스킨을 수정한 Crystal Blue 2nd 스킨을 배포합니다.
designmyself.net의 튜토리얼을 통해서 수정 과정을 확인해 보실수 있습니다.
스킨 제작에 관심 있으신 분들에겐 도움이 될거라 생각합니다.

배포하는 스킨에 문제점이 있으면 이곳에 피드백 주시면 되겠습니다~

Crystal Blue 2nd Skin Download


Crystal Blu 2nd tutorial #1 : [ crystalBlue 2nd ] 스킨을 수정해 봅시다. - 01 -
#2 : [ crystalBlue 2nd ] 스킨을 수정해 봅시다. - 02 -
#3 : [ crystalBlue 2nd ] 스킨을 배포합니다~
첫번째 게시물을 올린지 너무 오랜시간이 흘렀네요.
이번에 스킨을 완료 시키고 배포까지 해보도록 하겠습니다.

사용자 삽입 이미지


사용자 삽입 이미지
헤더 부분을 수정하겠습니다.
제목 밑에 블로그의 copyright를 표기하도록 skin.html에 삽입하였고 css파일을 수정합니다.  
검정색이던 글자색과 크기를 변경하고 text-align 속성으로 가운데 정렬로 바꾸었고, 제목을 감싸고 있는 h1에 padding값을 넣어서 높이를 설정합니다. 그리고 추가시켜넣은 copyright 부분을 위해 스타일을 추가하였습니다.
최종 코드는 아래와 같습니다.

skin.html
style.css

사용자 삽입 이미지
사이드바의 제목들 색상이 예전 배경색과 동일한데 새로 바꾼 배경이미지와 어울리게 무채색 계열로 바꾸겠습니다. 저는 사이드바 제목 이미지들을 포토샵으로 불러온뒤 image / mode 에서 grascale로 바꿔 간단하게 흑백화 한뒤 저장하였습니다. 간단하게 흑백으로 이미지를 바꿀수 있지만 디테일한 조절이 필요하다면 따로 작업을 하시는게 좋습니다.

사용자 삽입 이미지

기존의 사이드바 이미지를 배경색에 맞춰서 흑백으로~


사용자 삽입 이미지
이렇게 스킨의 전체적인 수정 작업은 끝이났습니다. 이제 index.xml을 수정해보도록 하지요.
index.xml의 자세한 스펙은 이곳을 확인해보시면 됩니다. 각각의 항목의 용도와 어떻게 쓰이는지에 대해서 확인하실수 있습니다.
이번에는 베이스가 되는 스킨과 거의 대동소이한 모양이기 때문에 스킨의 이름만 수정하였습니다.
index.xml에 표기된 스킨의 이름이 다른 스킨과 겹칠 경우 겹치는 스킨중 하나만 태터툴즈 관리자 모드에 나타나게 되어 사용자에게 혼란을 줄수 있으므로 되도록 유니크하게 만들도록 합니다.
관리자 모드에서 보여지게될 preview.gif 이미지도 변환해서 넣었습니다.


사용자 삽입 이미지
자, 스킨이 완성이 되어 배포만 남았습니다.
원본 스킨에서 배경 이미지와 약간의 구조 변경만으로도 이렇게 원본과는 다른 느낌의 스킨을 만들어 낼수가 있습니다. 참 쉽죠?
완성된 파일은 www.tattertools.com의 스킨 게시판에 올리겠습니다. 베이스가 된 크리스탈 블루 스킨과 소스를 비교해보시면서 어떤 것들이 바뀌어서 새로운 스킨이 만들어진건지 확인해보시는것도 좋습니다.


Crystal Blu 2nd tutorial #1 : [ crystalBlue 2nd ] 스킨을 수정해 봅시다. - 01 -
#2 : [ crystalBlue 2nd ] 스킨을 수정해 봅시다. - 02 -
#3 : [ crystalBlue 2nd ] 스킨을 배포합니다~

bookskin을 공개합니다.

skin l 2007. 10. 3. 22:20

Crystal Blue 커스터마이징 튜토리얼이 늦어지고 있어서 일단 bookskin을 배포합니다.
티스토리에 업데이트 된  스킨이며 태터툴즈와 텍스트 큐브에서 쓸수 있게 컨버팅 하였습니다.
스킨에 문제점이 있으면 이곳에 피드백 주시면 되겠습니다 :)

스킨 이름을 지어주신 윤호님께 여러의미의 감사를..

Book Skin Download
이곳에서 처음 진행되는 튜토리얼입니다. 일단은 간단하게 얼마전 공개한 crystal blue 스킨을 살짝 수정해봅시다.

사용자 삽입 이미지

사용자 삽입 이미지
먼저 포토샵으로 이미지 작업을 합니다. 크리스탈 블루가 밝은 형광빛 나는 색으로 취향을 좀 탈수가 있기 때문에 이번엔 어두운 배경을 사용합니다. 배경 이미지는 flikr에서 'Creative Commons 사용권이 있는 사진' 옵션을 켜고 검색해서 찾은 이미지입니다.

메뉴의 위치를 위로 옮기고 블로그 타이틀과 블로그 설명 문을 강조할 생각으로 헤더 영역의 중앙으로 옮겼습니다. 크기도 좀 키웁니다. 간단하게 작업할 생각이기 때문에 이미지 작업을 아주 완성도있게 할 필요는 없습니다. 대략적인 느낌을 눈으로 확인해보는데 주안점을 두고 디테일한 부분들은 코딩하면서 잡아주도록 하겠습니다.


사용자 삽입 이미지
사용자 삽입 이미지
CSS를 이용해 이미지로 바뀌어져 있는 블로그 메뉴 부분을 텍스트 링크로 바꿉니다. .blogMenu a 에 padding:16px 0 0 0; height:0; overflow:hidden; 속성을 삭제합니다.  .blogMenu .tab~~ 으로 시작되는 라인들도 지워, 메뉴별 배경 이미지도 삭제합니다.

이제 텍스트 메뉴가 나타나지만 간격이 좀 애매하네요.
각각의 메뉴에 margin-leftt:14px; 을 추가하여 메뉴간 간격을 조절하고 skin.html 에서 메뉴 이름을 영문으로 수정하고 admin으로 갈수 있는 링크도 추가했습니다.



사용자 삽입 이미지
.blogMenu의 배경색을 검정색으로 바꿔줍니다. 배경색을 깔고 나면 .blogMune 안에 위치한 메뉴들의 자리가 어정쩡한걸 확인할수 있습니다. 이건 .blogMenu에 padding값을 넣어서 수정했습니다. 그러면서 font 크기도 조절합니다.

이제 .blogMenu의 위치를 맨위로 올립니다. 올리는 방법은 여러가지가 있을수 있습니다만, 이번엔 간단하게 position 속성으로 띄운후, top:0; left:0; 속성으로 자리를 잡게 만들었습니다. 메뉴가 브라우저 끝부분에 안붙는걸 확인한뒤 margin값을 삭제했습니다. width:100%; 속성으로 가로길이를 브라우저 크기에 맞춥니다.


사용자 삽입 이미지

짠! 이렇게 만들었습니다.


메뉴바 부분이 적절히 끝난것 같네요 :)
블로그 메뉴바를 커스터마이징하며 수정한 css파일을 비교해보면 아래와 같습니다.
설명이 애매해서 그렇지 실제로 보면 그리 많은 수정이 필요한것은 아닙니다.

수정전

수정후



사용자 삽입 이미지
메뉴바를 수정했으니 이젠 배경 이미지 수정합니다. flickr에서 찾아낸 파일을 bg.jpg로 저장하여 images 폴더에 덮어넣은 후 이미지가 덮이지 않는 부분의 색상코드도 바꿔주었습니다. 라이센스를 표기하에 사용이 가능하다는 조항이 있으므로 skin.html을 수정하여 copyright에 링크도 삽입했습니다.
#49b3ce를 #323232로 바꿨습니다~

자, 이제 생각한 모양이 얼추 모양이 나오고 있습니다 :)
다음 포스트에서 블로그 타이틀의 위치를 조절하고 배포를 위한 준비를 해보겠습니다.


Crystal Blu 2nd tutorial #1 : [ crystalBlue 2nd ] 스킨을 수정해 봅시다. - 01 -
#2 : [ crystalBlue 2nd ] 스킨을 수정해 봅시다. - 02 -
#3 : [ crystalBlue 2nd ] 스킨을 배포합니다~
사용자 삽입 이미지
티스토리에 업데이트 된 Crystal Blue 스킨입니다.
태터툴즈와 텍스트 큐브에서 쓸수 있게 컨버팅 하였습니다.

Crystal Blue 스킨을 베이스로 커스터 마이징 튜토리얼을 진행할 예정이니 많은 관심을 부탁드립니다 :)

Crystal Blue Skin Download
1 
블로그 이미지 qwer999

공지사항

최근에 올라온 글

최근에 진행된 튜토리얼