text 입력폼의 크기차이

[ripelee]

text 입력폼을 작성할때 한줄 text는 "input type=text size=30...", 여러줄 입력상자는
"textarea rows=20 cols=30..." 이런식으로 쓰자나여. 그런데 IE에서는 size= 와
cols= 의 크기를 같게주면 폼의 가로가 같게 표시되는데, Firefox에서는 textarea의
크기가 더 크게 표시되니까 전체 입력폼 모양이 이상하게 됩니다. 그럼 여기에서 표준html
에 벗어난 것은 어떤것인가요? IE에서도 Firefox에서도 똑같게 만드는 방법은 무엇인지
좀 가르쳐 주세요.

[박민권]

text 입력폼을 작성할때 한줄 text는 "input type=text size=30...", 여러줄 입력상자는
"textarea rows=20 cols=30..." 이런식으로 쓰자나여. 그런데 IE에서는 size= 와
cols= 의 크기를 같게주면 폼의 가로가 같게 표시되는데, Firefox에서는 textarea의
크기가 더 크게 표시되니까 전체 입력폼 모양이 이상하게 됩니다. 그럼 여기에서 표준html
에 벗어난 것은 어떤것인가요? IE에서도 Firefox에서도 똑같게 만드는 방법은 무엇인지
좀 가르쳐 주세요.

<input type="text" style="width: 100px;"> 이런식으로 css를 이용해 크기를
정해주면 IE와 불여우 둘다 같은 모습을 보여줍니다.

그런데 저는 요즘에 그냥 size="" 를 이용해서 크기를 잡습니다.
이유는 CSS가 적용되지 않을경우에도 크기가 유지되도록 하기 위함입니다.
input, textarea등의 form 객체의 크기와 모양에는 많이 신경쓰지 않으셔도 됩니다.
<select> 같은 경우도 똑같은 익스라도 윈도우xp에서 보는 것과 윈도우98에서 보는
모양이 틀리며 xp같은 경우는 테마를 무엇으로 사용하느냐에 따라서 전부 달라지기
때문에 의미가 없다는 생각이 들더군요.
여기 이 게시판 처럼 있는 모습 그대로의 form 객체가 더욱 사용하기 좋다는 느낌이 듭니다.

[ripelee]

제 질문의 요지가 잘못 전달되는것 같습니다. 한줄 text 입력폼을 작성하는 "input type=text..." 의 처리결과는 IE나 불여우가 같게 나타납니다. 어떤 엄격한(?) 서류양식을 작성하는 폼안에 text폼과 textarea폼이 세로로 나란히 작성된다고 할때 그 크기를 맞추어야 할 경우가 많습니다. IE에서는 size= 와 cols= 의 크기를 같게주면 가로크기가 같게 표시되는데 불여우에서는 textarea의 가로크기가 커져서 전체양식 모양이 흩트러지거나 심지어는 특정프레임을 벗어나 스크롤바가 나타나게 합니다. 이와같은 현상을 볼때 불여우에서 textarea 처리를 아직까지 표준에 맞게 처리하지 못하는게 아닌가하는 생각이 듭니다. 같은크기를 재야하는 척도를 text에서는 cm자로 재고 textarea에서는 inch자로 재듯이 척도가 통일되지 않은것 같이 말입니다. 저는 할수없이 사용자의 브라우져를 체크하여 브라우져에 따라 크기를 달리주는 cgi 프로그램으로 이문제를 임시방편으로 해결하고 있습니다만... 글쎄요... 항구적이고 표준적인 방법이 없을까 하고 질문을 올려본 겁니다...

[박민권]

제 질문의 요지가 잘못 전달되는것 같습니다. 한줄 text 입력폼을 작성하는 "input type=text..." 의 처리결과는 IE나 불여우가 같게 나타납니다. 어떤 엄격한(?) 서류양식을 작성하는 폼안에 text폼과 textarea폼이 세로로 나란히 작성된다고 할때 그 크기를 맞추어야 할 경우가 많습니다. IE에서는 size= 와 cols= 의 크기를 같게주면 가로크기가 같게 표시되는데 불여우에서는 textarea의 가로크기가 커져서 전체양식 모양이 흩트러지거나 심지어는 특정프레임을 벗어나 스크롤바가 나타나게 합니다. 이와같은 현상을 볼때 불여우에서 textarea 처리를 아직까지 표준에 맞게 처리하지 못하는게 아닌가하는 생각이 듭니다. 같은크기를 재야하는 척도를 text에서는 cm자로 재고 textarea에서는 inch자로 재듯이 척도가 통일되지 않은것 같이 말입니다. 저는 할수없이 사용자의 브라우져를 체크하여 브라우져에 따라 크기를 달리주는 cgi 프로그램으로 이문제를 임시방편으로 해결하고 있습니다만... 글쎄요... 항구적이고 표준적인 방법이 없을까 하고 질문을 올려본 겁니다...

질문의 요지는 잘못 전달되지 않았습니다. :)
위에서 말씀 드렸듯이 <textarea style="width: 200px; height: 100px;">
이런식으로 css를 사용하여 넓이와 높이를 맞출 경우 ie와 ff둘다 똑같이 보입니다.
마찬가지로 text 상자도 <input type="text" style="width: 200px;">
이렇게 하신다면 textarea객체와 같은 넓이를 보여줍니다.

한가지 차이점은 ie는 textarea에 아무 글씨가 없어도 새로 스크롤이 처음부터
오른편에 존재하지만 ff에서는 새로 길이가 길어지기 전까지는 스크롤이 보이지
않습니다.

[ripelee]

우선 두번씩이나 친절한 답변을 올려주신 박민권님께 감사드립니다.
css를 쓰니까 text폼과 textarea폼의 크기가 일치되어 양식이 흩트러지는 문제는 해결이 되는군요. 그러나 ie와 ff의 입력폼 치수 자체는 약간의 차이가 나는것 같습니다(ff가 조금더 크게표시됨). 또한 css를 쓰지않고 기본적인 방법(size=,cols=를 주는방법)으로도 입력폼을 맞출수 있도록(아직까지 미진한 모든 문제점을 포함하여) ff가 업그레이드되어서 하루빨리 확고한 자리를 잡기를 희망합니다. 써보니 ff가 ie보다 더 깔끔해보이고 쓰기가 좋을것 같네요. 두루두루 고맙습니다.

[hyeonseok]

저도 같은 문제로 고민을 좀 했었는데...두가지가 다릅니다.

1. input 이나 textarea 가 font 를 상속을 받지 못합니다. 이것은 Firefox 문제 같은데, font 설정을 같게 지정을 해주어야 합니다.

2. firefox 는 size 와 cols 을 같게 해도 textarea 가 조금 크게 나타나는데 그 조금 큰 부분이 바로 스크롤 바의 사이즈 입니다. 이것은 뚜렷한 표준이 없는데 firefox 의 경우 표현되는 컨텐츠에 중점을 둔 것이고 IE 의 경우 textarea 자체의 크기에 중점을 두어서 다르게 나오는 것입니다.
표준 block 모델의 해석을 볼 경우 width 가 block 의 크기가 아니라 content 의 크기를 지칭하는 것으로 볼때 firefox 의 표현이 더 표준의 해석에 근접한다고 볼 수 있습니다. 다시 말해서 size 와 cols 의 값이 같으면 firefox 에서해석하듯이 같은 갯수의 글자가 들어가는 것이 표준의 해석에 더 가깝습니다.
또한, 폭이라는 것은 디자인 적인 것이기 때문에 style 로 제어하는 것이 맞습니다. 두개의 너비가 다른 것을 버그라고 볼 수도 없고 두개의 너비를 같에 만드는 것을 업그레이드 라고 볼 수도 없습니다.

아마 앞으로도 바뀌지는 않을 것 같습니다.

Firefox 가 입력 폼이 조금 크게 나타나는 것도 IE 가 width 를 content 의 너비가 아닌 block 너비로 계산을 해서 border 나 padding 영역에서 차이가 나는 것입니다. 같은 width 를 지정해 주어도 IE 는 border, padding 을 width 에 포함시켜버리기 때문에 조금 작게 나오는 것입니다.