<추천 비추천으로 2항목 투표게시판 만들기 1> 추천 항목이 위아래로만 변하는 이유
본문
그누보드의 추천 비추천 기능을 이용해서 투표기능을 만들어보고자 합니다. 원본 스킨은 기본스킨입니다.
먼저 그누보드의 여분필드 wr_1 wr_2를 입력 출력하는 소스를 만들고 출력을 확인하고 이를 추천 비추천 버튼속으로 집어넣은 다음에 버튼을 좌우정렬이 아니라 상하정렬로 바꾸었습니다. 여기까지 하고 최종출력을 확인하면 다음과 같이 출력됩니다.
지금까지 모든 출력 수정항목은 스킨의 view.skin.php 에서만 이루어 졌습니다. 다음은 수정된 추천 비추천 코드입니다.
<!-- 추천 비추천 시작 { -->
<?php if ( $good_href || $nogood_href) { ?>
<div id="bo_v_act">
<?php if ($good_href) { ?>
<span class="bo_v_act_gng">
<a href="<?php echo $good_href.'&'.$qstr ?>" id="good_button" class="bo_v_good"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i><span class="sound_only">추천</span><strong> <?php echo number_format($view['wr_good']) ?><?php echo $view['wr_1']?></strong></a>
<b id="bo_v_act_good"></b>
</span>
<br>
<br>
<div>
<?php } ?>
<?php if ($nogood_href) { ?>
<span class="bo_v_act_gng">
<a href="<?php echo $nogood_href.'&'.$qstr ?>" id="nogood_button" class="bo_v_nogood"><i class="fa fa-thumbs-o-down" aria-hidden="true"></i><span class="sound_only">비추천</span><strong><?php echo number_format($view['wr_nogood']) ?><?php echo $view['wr_2']?></strong></a>
<b id="bo_v_act_nogood"></b>
</span>
<?php } ?>
</div>
</div>
<?php } else {
if($board['bo_use_good'] || $board['bo_use_nogood']) {
?>
<div id="bo_v_act">
<?php if($board['bo_use_good']) { ?><span class="bo_v_good"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i><span class="sound_only">추천</span><strong><strong><?php echo number_format($view['wr_good']) ?><?php echo $view['wr_1']?></strong></span><?php } ?>
<br>
<br>
<div>
<?php if($board['bo_use_nogood']) { ?><span class="bo_v_nogood"><i class="fa fa-thumbs-o-down" aria-hidden="true"></i><span class="sound_only">비추천</span><strong><strong><?php echo number_format($view['wr_nogood']) ?><?php echo $view['wr_2']?></strong></span><?php } ?>
</div>
</div>
<?php
}
}
?>
<!-- } 추천 비추천 끝 -->
</section>
view.skin.php에서는 딱히 수정할 항목이 없는 것 같고 아무래도 스킨의 style.css에서 무언가 수정해야 할 것 같은데 뭘 수정해야 하는 걸까요? 아래는 style.css 에서 추천 비추천 관련 코드입니다.
#bo_v_act_good, #bo_v_act_nogood {display:none;position:absolute;top:30px;left:0;z-index:9999;padding:10px 0;width:165px;background:#ff3061;color:#fff;text-align:center}
#bo_v_act .bo_v_good {display:inline-block;border:1px solid #dedede;width:70px;line-height:46px;border-radius:30px}
#bo_v_act .bo_v_nogood {display:inline-block;border:1px solid #dedede;width:70px;line-height:46px;border-radius:30px}
추천 비추천 버튼이 상하가 아니라 좌우로 확장되야 되는데 css를 수정하면 되는지 아니면 다른 작업이 있어야 하는 것인지 알고 싶습니다.
답변 2
올려주신 css 내용에서 조절하시면 됩니다.
width:70px 부분을 원하는 크기로 수정.
#bo_v_act .bo_v_good {display:inline-block;border:1px solid #dedede;width:70px;line-height:46px;border-radius:30px}
#bo_v_act .bo_v_nogood {display:inline-block;border:1px solid #dedede;width:70px;line-height:46px;border-radius:30px}
동작주소를 주면 체크하기가 편하죠.
#bo_v_act 의 사이즈가 이미 작게 자리 잡았을 수도 있습니다.
크롬 디벨로퍼로 보면서 코드를 눌러보면 아래쪽에 사이즈를 차지하는 것을 발견할 수 있습니다.