블로그 스킨 만들기

공개일기 2006.08.26 22:44
  예전에 시도하다가 잠시 중지했던 프로젝트, 블로그 스킨만들기에 다시한번 도전을 해 볼까 하는 마음에 스킨작업에 들어갔습니다. 테이블로 작업하는게 훨씬 쉽긴한데, 테이블 사용을 최대한 줄이고 DIV로 만들어보려니 꽤나 까다롭네요...;; CSS는 어떤 부분에 사용을 해야할지 막막하기도 합니다.

  일단 테이블로 대강적인 레이아웃을 짜 두었고 작업이 진척되는대로 스타일시트를 하나하나 붙여나는 방향으로 잡았습니다. 테이블로 만들어놓고 DIV로 차근차근 바꾸면서 맞출려구요.

  익숙하지가 않은작업이라 다른분들은 어떤방법으로 스킨을 만드는지 궁금하네요..ㅎㅎ 봄내음이 풍기는 오리지날 스킨을 제작하려고 했었는데, 봄스킨을 완성하기도 전에 가을용 스킨을 만들어야 하는 시기가 왔습니다. 이렇게 스킨작업의 진행속도가 늦는걸 감안해서 계절테마로는 절대 안만들껍니다..ㅎㅎ

  태터툴즈용 스킨만들기 연구중입니다.

'공개일기' 카테고리의 다른 글

노래방에서 노래부르고 싸이월드로!!  (6) 2006.08.31
개강!!  (8) 2006.08.28
블로그 스킨 만들기  (10) 2006.08.26
화가나거나 힘들때  (6) 2006.08.24
무지개 발견!!  (12) 2006.08.20
1G램 구입하다!!  (12) 2006.08.18
top
     TAG css, xhtml, 블로그 스킨
  1. Favicon of http://raonsky.com/tt/ 라온수카이 2006.08.26 23:01 신고 수정/삭제 댓글

    저는 시도조차 못하겠던데,,, 대단하십니다. 기대할께요~ ^.~

    • Favicon of http://signpen.net 싸인펜 2006.08.27 12:23 신고 수정/삭제

      많이 헤메고 있습니다. 조금만 실력이 있었다면, 태터툴즈 1.1스킨 공모전에 제출할만한 스킨을 만들 수 있었을텐데라는 아쉬움이 약간 있어요..ㅎㅎ

  2. Favicon of http://rukxer.net/ Rukxer 2006.08.26 23:04 신고 수정/삭제 댓글

    그나마 드림위버로 연동하면 눈에 보이면서 하니까 쉬워지는데, 그래도 좀 어렵더군요 =___=;; 그래서 저는 그냥 누군가 만든 스킨을 개조해서 쓰는 정도로만 하고 있습니다. -ㅂ-

    • Favicon of http://signpen.net 싸인펜 2006.08.27 12:25 신고 수정/삭제

      예전에 나모로 스킨을 만들어보려다가 나모 자체에서 자동으로 잡히는 값들 때문에 자꾸 흐트러져서 이번엔 텍스트에디터로만 작업해보고 있어요.

      은근히 어렵네요...;;

  3. Favicon of http://wooyoon.net 흰우유 2006.08.27 21:07 신고 수정/삭제 댓글

    저는 처음에 블로그 스킨 같은 거는 테터 만드신 분만 만드시는 줄 알았어요;;
    그런 걸 만드시다니.... (작아지는...)
    멋진 것 만들어서 공개해주세요!!! ㅎㅎ
    일명 도둑놈 심보라는.. ㅋ

    • Favicon of http://signpen.net 싸인펜 2006.08.28 14:11 신고 수정/삭제

      공개형스킨이 아니라 제 전용 스킨을 만들어다 붙일 생각이었는데...ㅎㅎㅎ 일단 완성되면 스킨 완성도를 봐서 쓸만하다 생각되면 공개도 해 보겠습니다.

      그나저나 지금 태터1.0.6버전을 기준으로 스킨을 만드는데, 1.1버전이 공개되면 새로 손봐야 할지도 모르겠습니다..;)

  4. Favicon of http://huhuchi.egloos.com d i _ v i l l a _ j u n 2006.08.27 23:54 신고 수정/삭제 댓글

    정말 깔끔한데요??? 흠... 부럽습니다. 전 걍 이글루스에서 지원하는 것으로 떼우는지라...ㅋㅋㅋ

    • Favicon of http://signpen.net 싸인펜 2006.08.28 14:13 신고 수정/삭제

      지금쓰는 스킨을 새 스킨이라 오해하지 말아주세요^^ㅋ
      지금스킨은 리체님이 만들어두신 태터 기본스킨을 제 입맛에 맞게 커스터마이징해서 사용하는 것 뿐이구요..ㅎㅎ

      지금 다른곳에있는 제 비밀공간에서는 스킨작업이 이루어지고 있답니다..ㅎㅎ

  5. Favicon of http://kose.tistory.com kose 2006.09.03 15:18 신고 수정/삭제 댓글

    외국사이트를 참고하는것도 좋을것 같아요..
    외국 블로그 사이트 돌아다녀 보시면
    css로 짜여진 블로그들이 많습니다. 그 블로그의 css를 저장해서
    참고하시면서 만드시는것도 좋은 방법일것 같네요..
    제가 자주 하거든요.. 하다보면 표절이 되버리지만..
    ㅋㅋㅋ

    • Favicon of http://signpen.net 싸인펜 2006.09.03 23:12 신고 수정/삭제

      표절 티 안나게 어떻게 연구 해 봐야겠습니다..ㅋㅋ

      한번 찾아다녀 봐야겠군요^^ㅋ
      정보 감사합니다~

댓글 쓰기

태터툴즈 1.0.4버전 버그

긴글 2006.04.02 07:14
  밤새 태터툴즈 스킨과 씨름을 했습니다.
결국 블로그 안정화를 위해서 1.0.4버전을 포기하고 1.0.2버전으로 다운그레이드를 한 상태입니다. 다운그레이드 한 버전에선 모든 기능이 이상없이 잘 작동을 하는군요.

  1.0.4버전 버그가 무엇인고 하니..

  스킨을 손보기만 하면 여지없이 오른쪽의 사이드바가 밑바닥으로 주저앉아 버리는 겁니다.
말로 설명하기가 상당히 어려운데, 컨텐츠가 있는 중앙의 화면 바로 우측에 항시 붙어 있어야 하는 사이드바가 스킨을 손대기만 하면 컨텐츠가 있는 곳보다 아래쪽으로 내려가 있어 스킨이 보기 흉해지는 것입니다.
우측 사이드바에 무언가를 추가 하려고만 하면 사이드바의 위치가 하단으로 바뀌어 버립니다.

  파이어폭스에선 제대로 된 화면이 항시 출력 되는데, 익스플로러로 화면을 확인하면 위에 말한것과 같이 망가진 화면으로 출력이 됩니다. 저야 파이어폭스를 기본 브라우저로 사용하고 있으니 불편은 없지만, 제 블로그에 방문하시는 분들의 90%가 익스플로러를 사용하고 있다는 것을 감안하면 중대한 문제라 수정을 하지 않을 수가 없었습니다.

  처음엔 CSS가 문제인가 해서 뒤적거려 보고, 예전에 백업해둔 스킨을 적용해 보기도 하고 관련 자료를 찾으면서 시간을 보냈습니다. 여차하면 제가 새로 스킨을 제작해서 가져다 붙일려고도 해 봤는데, 스킨이라는게 아무 계획도 없이 있다가 '뚝딱'하면 만들어 낼 정도로 간단한 작업도 아니고, 간단하고 빠르게 만들면 지금 있는 스킨을 기본틀로 별 변화 없는 스킨이 만들어 질 것이 뻔 하니 그만 두기로 마음 먹고 왜 이런 문제가 일어 나는지 찾아보기 시작했습니다.

  처음으로 제 눈에 띄인 용의자는 CSS였는데요. 아무리 웹 표준을 준수해서 XHTML을 만들어도 스타일 시트의 해석이 다른 브라우저들과 IE가 틀리다는 것을 알아 냈습니다. IE에서만 나타나는 특정 버그도 있었구요. 아무래도 스타일 시트에 의해 IE가 버그를 일으키는 것이라 생각되어 한참을 뒤지고 뚝딱거려도 해결이 안되더군요.

  결국엔 망가지지 않는 기본 스킨을 적용한 후에 하나씩 수정하고 확인하면서 어떤 부분에서 문제를 일으키는 지를 살펴보기로 마음먹었습니다. 드디어 문제를 일으키는 부분을 찾아내고 그 부분을 수정 전으로 되돌렸는데도 틀어진 스킨이 돌아오지 않더군요. 그제서야 스킨이나 IE문제가 아니라 태터툴즈의 문제라고 결정지었습니다. 1.0.2버전으로 다운시킨 이후엔 스킨에서 그런 문제가 발생하지 않고 있습니다.

  정확이 어떤 이유에서 인지를 저도 파악하고 있지 못해 막연히 태터툴지 1.0.4버전의 문제로 생각해 두고 있습니다. 당장 1.0.2버전에선 똑같이 해도 같은 문제는 일어나지 않고 있으니까요.

  원래 태터툴즈 자체 방문자 카운터가 정확하질 않아서 제가 사용하고 있는 방문자 통계 프로그램인 'trace watch'의 카운터를 스킨에 연결하는 플러그인을 만들려고 했는데, 스킨에서 엉뚱한 문제가 발생하는 바람에 스킨만 붙들고 밤을 새고 말았습니다. 완전 허무하군요...;;;

  여튼, 스타일 시트에 대해 많은 검색을 해 보고 나서 여러가지 모르던 정보들을 많이 알게 되었는데요. 결론은 하나더군요.
  "IE는 웹 발전을 좀먹는 쓸모없는 존재이며, IE가 없어지면 웹프로그래머, 디자이너 들은 여러가지 브라우저를 두루두루 최적화 해야 하기 때문에 빡세진다..."
라는 결론에 도달했습니다.
아무리 생각해도 90%이상의 점유율을 가지고 있는 브라우저 임에도 발전이 너무 없었더라구요. 90%이상의 점유율을 가지고 있었기 때문에 그랬던 걸까요?
IE7버전에선 CSS에 대한 지원이 강해진다고 하니, 한번 기대해 봅니다.
적어도 지금처럼 엉뚱한 버그를 내 뱉어서 사람들을 고생시키진 않을테니까요.

일단 내용은 마무리 부분에서 조금 많이 샌듯 하네요..ㅋ

top
     TAG css, xhtml
  1. Favicon of http://bnufactory.com/blog/bnu BNU 2006.04.02 07:53 신고 수정/삭제 댓글

    안녕하세요:)

    태터툴즈의 버그는 아닌 것 같네요.

    utf-8형식으로 저장시 BOM(Byte Order Mark)이 들어가서 그런 듯 한데요. 에디트 플러스 사용자 이시라면 설정창에서 '파일'탭을 보시면 하단에 'Byte Order Mark 없는 UTF-8 지원'에 체크하시고 다시 저장해보시면 될 것입니다:)
    에딧플러스 외에 기타 다른 툴이시라면 사용하시는 툴에도 비슷한 설정이 있을 듯 하네요.

    실제로 소스보기해서 태그를 저장해서 보니 잘 나오네요:)

  2. Favicon of http://loose.hubweb.net 소금이 2006.04.02 09:03 신고 수정/삭제 댓글

    가로폭이 작아서 하단으로 내려가는 것같은데, 스타일파일에서 메인화면의 폭을 수정하시면 될듯하네요. 좌우여백까지 포함해서 다시 계산해보시는 것이 좋을듯 ^^;

  3. Daniel 2006.04.02 10:26 신고 수정/삭제 댓글

    IE CSS 박스 문제로 검색해 보시길. ^^;

  4. 나니 2006.04.02 10:41 신고 수정/삭제 댓글

    오해입니다.
    해당문제는 IE 박스 문제이며,
    IE box hack을 쓰시면 해결됩니다.
    FF나 Opera, Safari에서는 내용이 넘쳐흐르면 자동으로 잘라주지만
    IE는 멍청하게도 그렇지 못합니다. 그래서 IE hack을 쓰거나
    본문에 overflow: hidden;이라는 캐스캐딩을 넣어주어야합니다.
    (overflow: auto;라는 방책이 있긴 합니다만 IE에서는 위아래로도 스크롤이 생겨서;; )

  5. Favicon of http://prople.info 소필 2006.04.02 12:09 신고 수정/삭제 댓글

    몇몇의 특정 플러그인을 실행한상태로 쓰던 스킨에서 변경하게되면 사이드바가 주저앉아 버리는 현상도 있답니다 ^^;(전에 스킨을 무진장 수정해서 쓰다가 다른스킨으로바꾸니 주저앉은적이 있어서요 ^^;)

  6. Favicon of http://radiokidz.korserve.net/tt/ 라디오키즈 2006.04.02 12:14 신고 수정/삭제 댓글

    싸인펜님.. 지금도...-_- 오른쪽 메뉴가 아래로 밀려있는데요. 저도 그것 때문에 고생을 하긴 했지만 지금은 괜찮은 것 같아요. 왜 갑자기 아래로 밀려버렸는지...

  7. Favicon of http://www.gltle.net/index.php 글틀양 2006.04.02 13:15 신고 수정/삭제 댓글

    저 같은 경우는 1.0.2 에서 알수 없는 특정한 상태에서 메뉴쪽이 가라앉는 버그가 있었습니다. 1.0.3로 업한 이후에는 안보이더군요.

  8. Favicon of http://signpen.net 싸인펜 2006.04.02 17:08 신고 수정/삭제 댓글

    관심을 가져주신 모든 분들께 감사드립니다.
    스킨 문제는 해결이 되었습니다.
    다른 여러분들의 댓글이 많이 도움이 되었습니다만, 제 블로그의 경우엔 '소필'님이 적어주신 플러그인과의 충돌이었습니다.

    '블로그 생일'을 출력해주는 플러그인을 실행하면 사이드바가 아래로 떨궈지는군요.
    우선을 플러그인을 해제 해 둠으로서 문제를 해결했습니다.

    분명히 새벽에 완벽하게 마무리가 되었다고 생각하고 잠이 들었는데, 제가 마무리 되었다는 안도감에 플러그인을 실행해 놓고 확인을 하지 않고 잠든게 문제였네요^^

    많은 분들의 댓글 감사합니다^^

  9. Favicon of http://raonsky.com/tt/ 라온수카이 2006.04.02 23:12 신고 수정/삭제 댓글

    사인펜님 오늘 완전 인기인이네요~ ㅎ

  10. Favicon of http://a1114.ivyro.net 벨자 2006.04.03 16:25 신고 수정/삭제 댓글

    저도요ㅜㅠ 1.0.4로 업하고부터 IE에서 블로그 첫 접속시 사이드바가 주저앉고 새로고침을 해야 제대로 보입니다. 플러그인도 안 쓰고, 메인가로폭을 넓혀도 소용없네요ㅠㅠ

    • Favicon of http://signpen.net 싸인펜 2006.04.04 01:06 신고 수정/삭제

      CSS의 의존도가 높은 XHTML로 이루어진 블로그 스킨을 쓰고 계시고 IE에서만 발생 하는 문제라면, 위엣 분들이 댓글을 통해 알려 주신 IE의 CSS버그일 수도 있습니다.

      댓글로 모두 설명해 드리기엔 양이 너무 방대해서 구글 등을 통해서 "IE CSS버그"라고 검색 해 보시면 많은 정보를 얻으실 수 있을 듯 하네요.

      의외로 IE 6버전 까지는 CSS와 관련된 버그가 상당히 많더라구요...;;;

댓글 쓰기