덧글(코멘트) 입력폼 CSS로 간략하게 표현하기 정보
덧글(코멘트) 입력폼 CSS로 간략하게 표현하기관련링크
본문
아래에 이어서 코멘트 입력부분을 CSS로 정리한것입니다.
높이가 가변이기때문에 백그라운드 이미지를 repeat-y 형태가 되는것이 좋은데 원본대로 repeat-x 로 그대로 두었습니다.
배경이미지를 사용하는경우 참고해서 고쳐쓰세요.
-------------------------------------------
스타일;
#comment_write { width:100%; border:none; }
#comment_write_row { width:98%; height:auto; min-height:190px; margin:10px 0; border:1px solid #EEEEEE; }
#comment_write_control { width:100%; height:50px; padding:5px 15px; overflow:visible; }
#comment_write_control img { vertical-align:bottom; }
#comment_write_conts { width:98%; height:auto; padding:10px; }
#comment_write_txts { float:left; width:85%; height:auto; }
#comment_write_btn { float:left; width:15%; height:auto; margin:20px 0; text-align:center; }
-------------------------------------------
<!-- 코멘트 입력 -->
<? if ($is_comment_write) { ?>
<div id="comment_write" style="display:none;">
<form name="fviewcomment" method="post" action="./write_comment_update.php" onsubmit="return fviewcomment_submit(this);" autocomplete="off" style="margin:0px;">
<input type=hidden name=w id=w value='c'>
<input type=hidden name=bo_table value='<?=$bo_table?>'>
<input type=hidden name=wr_id value='<?=$wr_id?>'>
<input type=hidden name=comment_id id='comment_id' value=''>
<input type=hidden name=sca value='<?=$sca?>' >
<input type=hidden name=sfl value='<?=$sfl?>' >
<input type=hidden name=stx value='<?=$stx?>'>
<input type=hidden name=spt value='<?=$spt?>'>
<input type=hidden name=page value='<?=$page?>'>
<input type=hidden name=cwin value='<?=$cwin?>'>
<input type=hidden name=is_good value=''>
<div id="comment_write_row" style="background:url(<?=$board_skin_path?>/img/co_bg.gif) repeat-x;">
<div id="comment_write_control">
<span style="cursor: pointer;" onclick="textarea_decrease('wr_content', 7);"><img src="<?=$board_skin_path?>/img/co_btn_up.gif"></span>
<span style="cursor: pointer;" onclick="textarea_original('wr_content', 7);"><img src="<?=$board_skin_path?>/img/co_btn_init.gif"></span>
<span style="cursor: pointer;" onclick="textarea_increase('wr_content', 7);"><img src="<?=$board_skin_path?>/img/co_btn_down.gif"></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>
<? if ($is_guest) { ?>
<img id='kcaptcha_image' border='0' width=120 height=60 onclick="imageClick();" style="vertical-align:middle; cursor:pointer;" title="글자가 잘안보이는 경우 클릭하시면 새로운 글자가 나옵니다.">
<input title="왼쪽의 글자를 입력하세요." type="input" name="wr_key" size="10" itemname="자동등록방지" required class=ed>
<? } ?>
<? } ?>
<input type=checkbox id="wr_secret" name="wr_secret" value="secret">비밀글
<? if ($comment_min || $comment_max) { ?><span id=char_count></span>글자<?}?>
</div>
<div id="comment_write_conts">
<div id="comment_write_txts">
<textarea id="wr_content" name="wr_content" rows="7" itemname="내용" required
<? if ($comment_min || $comment_max) { ?>onkeyup="check_byte('wr_content', 'char_count');"<?}?> style='width:99%; word-break:break-all;' class="tx" onblur="if(this.value ==''){this.className='tx';this.value='제품에 대한 문의나 후기를 입력해주십시오.';}" onfocus="if(this.value=='제품에 대한 문의나 후기를 입력해주십시오.'){this.className='';this.value='';}">제품에 대한 문의나 후기를 입력해주십시오.</textarea>
<? if ($comment_min || $comment_max) { ?><script type="text/javascript"> check_byte('wr_content', 'char_count'); </script><?}?>
</div>
<div id="comment_write_btn">
<input type="submit" value="글쓰기" accesskey='s' style="width:60px; height:40px; margin:0; padding:0; background:#FFF; border:1px solid #797979; font: normal small-caps bold 13px 돋움, Verdana; color:#797979; cursor:pointer; ">
</div>
<div style="clear:both;"></div>
</div>
</div>
</form>
</div>
<!-- /코멘트 입력 -->
추천
3
3
댓글 0개