html과 html5의 input 엘러먼트 스타일 차이... 블록

아무리 생각해도 DOCTYPE을 지정한 html5의 input 엘러먼트 스타일이 이해가 안됩니다. 1-1 소스는 html 의 input 엘러먼트인데 20px의 높이가 type이 text이든지 file 이든지 상관없이 균일하다는 것을 알 수 있지만 1-2 소스를 보시면 알겠지만 DOCTYPE을 지정하면 text 타입의 input이 세로 길이가 더 길고 그 안에 텍스트를 입력해 봐도 글이 상단으로 밀리는 것을 확인할 수 있습니다.

2-1 소스는 다시 html 인데 height를 17px로 줄여도 input type이 text든 file이든 상관없이 균일하게 높이가 조정되는 것을 확인할 수 있습니다. 그러나 2-2 소스를 보시면 알겠지만 DOCTYPE을 지정하면 type이 text인 엘러먼트는 높이가 약간 줄고 그 안에 텍스트는 세로로 중간 정렬이 되지만 type이 file인 엘러먼트는 세로폭이 많이 줄어 보기가 흉한 것을 알 수 있습니다.

이거 왜 그런 거예요. 아이참 EZshare 스킨 모양 지금 다듬으려고 하다가 짜증이 막 밀려오네요.

아래 링크로 함 테스트해 해보세요. IE8에서 테스트해야 확실히 그 의미를 알 수 있구요 크롬에서도 비슷한 현상을 발견하실 수 있습니다.


[1-1 소스- input_css1.html]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<HTML>
<HEAD>
<TITLE> DOCTYPE 미지정시 input 엘러먼트 스타일 </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<meta name="viewport" content="width=device-width">
<style type="text/css">
<!--
.zv3_input {border:solid 1;border-color:000000;background-color:FFFFFF;height:20px}
//-->
</style>
</HEAD>
 
<BODY>
<table border=0 width=100% cellsapcing=1 cellpadding=0 class=zv3_writeform style=table-layout:fixed>
<col width=80></col><col width=></col>
<tr>
  <td><img src=http://www.blrun.net/bbs/skin/EZshareBBS_black/t.gif border=0 height=1><br><table cellspacing=0 cellpadding=0 width=100% height=100%><tr><td align=right><img src=http://www.blrun.net/bbs/skin/EZshareBBS_black/w_link1.gif></td></tr></table></td>
  <td align=left><input type=text name=sitelink1 value="" maxlength=200 class=zv3_input></td>
</tr>
<tr>
  <td><img src=http://www.blrun.net/bbs/skin/EZshareBBS_black/t.gif border=0 height=1><br><table cellspacing=0 cellpadding=0 width=100% height=100%><tr><td align=right><img src=http://www.blrun.net/bbs/skin/EZshareBBS_black/w_link2.gif></td></tr></table></td>
  <td align=left><input type=text name=sitelink2 value="" maxlength=200 class=zv3_input></td>
</tr>
<tr>
  <td><img src=http://www.blrun.net/bbs/skin/EZshareBBS_black/t.gif border=0 height=1><br><table cellspacing=0 cellpadding=0 width=100% height=100%><tr><td align=right><img src=http://www.blrun.net/bbs/skin/EZshareBBS_black/w_upload1.gif></td></tr></table></td>
  <td align=left><input type=file name=file1 maxlength=255 class=zv3_input></td>
</tr>
<tr>
  <td><img src=http://www.blrun.net/bbs/skin/EZshareBBS_black/t.gif border=0 height=1><br><table cellspacing=0 cellpadding=0 width=100% height=100%><tr><td align=right><img src=http://www.blrun.net/bbs/skin/EZshareBBS_black/w_upload2.gif></td></tr></table></td>
  <td align=left><input type=file name=file2 maxlength=255 class=zv3_input></td>
</tr>
</table>
</BODY>
</HTML>

[1-2 소스- input_css1_1.html]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE> DOCTYPE 지정시 input 엘러먼트 스타일 </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<meta name="viewport" content="width=device-width">
<style type="text/css">
<!--
.zv3_input {border:solid 1;border-color:000000;background-color:FFFFFF;height:20px}
//-->
</style>
</HEAD>
 
<BODY>
<table border=0 width=100% cellsapcing=1 cellpadding=0 class=zv3_writeform style=table-layout:fixed>
<col width=80></col><col width=></col>
<tr>
  <td><img src=http://www.blrun.net/bbs/skin/EZshareBBS_black/t.gif border=0 height=1><br><table cellspacing=0 cellpadding=0 width=100% height=100%><tr><td align=right><img src=http://www.blrun.net/bbs/skin/EZshareBBS_black/w_link1.gif></td></tr></table></td>
  <td align=left><input type=text name=sitelink1 value="" maxlength=200 class=zv3_input></td>
</tr>
<tr>
  <td><img src=http://www.blrun.net/bbs/skin/EZshareBBS_black/t.gif border=0 height=1><br><table cellspacing=0 cellpadding=0 width=100% height=100%><tr><td align=right><img src=http://www.blrun.net/bbs/skin/EZshareBBS_black/w_link2.gif></td></tr></table></td>
  <td align=left><input type=text name=sitelink2 value="" maxlength=200 class=zv3_input></td>
</tr>
<tr>
  <td><img src=http://www.blrun.net/bbs/skin/EZshareBBS_black/t.gif border=0 height=1><br><table cellspacing=0 cellpadding=0 width=100% height=100%><tr><td align=right><img src=http://www.blrun.net/bbs/skin/EZshareBBS_black/w_upload1.gif></td></tr></table></td>
  <td align=left><input type=file name=file1 maxlength=255 class=zv3_input></td>
</tr>
<tr>
  <td><img src=http://www.blrun.net/bbs/skin/EZshareBBS_black/t.gif border=0 height=1><br><table cellspacing=0 cellpadding=0 width=100% height=100%><tr><td align=right><img src=http://www.blrun.net/bbs/skin/EZshareBBS_black/w_upload2.gif></td></tr></table></td>
  <td align=left><input type=file name=file2 maxlength=255 class=zv3_input></td>
</tr>
</table>
</BODY>
</HTML>

[2-1 소스- input_css2.html]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<HTML>
<HEAD>
<TITLE> DOCTYPE 미지정시 input 엘러먼트 얇은 높이 스타일 </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<meta name="viewport" content="width=device-width">
<style type="text/css">
<!--
.zv3_input {border:solid 1;border-color:000000;background-color:FFFFFF;height:17px}
//-->
</style>
</HEAD>
 
<BODY>
<table border=0 width=100% cellsapcing=1 cellpadding=0 class=zv3_writeform style=table-layout:fixed>
<col width=80></col><col width=></col>
<tr>
  <td><img src=http://www.blrun.net/bbs/skin/EZshareBBS_black/t.gif border=0 height=1><br><table cellspacing=0 cellpadding=0 width=100% height=100%><tr><td align=right><img src=http://www.blrun.net/bbs/skin/EZshareBBS_black/w_link1.gif></td></tr></table></td>
  <td align=left><input type=text name=sitelink1 value="" maxlength=200 class=zv3_input></td>
</tr>
<tr>
  <td><img src=http://www.blrun.net/bbs/skin/EZshareBBS_black/t.gif border=0 height=1><br><table cellspacing=0 cellpadding=0 width=100% height=100%><tr><td align=right><img src=http://www.blrun.net/bbs/skin/EZshareBBS_black/w_link2.gif></td></tr></table></td>
  <td align=left><input type=text name=sitelink2 value="" maxlength=200 class=zv3_input></td>
</tr>
<tr>
  <td><img src=http://www.blrun.net/bbs/skin/EZshareBBS_black/t.gif border=0 height=1><br><table cellspacing=0 cellpadding=0 width=100% height=100%><tr><td align=right><img src=http://www.blrun.net/bbs/skin/EZshareBBS_black/w_upload1.gif></td></tr></table></td>
  <td align=left><input type=file name=file1 maxlength=255 class=zv3_input></td>
</tr>
<tr>
  <td><img src=http://www.blrun.net/bbs/skin/EZshareBBS_black/t.gif border=0 height=1><br><table cellspacing=0 cellpadding=0 width=100% height=100%><tr><td align=right><img src=http://www.blrun.net/bbs/skin/EZshareBBS_black/w_upload2.gif></td></tr></table></td>
  <td align=left><input type=file name=file2 maxlength=255 class=zv3_input></td>
</tr>
</table>
</BODY>
</HTML>

[2-2 소스- input_css2_1.html]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE> DOCTYPE 지정시 input 엘러먼트 얇은 높이 스타일 </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<meta name="viewport" content="width=device-width">
<style type="text/css">
<!--
.zv3_input {border:solid 1;border-color:000000;background-color:FFFFFF;height:17px}
//-->
</style>
</HEAD>
 
<BODY>
<table border=0 width=100% cellsapcing=1 cellpadding=0 class=zv3_writeform style=table-layout:fixed>
<col width=80></col><col width=></col>
<tr>
  <td><img src=http://www.blrun.net/bbs/skin/EZshareBBS_black/t.gif border=0 height=1><br><table cellspacing=0 cellpadding=0 width=100% height=100%><tr><td align=right><img src=http://www.blrun.net/bbs/skin/EZshareBBS_black/w_link1.gif></td></tr></table></td>
  <td align=left><input type=text name=sitelink1 value="" maxlength=200 class=zv3_input></td>
</tr>
<tr>
  <td><img src=http://www.blrun.net/bbs/skin/EZshareBBS_black/t.gif border=0 height=1><br><table cellspacing=0 cellpadding=0 width=100% height=100%><tr><td align=right><img src=http://www.blrun.net/bbs/skin/EZshareBBS_black/w_link2.gif></td></tr></table></td>
  <td align=left><input type=text name=sitelink2 value="" maxlength=200 class=zv3_input></td>
</tr>
<tr>
  <td><img src=http://www.blrun.net/bbs/skin/EZshareBBS_black/t.gif border=0 height=1><br><table cellspacing=0 cellpadding=0 width=100% height=100%><tr><td align=right><img src=http://www.blrun.net/bbs/skin/EZshareBBS_black/w_upload1.gif></td></tr></table></td>
  <td align=left><input type=file name=file1 maxlength=255 class=zv3_input></td>
</tr>
<tr>
  <td><img src=http://www.blrun.net/bbs/skin/EZshareBBS_black/t.gif border=0 height=1><br><table cellspacing=0 cellpadding=0 width=100% height=100%><tr><td align=right><img src=http://www.blrun.net/bbs/skin/EZshareBBS_black/w_upload2.gif></td></tr></table></td>
  <td align=left><input type=file name=file2 maxlength=255 class=zv3_input></td>
</tr>
</table>
</BODY>
</HTML>

덧글

  • 희망의빛™ 2015/07/15 18:56 # 답글

    즉 DOCTYPE 을 지정해서 input 엘러먼트의 높이를 CSS로 지정하려면 클래스를 text와 file 타입 두가지로 따로 만들어야 한다는 이야기입니다. 헐~ ㅡ_ㅡ;
  • 희망의빛™ 2015/07/15 19:04 #

    ㅋㅋ 이글루스에서도 IE8에서 보는 거랑 크롬에서 보는 거랑 input text 상자 모양이 많이 다르네요. 한번 비교해 보세요. ㅎㅎ
  • Hide_D 2015/07/15 20:08 # 답글

    남들 다 맞고 혼자 틀리는 것을, 나 빼고 다 틀렸다고 우기는 분이 여기에...

    1. 희망의빛™이 사용중인 코드들이 웹 표준을 따르지 않아, doctype을 지정할 경우 깨지는 것.
    2. doctype을 지정하지 않을 때 동작하는 quark 모드(호환성 모드)에서 IE 8과 그 이전 버전의 '오동작'은 매우 유명.
    이 때문에 '최신' 자바스크립트 라이브러리들은 IE8과 그 이하 버전을 지원하지 않음. jQuery 2가 대표적.
  • 희망의빛™ 2015/07/15 21:02 #

    ㅋㅋㅋ 이글루스도 마찬가지라니까요. IE8에서 함 확인해 보세요.
  • ㅋㅋ 2015/07/15 21:43 # 삭제

    IE8을 안쓰면 되지 않을까요?
  • 조현병도풍년 2015/07/15 22:47 # 삭제

    혼자쓰는 IE8과 윈도우판 사파리로 참 잘 노시는군요
  • Hide_D 2015/07/16 02:26 #

    무슨 뜻인지 이해를 못하시는 모양인데,
    코드를 아무리 잘 짜도 IE8 혼자 따로 논다는겁니다.

    그래서 요새는 "기능상 문제가 없다면" IE8에서 다르던 말던 걍 냅두는거고.


    + 코드 보니 tr이 중첩되어 있는데, 수정하시죠.
  • 희망의빛™ 2015/07/16 06:07 #

    전 html5로 DOCTYPE을 지정해서는 IE8과의 호환성을 맞추기가 어렵다는 뜻이었죠 본문을 보면 아시겠지만... 마지막 부분의 </tr> 태그 중첩은 수정했습니다.
  • Hide_D 2015/07/16 08:15 #

    애초에 IE8은 HTML5 지원도 못할 뿐더러 xhtml 1.0조차도 제대로 지원 못하고 낑낑대는 놈인데, IE8 목표로 해서 어따씁니까.

    거기다가 고작 이 코드 만드는데 table을 중첩해서 쓰고 앉아있으니...
  • DXY 2015/07/16 00:18 # 삭제 답글

    님 저 윈도98쓰는데
    윈도98에서는 IE8이 안깔려서 IE6도 지원해주세요
  • 희망의빛™ 2015/07/16 17:39 #

    제가 윈도우98과의 호환성을 위해 지금 jquery를 사용하지 않고 prototype을 사용하는 방법을 강구 중입니다. 제가 jquey로는 윈도우98에서 글쓰기 자동저장 기능을 구현할 수 없기 때문에 지금 시험적인 코드를 구성중입니다. 조만간 해법이 나오면 윈도우98 IE6에서도 호환이 되는 방법이 있는지를 다시 포스팅 하겠습니다. ^^:
  • 무한 2015/07/16 03:01 # 답글

    지금까지 다른 개발자들이 수년간 차근차근 시간을 들여 고쳐왔던 걸 주인장께서는 당장에 고치려니 온갖 문제가 생기는 겁니다. 하물려 주인장님이 쓰는 베이스에 깔려있는 놈이 그보다 더 오래됐으니...

    윈도우나 IE나 웹표준이나 꾸준히 좋은 방향으로 (편의성이든 보안이든) 발전하고 있고, 구시대의 유물인 윈도우 XP와 IE8을 가지고 요즘 게 나쁘다! 그러는 거 자체가 기술에 대한 지식이나 수준이 현저히 낮다는 걸 증명하는 것 밖에 안 됩니다.
    그간 사건사고 터진게 얼마나 많고... 그걸 고쳐나간 결과가 최신의 윈도우, IE, 웹표준 등등입니다.

    이런 불평불만을 터트리는 것 보다 지금 마음에 안 들어하시는 HTML5와 기타등등 다른 기술들이 왜! 나왔는지, 어떻게 사용할 수 있는지 공부하세요.

    현업 프로그래머들은 대부분 이런 변화를 긍정적으로 여깁니다.
  • DXY 2015/07/16 11:07 # 삭제 답글

    그냥 HTML5를 쓰지 마세요. XP시절 HTML 4.0에 안주하고 계시면 될 것 아니겠습니까?
  • 절망의빛 2015/07/16 13:50 # 삭제 답글

    자동차 전용도로에 리어카 끌고 나가놓고는 아스팥트 뜨겁다고 난리여..ㅡㅡ;
  • 나인테일 2015/07/16 17:10 # 답글

    IE8에서 HTML5 코딩이 에러나는게 당연하죠.
    그냥 IE8 이전 브라우저에서는 <!--[if !IE]> 코드로 맞추는걸 추천.
  • 희망의빛™ 2015/07/16 17:44 #

    제가 윈도우98 IE6과의 글쓰기 자동저장 기능 호환성을 위해 prototype 을 심각하게 고려 중인데 그건 어떻습니까? 이글루스는 이걸 사용하여 글쓰기 자동 저장을 구현했더라구요. 조금만 더 구글링을 해보면 해당 코드 예제를 산출할 수 있을 것 같습니다.
  • 나인테일 2015/07/16 18:09 #

    하위호환이 그렇게 중요하다면 그게 답이겠지요.
  • 희망의빛™ 2015/08/16 22:35 #

    근데 문제가 prototype 을 쓰려면 syntaxhighlighter 도 그에 맞게끔 고쳐야 하는데 신택스하이라이트가 jquery로 돼 있어서 그게 쉽지 않은 문제더라구요. 제가 jquery 를 prototype 으로 바꾸는 방법을 찾아보았지만 구글에서도 거의 정보가 나와있질 않고 나와있는 것도 구체적인 정보를 찾을 수가 없어서 일단 글쓰기 자동저장 기능은 윈도우즈98 호환성 문제 때문에 당분간 보류하기로 결정하였습니다. 참 아쉽게 되었네요. 일단 "오픈소스 게시판 수정증보판 1.2.4.102 버전" 을 마지막 배포 버전으로 마무리할 생각이며 글쓰기 자동저장 관련 수정파일은 전부 리네임해 놓았습니다. ㅡ_ㅡ
댓글 입력 영역
* 비로그인 덧글의 IP 전체보기를 설정한 이글루입니다.


웹로그 검색