<!DOCTYPE html> 에 맞게 게시판 스킨을 조정하면서 황당한 경험을 하고 있습니다. 블록

다음 2개의 소스를 보시면 알겠지만 첫번째 소스가 <!DOCTYPE html> 을 적용하지 않았을 때 소스이고 두번째가 <!DOCTYPE html> 을 적용했을 때 소스인데 2번째 소스의 결과는 왜 라인의 두께가 두꺼운 거지요? 이것 때문에 제 게시판 코멘트가 두꺼운 라인이 생겨 버렸는데 이거 html의 버그인 건가요? 황당하네요. 여기서 또 진척이 안되네요. 하 참 이런 황당한 버그도 있나요?

첫번째 소스 테스트: http://www.blrun.net/temp/thin_line1.html

제로보드4 수정중인 스킨(여기서 코멘트 부분을 보면 두꺼운 라인이 삽입된 걸 확인할 수 있습니다): http://bit.ly/1boW99N

[첫번째 소스- thin_line1.html]
1
2
3
4
5
<table width=100% border=0 cellspacing=0 cellpadding=0 style=table-layout:fixed>
<tr>
    <td width=100% bgcolor=#B4D2DE><img src=http://www.blrun.net/bbs/images/t.gif height=1></td>
</tr>
</table>

[두번째 소스- thin_line1_1.html]
1
2
3
4
5
6
<!DOCTYPE html>
<table width=100% border=0 cellspacing=0 cellpadding=0 style=table-layout:fixed>
<tr>
    <td width=100% bgcolor=#B4D2DE><img src=http://www.blrun.net/bbs/images/t.gif height=1></td>
</tr>
</table>

이 둘 사이의 차이점과 두번째 소스에선 왜 라인이 두껍게 나오는지 그걸 알고 싶습니다. 전 html 프로그램 짜면서 이런 황당한 경우는 처음이네요. ㅡ_ㅡ

덧글

  • Hide_D 2015/07/13 19:01 # 답글

    HTML5를 쓸 생각을 하다니 기특하네요.

    1. 레이아웃을 구성하는데에는 table을 사용하여선 "안 됨."
    2. style="font-size:0;" 또는 style="display:block;"
  • ldyksm 2015/07/13 19:47 # 답글

    HTML5에서 바뀐 것이 한두 가지가 아니겠지만 관련 수정 사항이 있어 보이네요.
    https://stackoverflow.com/questions/8782060/how-to-adjust-table-row-height-in-html5
    여기 답변 보면 기본적으로 폰트사이즈,줄간격보다 작게 설정 해주지 않는다는군요
  • 희망의빛™ 2015/07/13 22:09 #

    HTML5에서 1px 높이의 테이블을 만드는 게 이렇게 복잡하나요? 헐~ 너무하네요. 이건 좀 심하네요. ㅡ_ㅡ DOCTYPE 을 Transitional 로 바꾸면 일단 height=1 이 먹는 거 같던데 링크해 주신 문서는 왜 이렇게 복잡한 건지 모르겠습니다.

    ======================================================================================================================
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <body style="background-color:#F3F3F3;">
    <table style='width:500px; vertical-align:top; border-collapse:separate; border:0px; padding:0px; border-width:0px; margin:0px;'>
    <tr style="line-height:1px; vertical-align:top; border-collapse:separate; border:0px; padding:0px; border-width:0px; height:1px; margin:0px; max-height:1px;">
    <td style="background-color:red; line-height:1px; vertical-align:top; border-collapse:separate; border:0px; padding:0px; border-width:0px; height:1px; margin:0px; max-height:1px;">
    <img style="width:100%; height:1px;" src="/images/pixsolid.gif" alt=''>
    </td>
    </tr>
    </table>
    </body></html>
    ======================================================================================================================
  • 희망의빛™ 2015/07/14 21:19 # 답글

    본문에 링크된 http://bit.ly/1boW99N 사이트는 일단 엘레시엘님이 도움을 주신 방법으로 DOCTYPE 을 변경해 1px 높이가 가능하도록 수정해 놓았습니다. thin_line1.html과 thin_line1_1.html은 일단 되는 것만 확인하고 DOCTYPE을 다시 처음 그대로 환원해 놓았습니다. 본문에서 제시한 예시 링크 2개를 클릭하면 HTML5에서 달라진 내용 중 하나를 소스보기를 통해 확인할 수 있습니다. 물론 결과가 서로 다릅니다.
  • 엘레시엘 2015/07/14 09:48 # 답글

    table은 표를 그릴 때 써야지 구분선 긋는 용도로 쓰는 태그가 아닙니다. 요즘 회사에서 HTML 문서 만드는데 저런 식으로 코딩하면 이단옆차기 맞습니다.
    HTML TAG는 문서의 구성 요소와 의미를 나타내고, CSS가 모양을 표현하는 역할을 합니다. 극단적으로 CSS가 모조리 다 증발해도 문서가 어떤 구성으로 되어있는지 알아볼 수 있어야 올바른 HTML 문서가 됩니다. 디자인이나 기능을 극단적으로 추구하는 페이지라면 어느 정도 타협할 때도 있긴 하지만, 주인장이 원하는 정도의 페이지라면 표준 HTML-CSS 코딩으로도 다 만들 수 있습니다.
    주인장이 원하는 "구분선"을 만드는 태그는 hr 태그입니다.
    <hr style="height:1px;border:0;background-color:#B4D2DE;">
    table 태그 지우고 이걸로 써보시죠. DOCTYPE이 html5일때도 잘 먹힐겁니다.
  • 총통 R 레이퍼 2015/07/14 10:03 #

    수고하십니다.....
  • 희망의빛™ 2015/07/15 07:21 #

    엘레시엘// 오늘 다른 일이 있어서 이제야 덧글을 보았네요. 전 제로보드4가 처음 만들어질 당시 코딩을 그대로 보존한 것이고 그게 왜 안되었던 것인지 그게 궁금했던 것이죠. hr 태그는 저도 알고 있고 엘레시엘님이 기술하신 CSS 태그도 무슨 소린지 이해가 됩니다. 다만 지금까지 멀쩡하게 동작했던 코드가 동작을 안하는 이유가 궁금했고 html5는 누가 그러는데 여백을 표시하는 것 자체부터가 html4와 다르다는 이야길 들었습니다. 불필요한 코드 수정을 하지 않는 것이 중요한데 html5는 그런 면에서 개발자들에게 불안한 요소로 다가오는 것 같습니다. 대부분의 태그와 스타일을 수정해야 하는 것이라면 정말 쉽게 보고 지나칠 문제는 아닌듯 보이네요. ^^; 기존에 제작됐던 수많은 코드들을 html5를 위해서 전부 고쳐야 한다고 한다면 그것도 무시못할 스트레스요 낭비잖아요.

    물론 전 글쓰기 자동저장 기능의 IE8 호환성을 위해서 이번에 html5를 알게 됐지만 이렇게 수많은 코드들을 수정해야 한다는 압박감 때문에 소스를 원래대로 되돌릴까도 심각히 고려중입니다. 어차피 최종 배포판은 그대로 존재하기 때문에 앞으로 새로운 DOCTYPE에 나름 적응해 보려고 노력하겠지만 불완전한 기술에 쓸데없는 낭비가 아닐까 하는 생각도 많이 듭니다.
  • 엘레시엘 2015/07/14 22:16 #

    반응이 딱히 놀랍지도 않네요. 기껏 남이 충고해줘도 이딴식이니 제대로 된 답글이 안달리지.

    고쳐야 하는 건 '기존에 존재하는 대부분의 코드'가 아닙니다. '기존에 존재하는 (병신같이 짠) or (엉터리) 코드'죠.
    그거 불안하게 받아들이는 개발자는 님밖에 없을 듯.
    뭐, 어차피 이야기해봤자 받아들이지 않겠지만, 더 충고하자면,
    님이 짠 프로그램이 더 오랫동안 사용되기를 바란다면 지금이라도 제대로 된 표준을 공부하고 제대로 된 코드를 짜는게 좋을 겁니다.
    '원래 제로 보드 소스'에 포함되어 있는 엉터리 HTML은 머지않아 어떤 브라우저로도 제대로 볼 수 없게 될 거거든요.
  • 희망의빛™ 2015/07/15 15:55 #

    엘레시엘// 지금까지 모든 브라우저에서 다 동작했던 방식이 엄연히 존재하는데 그걸 비표준이라고 낙인찍고(언제부터 비표준이었는지도 모호하고 표준이 더 복잡하고 이해하기 힘듭니다) table 태그가 엄연히 존재하고 있음에도 불구하고 div와 sytle 만을 사용해 사이트를 제작하는 게 표준이라고 한다면 결국 그건 이미 만들어 놓은 수많은 html 기술 중에 특정 태그만을 사용하라고 강요하는 것과 다를바 없는 것 아니겠습니까? 그건 결국 모든 태그들의 동작을 제대로 보장하지 못하는 불완전한 기술이라는 뜻 아니겠습니까? jquery 나 ajax 동작을 위해서 DOCTYPE을 쓰고 table 태그를 버려야 한다면 에러 메시지를 띄우던지 해서 특정 태그를 사용하도록 유도해야지 이렇게 여전히 table 태그를 사용하게 만들어 놓고는 결과가 전혀 엉뚱하게 나온다면 그 기술이 과연 정상적이라고 할 수 있을까요?

    전 그 점을 지적하지 않을 수 없네요. 우리가 html5로 가야 한다고 한다면 왜 기존 테이블 태그를 버려야 하는지, 또 왜 td 태그에서 height=1 속성이 먹지 않는지부터 개발자들을 설득해야 한다고 생각합니다. 무조건 따라오라고 하지 말고요. 왜 이유없이 제가 제 소스코드를 일일이 힘들게 변경해야 하는 거죠? 설득을 하고 이해를 시켜도 바꿀까 말까인데 이렇게 아무런 이유없이 호환성을 망가뜨린다면 그건 표준이라는 미명 아래 사이트들의 호환성을 고의로 떨어뜨리기 위한 어떤 음모가 개입돼 있다고 의심할 수밖에 없을 겁니다. ajax나 jquery 기술을 새로 만들었으면 기존 html 코드의 호환성을 모두 보장한 다음 새로운 문법으로 구현해야지 표준과 비표준이 공존하는 코딩 환경 속에서 왜 저를 비롯한 수많은 개발자들이 이렇게 스트레스를 받아야 하는지 모르겠습니다.

    단적인 예를 들자면 자동차가 생기기 전엔 여러가지 일상 도구를 정확하고 다양하게 쓸 수 있었는데 자동차가 생기고 난 후부터 일상에서 돌도끼 만을 사용하라고 강요한다면 과연 그게 정상적인 기술일까요? 매우 어처구니 없는 처사죠. 사실 div 태그를 쓴 사이트를 많이 봤지만 사이트 구조를 이해하기가 무척 어렵습니다.

    가독성이 떨어진다는 것은 이해하기가 어렵기 때문에 그만큼 좋은 기술이라고 보기 어려운 것 아니겠습니까?

    더군다나 괘씸한 것은 전세계에서 과거부터 수많은 개발자들이 혼신의 힘을 다해 개발해 놓은 수많은 웹사이트 코드들이 있는데 그런 것들을 신기술이란 미명아래 소리소문없이 사장시키고 오동작을 시켜 버린다면 그런 것처럼 어처구니 없고 슬픈 상황이 어디 있습니까? 이건 결국 신기술을 제대로 정착시키지 못하는 암적인 요소가 될 수 밖에 없습니다. 저부터도 이렇게 격한 반응이 나오는데요.

    지금 제사이트( http://www.blrun.net )를 보세요. DOCTYPE 을 바꿨을 뿐인데 사이트들의 모양이 IE8에서 엉망이 돼 버렸습니다. 벌써부터 수정할 생각을 하니 부담감이 밀려오고 귀찮아지기 시작합니다. 이러다 제가 수정하지 못하고 죽으면 분명히 이 사이트는 이런 상태로 남다가 곧 사라지게 될 것입니다. 이게 뭡니까? 글쓰기 오토세이브 때문에 왜 저를 비롯한 전세계 수많은 개발자, 사이트를 이용하는 유저들이 이렇게 많은 것들을 희생해야 하는 겁니까?
  • 희망의빛™ 2015/07/15 07:19 #

    그리고

    "님이 짠 프로그램이 더 오랫동안 사용되기를 바란다면 지금이라도 제대로 된 표준을 공부하고 제대로 된 코드를 짜는게 좋을 겁니다."

    라고 엘레시엘님이 말씀하셨는데 이렇게 표준으로 정착된 코딩 방식이 앞으로 다가올 미래엔 또 어떤 식으로 변덕을 부리며 뒤바뀌게 될지 전 솔직히 그게 벌써부터 걱정이 된답니다. 그렇게 되면 그때가서 또 개발자들은 열심히 기존의 소스코드를 전부 새로 바꾸게 되겠지요. 참. 이게 무슨 짓들인지... 정말 한심하고 한숨만 나옵니다.
  • Miyun_86 2015/07/15 09:25 # 삭제

    .....기술 이야기를 떠나서...

    원래 프로그래밍이라는 분야가 계속해서 변하는 것을 적용하고 그러면서 발전하는 분야인데 그 원론적인 것부터 부정하면 이런 글 자체가 무의미합니다. 그냥 혼자 환경에서 혼자 맞춰 쓰면 누구도 뭐라 안 할 것입니다.
  • DXY 2015/07/15 11:01 # 삭제

    http://www.w3.org/TR/html401/appendix/notes.html#notes-tables
    이거 보고 옵니다.

    님이 말하는 HTML 4.0 시절 표준도 테이블로 그런거 하지 말고 스타일시트 쓰라고 하고 있습니다. 표준도 제대로 읽어놓지 않고 뭔 표준탓을 하고 있나요...

    제로보드4처럼 처음부터 엉터리로 작성된 HTML 때문에 웹 표준 문제가 자꾸 공론화되니까 HTML5에서 동작을 바꾼게 아니겠습니까?
  • 총통 R 레이퍼 2015/07/15 11:35 #

    너 스마트폰은 왜 쓰냐?
  • 절망의빛 2015/07/15 09:37 # 삭제 답글

    변덕을 부리며 뒤바뀌는게 아니라, 저런 기능이 필요한걸 그 시절엔 몰랐으니, 뒤늦게라도 개발자들이 좀 더 편하게, 더 나은 환경이 되도록 바꾸는 겁니다. 당장은 불편해 보여도 앞으로를 생각하면 수정하는 쪽이 몇십배 이득입니다.

    그럼 하나 물어봅시다. 님은 처음부터 제로보드 완벽하게 수정해서 앞으로 있을지 모를 모든 사항에 다 대비할 수 있는 v1.0만 있게 할 것이지, 왜 자꾸 기능을 추가하고 업데이트를 해서 다시 받으라고 하는겁니까? 관리자들 불편하게시리
댓글 입력 영역
* 비로그인 덧글의 IP 전체보기를 설정한 이글루입니다.


웹로그 검색