swcheon of CREMA Publishing Team
3/8/2018 - 10:06 AM

리뷰 게시판 이동 버튼 (html)

  • 리뷰 게시판 상단에 게시판별 이동 버튼을 만들어달라는 업체의 요청이 종종 있음
common.js
content_copyfile_download
//게시판 이동 버튼 시작
document.write("<div class='board_buttons'>");
document.write("<a class='board_button' href='/board/product/list.html?board_no=4'>전체 리뷰</a>");
document.write("<a class='board_button' href='/board/free/list.html?board_no=3001'>포토 리뷰</a>");
document.write("<a class='board_button selected' href='/board/free/list.html?board_no=2'>스텝 리뷰</a>");
document.write("</div>");
//게시판 이동 버튼 끝
pc.css
content_copyfile_download
<!-- 게시판 이동 버튼 관련 css 시작 -->
<style>
  .board_buttons {
    width: 100%;
    height: auto;
    margin: 40px auto;
    text-align: center;
  }
  .board_button {
    display: inline-block;
    width: 20%; /* 버튼 개수에 맞게 사이즈 조정해서 사용하세요 */
    padding: 14px 0;
    font-size: 12px;
    color: #333;
    border: 1px solid #333;
    text-align: center;
    margin-left: 8px;
    text-decoration: none;
  }
  .board_button:link,
  .board_button:visited,
  .board_button:active { text-decoration: none; }
  .board_button:hover { text-decoration: underline; }
  .board_button:first-child { margin-left: 0; }
  .selected {
    background: #333;
    color: #fff;
  }
</style>
<!-- 게시판 이동 버튼 관련 css 끝 -->
mobile.css
content_copyfile_download
<!-- 게시판 이동 버튼 관련 css 시작 -->
<style>
  .board_buttons {
    width: 100%;
    margin: 12px auto;
    text-align: center;
  }
  .board_button {
    display: inline-block;
    width: 31%; /* 버튼 개수에 맞게 사이즈 조정해서 사용하세요 */
    padding: 10px 0;
    font-size: 11px;
    color: #333;
    letter-spacing: 1px;
    border: 1px solid #333;
    text-align: center;
    margin-left: 5px;
    text-decoration: none;
  }
  .board_button:first-child { margin-left: 0; }
  .selected {
    background: #333;
    color: #fff;
  }
</style>
<!-- 게시판 이동 버튼 관련 css 끝 -->