지식인 게시판 모바일에서 > 자유게시판

이미지 사이즈가 커서 제대로 안나오네요..

그래서 CSS로 한번 만들어 봤습니다. (예쁘진 않습니다.)

아래와 같이 버튼으로 변경하고

mobile/skin/m_jisik/list.skin.php

	<div id="bo_list_total">
		<?php if($stx == 'progress') {?>
        <a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=<?php echo $bo_table ?>&sca=<?php echo $sca?>">
          <button class="jisik">전체질문</button>
        </a>
        <a href="<?php echo $g5['path']?>/bbs/board.php?bo_table=<?php echo $bo_table ?>&sca=<?php echo $sca?>&sfl=wr_10&stx=progress">
          <button class="jisik active">진행중</button>
        </a>
        <a href="<?php echo $g5['path']?>/bbs/board.php?bo_table=<?php echo $bo_table ?>&sca=<?php echo $sca?>&sfl=wr_9&stx=complete">
          <button class="jisik">완 료<button>
        </a>
		<?php } else if($stx == 'complete') { ?>
        <a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=<?php echo $bo_table ?>&sca=<?php echo $sca ?>">
          <button class="jisik">전체질문</button>
        </a>
        <a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=<?php echo $bo_table?>&sca=<?php echo $sca?>&sfl=wr_10&stx=progress">
          <button class="jisik">진행중</button>
        </a>
        <a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=<?php echo $bo_table?>&sca=<?php echo $sca ?>&sfl=wr_9&stx=complete">
          <button class="jisik active">완 료<button>
        </a>
		<?php } else { ?>
        <a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=<?php echo $bo_table ?>&sca=<?php echo $sca ?>">
          <button class="jisik active">전체질문</button>
        </a>
        <a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=<?php echo $bo_table ?>&sca=<?php echo $sca ?>&sfl=wr_10&stx=progress">
          <button class="jisik">진행중</button>
        </a>
        <a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=<?php echo $bo_table ?>&sca=<?php echo $sca?>&sfl=wr_9&stx=complete">
          <button class="jisik">완 료<button>
        </a>
		<?php } ?>

style.css에는 아래와 같이 추가 했습니다.

button.jisik {
  cursor: pointer;
  width: 80px;
  display: inline-block;
  background-color: #5E6B7F;
  color: white;
  text-align: center;
  transition: .25s ease;
  border: none;
  padding: 10px;
  border-radius: 12px 12px 0 0;
}
button.jisik.active {
  background-color: #8DA1BF;

}

CSS코드는 https://codepen.io/SitePoint/pen/tcCnu  가져왔는데,  디자인하고 잘 안 맞습니다.

그래도 이미지 보다는 좋을 것 같아서..  예쁘게 디자인 되면 데스크탑도 변경하면 좋을 것 같습니다.