table을 쓰지 않는 레이아웃 스킨 가운데 댓글 문제 해결 방안 정보
table을 쓰지 않는 레이아웃 스킨 가운데 댓글 문제 해결 방안![](http://sir.kr/data/member_image/te/termy.gif?1280162912)
본문
![](http://sir.kr/data/cheditor4/0907/UAFMwnQ5oD2l5vceU.gif)
안 되는 실력이다보니 정말 고민을 많이 했습니다.
그렇다고 table을 쓰자니 div 만으로 짜고자 하는 블럭에 table이 끼어있는 것은 싫고
UL 도 써보고 margin, padding에 픽셀값을 주어보기도 했지만
마지막에 찾은 결론은
코멘트 입력 부분을 아래와 같이 div 스타일을 적용하였습니다.
왜 이렇게 했는지 아시는 분은 아실 겁니다.
댓글(comment)이 한 두개 달리는 경우는 textarea 를 감싸는 div 부분에 적용한 픽셀 값이 깨지지 않지만 한 10개 정도 붙는다고 했을 경우 블럭이 깨집니다.
그래서 아래와 같이 적용해 보았습니다.
기존 스킨과 다른 점은 우측에 있던 댓글입력 input 버튼을 바로 위 div 우측정렬로 올려 놓았습니다.
초보자분들이 div 로 작업하실 때 헤매지 마시라고 올려드렸습니다.
<div style='float:left;width:auto;text-align:left;padding-top:10px;'>
<span style="cursor: pointer;" onclick="textarea_decrease('wr_content', 5);"><img src="<?=$board_skin_path?>/img/co_btn_up.gif" align='absmiddle' /></span>
<span style="cursor: pointer;" onclick="textarea_original('wr_content', 5);"><img src="<?=$board_skin_path?>/img/co_btn_init.gif" align='absmiddle' /></span>
<span style="cursor: pointer;" onclick="textarea_increase('wr_content', 5);"><img src="<?=$board_skin_path?>/img/co_btn_down.gif" align='absmiddle' /></span>
<? if ($is_guest) { ?>
이름 <INPUT type=text maxLength=20 size=10 name="wr_name" itemname="이름" required class=ed>
패스워드 <INPUT type=password maxLength=20 size=10 name="wr_password" itemname="패스워드" required class=ed>
<img src="<?=$board_skin_path?>/img/kcaptcha_img.gif" id='kcaptcha_image' border='0' width=120 height=60 onclick="imageClick();" style="cursor:pointer;" title="글자가 잘안보이는 경우 클릭하시면 새로운 글자가 나옵니다.">
<input title="왼쪽의 글자를 입력하세요." type="input" name="wr_key" size="10" itemname="자동등록방지" required class=ed align='absmiddle'>
<? } ?>
<input type=checkbox id="wr_secret" name="wr_secret" value="secret">비밀글
<? if ($comment_min || $comment_max) { ?><span id=char_count>글자</span><?}?>
</div>
<div style='float:right;width:80px;padding-top:10px;'><input type="image" src="<?=$board_skin_path?>/img/co_btn_write.gif" border=0 accesskey='s' title='댓글 작성 후 클릭해 주세요.'></div>
<div style='clear:both;'></div>
그렇다고 table을 쓰자니 div 만으로 짜고자 하는 블럭에 table이 끼어있는 것은 싫고
UL 도 써보고 margin, padding에 픽셀값을 주어보기도 했지만
마지막에 찾은 결론은
코멘트 입력 부분을 아래와 같이 div 스타일을 적용하였습니다.
왜 이렇게 했는지 아시는 분은 아실 겁니다.
댓글(comment)이 한 두개 달리는 경우는 textarea 를 감싸는 div 부분에 적용한 픽셀 값이 깨지지 않지만 한 10개 정도 붙는다고 했을 경우 블럭이 깨집니다.
그래서 아래와 같이 적용해 보았습니다.
기존 스킨과 다른 점은 우측에 있던 댓글입력 input 버튼을 바로 위 div 우측정렬로 올려 놓았습니다.
초보자분들이 div 로 작업하실 때 헤매지 마시라고 올려드렸습니다.
<div style='float:left;width:auto;text-align:left;padding-top:10px;'>
<span style="cursor: pointer;" onclick="textarea_decrease('wr_content', 5);"><img src="<?=$board_skin_path?>/img/co_btn_up.gif" align='absmiddle' /></span>
<span style="cursor: pointer;" onclick="textarea_original('wr_content', 5);"><img src="<?=$board_skin_path?>/img/co_btn_init.gif" align='absmiddle' /></span>
<span style="cursor: pointer;" onclick="textarea_increase('wr_content', 5);"><img src="<?=$board_skin_path?>/img/co_btn_down.gif" align='absmiddle' /></span>
<? if ($is_guest) { ?>
이름 <INPUT type=text maxLength=20 size=10 name="wr_name" itemname="이름" required class=ed>
패스워드 <INPUT type=password maxLength=20 size=10 name="wr_password" itemname="패스워드" required class=ed>
<img src="<?=$board_skin_path?>/img/kcaptcha_img.gif" id='kcaptcha_image' border='0' width=120 height=60 onclick="imageClick();" style="cursor:pointer;" title="글자가 잘안보이는 경우 클릭하시면 새로운 글자가 나옵니다.">
<input title="왼쪽의 글자를 입력하세요." type="input" name="wr_key" size="10" itemname="자동등록방지" required class=ed align='absmiddle'>
<? } ?>
<input type=checkbox id="wr_secret" name="wr_secret" value="secret">비밀글
<? if ($comment_min || $comment_max) { ?><span id=char_count>글자</span><?}?>
</div>
<div style='float:right;width:80px;padding-top:10px;'><input type="image" src="<?=$board_skin_path?>/img/co_btn_write.gif" border=0 accesskey='s' title='댓글 작성 후 클릭해 주세요.'></div>
<div style='clear:both;'></div>
<div>
<textarea id="wr_content" name="wr_content" rows=5 itemname="내용" required
<? if ($comment_min || $comment_max) { ?>onkeyup="check_byte('wr_content', 'char_count');"<?}?> style='position:relative;width:100%; word-break:break-all;' class=tx></textarea>
<? if ($comment_min || $comment_max) { ?><script language="javascript"> check_byte('wr_content', 'char_count'); </script><?}?>
</div>
<textarea id="wr_content" name="wr_content" rows=5 itemname="내용" required
<? if ($comment_min || $comment_max) { ?>onkeyup="check_byte('wr_content', 'char_count');"<?}?> style='position:relative;width:100%; word-break:break-all;' class=tx></textarea>
<? if ($comment_min || $comment_max) { ?><script language="javascript"> check_byte('wr_content', 'char_count'); </script><?}?>
</div>
추천
0
0
댓글 1개
게시판은 table로 하는 게 맞는 듯...