Error!! Could not load style.css
SAVE THE DEVELOPERS <!> 버그 많고 비효율적인
IE6을 업그레이드 해주세요!
※ 이 배너는 IE6에서만 표시됩니다.


    

미디어로그

요즘 티스토리 스킨을 만들고 있습니다. 제 블로그는 아니고 일때문에 만들어야 할 블로그인데요. 아무튼 제가 디자인및 개발을 하고 있습니다.

블로그 특성상 테터데스크같은 첫페이지가 필요하여 그것을 다루고 있습니다. 일단 사용자가 HTML과 CSS디자인을 직접 수정할 수 있다는것은 좋은데 이해할 수 없는 부분이 몇가지 보이더군요. 그것에 대해 말해 보고자합니다.

배치될 아이템들

배치될 아이템들

첫 페이지는 대충 이런식으로 아이템을 배치할 생각입니다. 위, 아래 HTML모듈은 헤더와 푸더로 테두리의 윗뚜껑과 바닥을 장식할 겁니다. 이렇게 배치하면 대략 이러한 디자인이 나옵니다.
디자인1

대략 이러한 구조

저렇게 디자인을 잡고 코딩을 한 후 결과물을 보니깐 문제가 발생하더군요. 아래 그림처럼 헤더부분과 헤드라인부분이 떨여져 있는것입니다. 헤더가 테두리의 뚜껑부분을 담당하니 큰 문제입니다.
구현한 모습

아니 이게 무슨 현상임?

아무래도 저기가 떨어질 이유가 없는데 이상하여 소스를 보니 이러한 소스가 삽입되어 있더군요.
10px떨어뜨리기

의도적으로 10픽셀 떨어뜨리려고 삽입한 모양

HTML을 넣는 아이템 아래에 자동으로 저러한 코드가 삽입되게 되어있더군요. HTML아이템과 아래 아이템사이에 간격을 10픽셀 떨어뜨리려고 넣은것 같습니다. 저 부분은 테터데스크에서 자동으로 넣는 코드입니다. 제가 어찌 수정 할 수 없는 부분이죠.

10픽셀을 떨어뜨리려면 TD_htmlbox에 마진을 10픽셀 주든가 하는 방법도 있는데 왜 저렇게 했는지 이해가 안갑니다. 차라리 class를 주었다면 CSS에서 !important로 강제로 높이값을 없앨수나 있지 아에 HTML에 스타일을 인라인으로 삽입해 버려 어쩔 수도 없습니다. 그러나 한가지 방법이 있으니 CSS선택자를 이용하여 저것을 안보이게 할 수 있습니다.

저 DIV는 TD_htmlbox바로 다음에 오는 객체이므로

.TD_htmlbox + DIV{
   display:none;
}

이런식으로 하면 숨길 수는 있습니다. 그런데 +선택자는 IE6에선 안먹힙니다. 그러면 어쩌라고!

하 참 난감하군요. 지금 다른 방법으로 디자인을 할 생각을 하고 있습니다...

그리고 또 하나. 테테데스크에서 최신글 등의 섬네일을 출력할때 table태그를 사용하는데 굳이 table을 사용하는 이유를 모르겠으나 그것을 둘째 치더라고 태그라도 제대로 입력해야 될거 아닙니까?

따옴표는 어디에

따옴표는 어디에..

파란색 테두리 쳐진부분이 섬네일치환자가 변한 부분입니다.  빨간색으로 밑줄쳐진 부분을 보면 속성에 대한 값부분에 ""등의 따옴표가 빠진것을 볼 수 있습니다. 웹프로그래밍하다보면 실수로 빠뜨릴 수 있다곤하지만 저건 너무 심한거 아닙니까? 어디는 제대로 들어가고 어디는 안들어가고.. 메인페이지 HTML Validate검사에 통과좀 해봅시다.

저작권 안내
  • 이 글의 내용 전체를 복사해서 다른 곳에 게시하는 것을 금합니다.
  • 이 글의 주소를 알려주거나 링크하는 것만 허용합니다.
  • 이 글의 일부를 인용하는 것은 허락하되, 반드시 원 저작자출처를 표기해야 합니다.
  • 이 글을 영리목적으로 이용할 수 없습니다.
  • 위 조건들을 만족한다면 별도의 허락을 받지 않아도 됩니다.
  • 자세한 사항 및 부칙, 예외 등은 여기를 참고하세요.


엮인글보내기 주소 : http://jugug.net/trackback/177 관련글 쓰기

악플은 NO! 스팸도 NO! 여러분의 댓글이 글의 가치를 높입니다.
  1. BlogIcon 김용성 2009/02/25 18:41  댓글주소  수정/삭제  댓글

    제 블로그에 태터데스크를 이용해서 만들었는데요.
    http://daydreaming5.tistory.com/
    이상하게 10px은 아니고 여백이 많이 남더라구요.
    이 부분을 태터데스크에서 설정해줘야 하는지 아니면 티스토리 블로그 html/css편집에서 해줘야 하는지 모르겠습니다...

    • BlogIcon 희주 2009/02/28 11:30  댓글주소  수정/삭제

      방문감사합니다.
      블로그 디자인이 화려하네요.
      말씀하신 부분이 어딘지 정확히 모르겠습니다만.. 위쪽과 아래쪽 갤러리간격이시라면 css에서 높이를 그렇게 주신거 같네요.

  2. BlogIcon 충story 2010/01/07 21:58  댓글주소  수정/삭제  댓글

    안녕하세요? 블로그에 테터데스크를 적용했는데, 글자색이 전부 파란색으로 나와서..문제를 해결해보려고 이곳저곳 돌아다니다 오게 되었는데요,
    혹시 어떻게 수정하면 해결할수 있는지 아시나요? CSS가 먼가 들어가서 color부분을 변경해 보아도 도통 글자색이 바뀌질 않네요.
    생뚱맞은 질문이었나요? 모르시면 그냥 패스해주세요...죄송^^