<table>
<form>
<tr>
<td></td>
</tr>
</form>
</table>

문법상 분명히 잘못됐음에도 디자이너가 이런짓을 가끔 하는데요,
<form>
<table>
<tr>
<td></td>
</tr>
</table>
</form>

이렇게 하면 form 없었을때 맞춰놓은 디자인이 흐트러진다더군요.

보니까 공백이 생기네요.

원인은 form 태그의 속성이었습니다.

<style>
form { display : inline; }
</style>

이렇게 하면 외관상 form 태그 있으나 없으나 전혀 차이 없게 됩니다.

------------------------

평소엔 관심도 없었는데 문법검사기가 오류를 내길래 찜찜해서 예전에 찾아놓은거
지금 생각나서 올려봅니다.

 
 
-----------------------------------------------------------------
 
 BOSong 전 걍 위 스타일로 하는데.. 하긴 디자인 무시하고 하기땜신지도 08/17 17:11:32 
 
 행복한고니 form {margin:0px}
-_-a

어차피 테이블이 block 속성이라서 margin 을 0으로 만드는 것으로도 충분한 것 같던데요? 08/17 17:14:01 
 
 SanJuk 뭐 이렇게 하셔두 됩니당..
form{
border:0;margin:0;
}
 08/17 17:46:37 
 
 조은하루 form { border:0px }
저두 비슷하게 08/17 17:48:54 
 
 시지 <tr>다음에 집어넣으면 이상없습니다.
이도 저도 귀찮으시면..이방법도..얌얌. 08/17 17:48:57 
 
 바람돌이 저도
<tr>
<form>
<td>

이렇게 씁니다 +_+ 08/17 18:19:38 
 
 삽질맨 저도 tr / td사에에 넣었는데  08/17 18:47:30 
 
 지나가다 저도 첫번째 형식으로 08/17 18:59:25 
 
 이종민 form {margin:0px} -_-a 08/17 19:02:21 
 
 Simsim 어이없다는.. -_-; margin:0px; 08/17 19:09:22 
 
 슝~! 팁엔텍에 질문이라...... 좋아..좋아~ 08/17 21:59:40 
 
 역시 팁엔텍에 질문올리면 안되는데도 질문올리셨네~
그럼에도 불구하고, 친절히 답변해주는 많은 분들..
역시 php스쿨 분들이 제일 착합니다.
nzeo.com 가보면 초보자가 모르고 질문하면 인간들이 아무
설명없이 욕만 해대는데~ㅎㅎ 08/17 22:02:25 
 
 동글이 <form name="form" method="post" action="" style="margin: 0px"> 08/17 22:57:08 
 
 난짱뽕~ 내가 몇일동안 없었더니 이모양이군효.... 08/17 23:47:01 
 
 이렇게.. 저는 테이블 바로 밖에 form 을 넣으면 테이블의 align이 제대로 먹지 않더군요,
그 후로 위 방법으로 썼었습니다. 08/18 1:55:01 
 
 송효진 디자이너가 margin:0px 정도는 알고 있었습니다.
그래도 사이에 끼워넣기를 하더군요.
끼워넣기는 분명 잘못된거고, margin:0px 는 안먹는 경우가 있었습니다.

이 글이 질문이라는 사람은 뭘보고 그렇게 판단한건지?
이거 보고 가르쳐주라는데. 08/18 9:01:04 
 
 골땡초보 쩝.. 송효진님 팁텍 좋은거 많이 올려주신 분인데... 비방이 좀 심하네요... ㅡ.ㅡㅋ
음.. 저도 코멘트 단 분들처럼 margin:0나 tr태그 사이에 넣었었는데.. 훔... IE에선 FORM태그의 기본 display스타일값이 block이었군요.
block -> Object is rendered as a block element.
inline -> Default. Object is rendered as an inline element sized by the dimensions of the content.
block element로 render 된다는 것이 어떻게 렌더링 된다는 뜻일까요? 08/18 10:02:34 
 
 송효진 div 와 span 의 차이가 block 과 inline 의 차이입니다.
<div>asdf</div>zxcv 하면
asdf

zxcv
이렇게 되고,
<span>asdf</span>zxcv
하면
asdfzxcv
이렇게 되죠. 08/18 10:06:32 
 
 궁금 첫번째 방법이 문법적 오류가 있다면 실제 브라우져에서 무슨 문제가 있나요? 문제가 없다면 써도 상관 없지 않나요? 08/18 10:31:42 
 
 골땡초보 아... 한 라인에 표시하라는 뜻이군요...
그럼 TABLE도 스타일을 inline으로 주면 옆에 잘 나오겠네요
실험후 -> 캬 잘 나오네요 ^^; 감사합니다. 좋은거 알았네요. 08/18 10:32:18 
 
 골땡초보 [작성자:골땡초보] => 음.. 코멘트 작성자로 검색이 안되서 붙이려고 노력하는데 자꾸 까먹네요. (전영규님 습관 카피...)

그런데 왜 block속성을 가진 것들 중에 어떤건 엘리먼트중 어떤 건 form태그처럼 margin이 떼어지고 어떤 건 table태그처럼 margin이 떼어지지 않는 건가요? 08/18 10:38:11 
 
 골땡초보 [작성자:골땡초보]
display속성을 block에서 inline으로만 바꾸었는데 여백이 없어지는 것은 inline자체가 여백을 무시하는 의미를 가지고 있는 것인지... 아니면 block속성에 여백이 자동으로 들어가 있는 것들이 있어 inline으로 바꾸면 당연히 없어지는 것인지...
질문이 두서가 없네요 ㅡ.ㅡ 헷갈린 것들이 하도 많아서.. body도 block속성중에 하나일 텐데 body태그는 왜 이상하게 topMargin하고 leftMargin만 정해줘도 bottom과 right margin이 같이 적용이 되는지 ...
에궁... 질문쟁이가 되어가는듯... ㅜ.ㅜ  08/18 10:45:11 
 
 음... 내용을 따지자면 잘못된 얘기는 아니지만,
디자이너를 무시하는 듯한 어투는 확실히 잘못 되었군요. 08/18 11:12:50 
 
 지나가다.. 예전에 테스트했던 내용입니다..
<table><form>....</form></table>하면..
ie6.0 은 괜찮은데. 5.0에서 1px 가량..뜨더군요...

<form><table>,,,,</form></table>이러면. 괜찮더군요...;;

 08/18 11:52:37 
 
 덩글이 form {margin:0px;padding:0px} 08/18 12:03:14 
 
 eouia <table>을 안쓰는게 가장 좋은 해결책입니다. form디자인하는데 왜 table로 정렬을 맞추나요? 08/18 13:23:06 
 
 eouia div와 span만으로 디자인해내는 디자이너는 우리나라에는 없단 말인감... 08/18 13:23:41 
 
 그건 디자이너가 아니라 코더 역이겠죠 -_- 08/18 13:46:26 
 
 골땡초보 table을 쓰면 위 아래줄, 좌 우칸등의 간격배분이 균등하게 이루어져서가 아닌가요? 그런 균등배분은 span이나 div로 교체되기 좀 힘들 것 같은데요. 어떻게 바뀌는 건가요?

가령
<TABLE border=1>
<TR>
<TD>aa</TD>
<TD>bbbb</TD>
<TD>ccc</TD>
</TR>
<TR>
<TD>eeeeee</TD>
<TD>aa</TD>
<TD>dd</TD>
</TR>
</TABLE> 이런식의 레이아웃이 자연스럽게 바뀔 수 있는지요? 08/18 14:00:00 
 
 기다림 그건님 말씀에 올인!!
디쟈이너는 디쟈인만하는게 맞죠
우리나라웹은 디쟈이너 = 디쟈인 + 코딩;
이건 잘못되었다고 생각됩니다.
조금만 체계있는곳은 디쟈이너 있고 코더있고
다 분리되어있죠..

그리고 소스가 어찌되었건
레이아웃만 디쟈이너가 원하는대로 뽑아주면 끝~_~)=b 08/18 16:05:52 
 
 싸이 음....좋은 팁이네요....
저도 끼워넣기를 했었는뎀...ㅋㅋ 08/18 17:22:55 
 
 루루 테이블 쓰지 말고 CSS로 씁시다.  08/18 17:41:30 
 
 eouia table 안쓰고 레이아웃 잡는 거 궁금하시면,
http://www.csszengarden.com/
에 가보시길.
http://www.csszengarden.com/?cssfile=113%2F113%2Ecss
http://www.csszengarden.com/?cssfile=111%2F111%2Ecss
http://www.csszengarden.com/?cssfile=112%2F112%2Ecss
http://www.csszengarden.com/?cssfile=114%2F114%2Ecss
http://www.csszengarden.com/?cssfile=http://www.leeenglestone.co.uk/zengarden/zengarden-sample.css
http://www.csszengarden.com/?cssfile=http://www.candice.cat.net.au/css/sample.css

그외에도 많이 있지만..
위에 예로 든 페이지들이 전부 TABLE 없이 div와 span, h1~h5만으로 제작되었습니다.
더 중요한 건, 위에 예로 든 페이지들을 소스보기 해보시면 아시겠지만... HTML 소스가 모두 동일합니다. 단지 CSS만 가지고 디자인은 얼마든지 만들 수 있습니다. 08/18 18:19:28 
 
 김승진 송효진 //
말씀하신 것은 맞는데요..
<DIV> 태그는 문서를 논리적으로 분할 할때 사용하는 거예요.
<SPAN> 태그는 글자에 뭔짓을 할때 사용하는 거구요.
예를 들어서 <div>는 그 줄 전체를 쓰지만..
<span>은 그 해당 부분만을 쓰거든요..
예를 들어서 style='background-color:#ccffcc'
해보시면 무슨 뜻인지 이해하실 꺼예요..
<div> 개행되는 거랑 관련이 있어요. 08/18 22:14:00 
 
 sh. 김승진// div는 논리적, span은 글자라는건 어떤 근거인지 모르겠습니다.
div는 블럭레벨, span은 인라인 엘리먼트들일 뿐입니다.
http://trio.co.kr/webrefer/html/struct/global.html#h-7.5.3
을 보시면 자세하게 나와있습니다. 08/19 1:50:54 
 
 eouia 둘다 도큐먼트의 구조적 영역지정을 할 때 씁니다. 관습적으로 div 태그 해석시 대부분의 브라우저는 블록 영역으로 해석하고 span은 인라인으로 해석하지만 꼭 그렇다는 건 아니고... 또한 XHTML의 DTD용법에서 차이가 있습니다. CSS나 DTD레벨에서 변경을 통해 브라우저 해석시 보이는 외형은 변경가능하니 외형으로 구분하는 건 무의미하고, 문서구조에서의 용도에 따라 구분하여 쓰는 것이 옳습니다.  08/19 2:17:41 
 
 Recluse 와우 놀랍군요. CSS만 가지고 저런 레이아웃이 나오네요.
eouia님 감사합니다~ 08/19 7:38:48 
 
 골땡초보 eouia님 감사합니다. 예전에 '미친놈들'이란 닉을 가진 분이 팁텍에 글을 썼을 때 소개됐었던 url이군요. 이제라도 공부해야겠습니다. ㅜ.ㅜ 08/19 9:51:09 
 
 shyxu 좋은 정보네요.
저희회사에서는 <form> 태그는 프로그래머인 제가 넣어서리... .. . 08/19 10:51:21 
 
 지나가다
css 로 레이아웃짜면..
가운데 정렬..이나 '유동적인 정렬'하기 힘들지 않나요..?
expression 쓰면... 리소스를 너무 많이 먹어서..
<body><table width='700' align='center'> 이기능..
그냥 css 만으로 구현하기 힘들던데...(expression 말구요..) 08/19 11:01:50 
 
 레인보우 저희 디자이너는 폼은 삽입할 생각도 안할 뿐더러 파일인풋도 텍스트타입이랑 버튼이미지 달랑 넣어서 던져줍니다.. ㅡㅡ;;
그냥 그정도 해주는것도 감사하게 받아서 수정합니다.. 08/19 12:09:01 
 
 김승진 w3c.org 08/19 13:36:20 
 
 소리 어라.. 전 여태 table 안에다가 form 을 집어넣었는데..
그리고 이건.. 디자이너의 잘못이 아니라 취향의 차이겠죠.
무시하는 어투도 그렇고.. 여태까진 송효진 님의 글을 잘 봐왔는데..
이건 아니다 싶네요. ^_^ 08/19 14:25:30 
 
 송효진 자꾸 싸움 되는것 같아 댓글 안달려고 했는데요.
제 생각 몇가지를 적습니다.

1. tidy 에서 warning 이 나오는건 자제하고 싶습니다.
오류검사기를 돌리면 소스가 엉키기도 하고, 드림위버에 그렇게 된 소스는 위지윅 편집이 잘 안됩니다.

2. 디자이너에게 가르쳐 주라고 한 것은 그걸 알아내는것이 디자이너 몫이 아니라서 입니다.
디자이너는 최선을 다해 좋은 디자인을 만드는게 임무지요. 그 과정에서 안되는걸 되게 하기 위해 문법이 잘못되든 익스플로러 전용으로 만들든 탓할 수 없다고 봅니다.
디자이너가 드림위버를 애용하는데, 위지윅기능에 이상이 오는걸 감수하면서 까지 form 을 사이에 끼워 넣습니다.
그래서 이것저것 열심히 알아보고 알아내어 가르쳐주었습니다.
삽을 놓으라고.

3. 본문을 여러번 다시 읽어봐도, 1) 우리 디자이너가 왜 문법을 무시할까? 2) 대화를 통해 디자인에 문제 있음을 인지 3) 열심히 해결법 찾아서 4) 알려주었다.
이상의 내용은 없는것 같습니다만,
이것이 오해인지 내 무의식이 잘난척 하는건지...
오해라 주장하고 싶습니다만.

다음 팁부터는 다시 예전 글 처럼 무미건조하게 작성해야 겠습니다.
말을 많이 적으면 말이 많아지는군요.;) 08/19 14:47:53 
 
 디토 지나가다// text-align하고 float을 쓰면 될걸요. 08/19 16:58:45 
 
 쩡훈 table 밖에 써주세요~!!
표준이란게 왜 있는겝니까?!
 08/19 21:49:29 
 
 요금후납 eouia //
알려주신 사이트의 CSS로 맹근거 봤는데요..
어떤면에선 상당히 비효율적으로 보이네요. 아직 써보질 않아서 그런가..
테이블로 짜는편이 간편하지 않나요? eouia 님은 모두 CSS로 디자인 하시는지?? 08/20 3:05:49 
 
 디토 요금후납// CSS로 하는게 렌더링 속도도 더 빠르다는 것 같던데요? 08/20 7:43:51 
 
 Net 위에 적힌 어드레스를 봤는데...
음..... 우와....환상이네요...
모듈이라는 개념을 프밍할때만 생각했었는데..
html에도 적용이 가능하다는게...음...대단한....
비록 css에서 모든걸 입력해주어야 하는 귀차니즘이 존재하긴 하지만...
어차피 동일한 엘리먼트와 틀이기 때문에.... 익숙해지면 굉장히 편할듯... 08/20 9:29:01 
 
 소리 그게 잘못된 문법이였나요?
초창기 때 드림위버로 접하고.. 그것으로 인해 맞는 문법으로 알고 있었는데..
틀린 건가보군요.
흐.. -_-;

그리고 저 위에 제가 남긴 덧글의 내용에 대해선 저도 오해가 있었던 모양입니다.
사과드리고.. 다음에도 좋은 팁 부탁드려요. ^_^