덧글(코멘트) 입력폼 CSS로 간략하게 표현하기 > 그누4 팁자료실

그누4 팁자료실

그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.

덧글(코멘트) 입력폼 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

댓글 0개

전체 17 |RSS
그누4 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT