묻고답하기
<!DOCTYPE html> 에 맞게 게시판 스킨을 조정하면서 황당한 경험을 하고 있습니다.
2015.07.13 17:51
다음 2개의 소스를 보시면 알겠지만 첫번째 소스가 <!DOCTYPE html> 을 적용하지 않았을 때 소스이고 두번째가 <!DOCTYPE html> 을 적용했을 때 소스인데 2번째 소스의 결과는 왜 라인의 두께가 두꺼운 거지요? 이것 때문에 제 게시판 코멘트가 두꺼운 라인이 생겨 버렸는데 이거 html의 버그인 건가요? 황당하네요. 여기서 또 진척이 안되네요. 하 참 이런 황당한 버그도 있나요?
첫번째 소스 테스트: http://www.blrun.net/temp/thin_line1.html
두번재 소스 테스트: http://www.blrun.net/temp/thin_line1_1.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 프로그램 짜면서 이런 황당한 경우는 처음이네요. ㅡ_ㅡ
태그 연관 글
- [2018/09/03] 묻고답하기 [보안] 이번에 XE4 오픈소스 게시판을 utf-8 버전으로 업그레이드 했는데... *2
- [2018/09/03] 묻고답하기 제로보드 4 스킨 적용 도와주실 분 계신가요 *1
- [2016/03/20] 묻고답하기 Edge 브라우저에서 제 게시판 툴바 중에 특수문자랑 미디어 삽입이 동작하지 않는데 해결방법을 모르겠네요. *1
- [2016/03/17] 묻고답하기 XE4에서 자동저장 기능을 구현한 다음 더욱 진보시켜 최초 키스트로크 2회후 한번 저장하고 60초마다 저장되도록 소스를 수정했는데요, 한가지...
- [2015/09/17] Blog XE3 일정과 몇가지 계획에 대해 공유합니다 *9
댓글 2
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
로 DOCTYPE을 변경하지 않고도 HTML5 로 1px 라인을 긋는 방법이 그거였군요. 많은 도움이 되었습니다. YJSoft님의 친절한 답변에 정말 감사드립니다. HTML5가 무엇인지 하나도 몰랐는데 첫 맛배기를 한 셈이 됐네요. 오늘 하루 잘 마무리 하시고 편안한 밤 되시기 바랍니다. 다시한번 답변 감사드립니다. 꾸벅~
저도 오늘은 이만 잠자리로 가야겠습니다. YJSoft님도 안녕히 주무십시요.
첫번째 문서는 DTD 정의가 없으므로 오래된 HTML 페이지로 인식합니다. 따라서 대부분의 브라우저에서 Quirks 모드 등 하위 호환 모드로 동작하게 됩니다.
두번째 문서는 HTML5 DTD가 정의되어 있으므로 HTML5 모드로 동작합니다.
HTML4와 HTML5는 문서 표준이 다릅니다. 따라서, 화면에 보이는 모습도 차이가 날 수밖에 없습니다. (대표적으로 P 태그의 여백인데요, HTML4에서는 여백이 없지만 HTML5에서는 여백이 있습니다).
모든 브라우저에서 똑같은 결과를 얻으시려면 정확한 DTD를 선언해 주셔야 합니다.
본론으로 들어가서, 해당 부분은 table로 하실게 아니라 css의 border-top 속성을 이용하시는게 좋을것 같습니다.
첫번째 줄 역할을 하는 <tr> 전체를 제거한 뒤, 첫번째 tr 안 td style 부분에 border-top: 1px solid (색깔코드 # 붙여서); 를 넣어 주시면 됩니다. ( https://jsfiddle.net/bd39ngp5/ 이렇게요 )