게시판 목록 상단에 조회순, 추천순, 날짜순으로 글 목록 정렬하기
01. list.skin.php 파일을 열어 아래와 같이 <li class="order_list_item"> ... </li> 부분을 추가한다.
<!-- 갯수, 전체선택, 글 정렬 { -->
<ul class="rb_bbs_top">
<?php if($board['bo_read_point'] || $board['bo_write_point'] || $board['bo_comment_point'] || $board['bo_download_point']) { ?>
<li class="point_info_btns_wrap">
<button type="button" class="point_info_btns" id="point_info_opens_btn">
<i><svg width="14" height="14" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 0C15.523 0 20 4.477 20 10C20 15.523 15.523 20 10 20C4.477 20 0 15.523 0 10C0 4.477 4.477 0 10 0ZM11.5 5H9C8.46957 5 7.96086 5.21071 7.58579 5.58579C7.21071 5.96086 7 6.46957 7 7V14C7 14.2652 7.10536 14.5196 7.29289 14.7071C7.48043 14.8946 7.73478 15 8 15C8.26522 15 8.51957 14.8946 8.70711 14.7071C8.89464 14.5196 9 14.2652 9 14V12H11.5C12.4283 12 13.3185 11.6313 13.9749 10.9749C14.6313 10.3185 15 9.42826 15 8.5C15 7.57174 14.6313 6.6815 13.9749 6.02513C13.3185 5.36875 12.4283 5 11.5 5ZM11.5 7C11.8978 7 12.2794 7.15804 12.5607 7.43934C12.842 7.72064 13 8.10218 13 8.5C13 8.89782 12.842 9.27936 12.5607 9.56066C12.2794 9.84196 11.8978 10 11.5 10H9V7H11.5Z" fill="#09244B"/></svg></i>
<span class="pc">포인트정책</span></button>
<div class="point_info_opens">
<h6><?php echo $board['bo_subject'] ?> 포인트 정책</h6>
<ul>
<?php if($board['bo_read_point']) { ?>
<dl>
<dd>글읽기</dd>
<dd class="font-B"><?php echo number_format($board['bo_read_point']); ?>P</dd>
</dl>
<?php } ?>
<?php if($board['bo_write_point']) { ?>
<dl>
<dd>글쓰기</dd>
<dd class="font-B"><?php echo number_format($board['bo_write_point']); ?>P</dd>
</dl>
<?php } ?>
<?php if($board['bo_comment_point']) { ?>
<dl>
<dd>댓글</dd>
<dd class="font-B"><?php echo number_format($board['bo_comment_point']); ?>P</dd>
</dl>
<?php } ?>
<?php if($board['bo_download_point']) { ?>
<dl>
<dd>다운로드</dd>
<dd class="font-B"><?php echo number_format($board['bo_download_point']); ?>P</dd>
</dl>
<?php } ?>
</ul>
</div>
<script>
$(document).ready(function() {
$(document).click(function(event) {
if (!$(event.target).closest('#point_info_opens_btn, .point_info_opens').length) {
if ($('.point_info_opens').is(':visible')) {
$('.point_info_opens').hide();
$('#point_info_opens_btn').removeClass('act');
}
}
});
$('#point_info_opens_btn').click(function(event) {
event.stopPropagation();
$('.point_info_opens').toggle();
$(this).toggleClass('act');
});
});
</script>
</li>
<?php } ?>
<?php if ($is_checkbox) { ?>
<li>
<input type="checkbox" id="chkall" onclick="if (this.checked) all_checked(true); else all_checked(false);">
<label for="chkall"></label>
</li>
<?php } ?>
<li class="cnts">
전체 <?php echo number_format($total_count) ?>건 / <?php echo $page ?> 페이지
</li>
<li class="order_list_item">
<div class="sort_select_wrap">
<select name="sort_option" id="sort_option" onchange="changeSortOption(this.value)" class="select" style="width: 100%;">
<option value="wr_datetime desc" <?php echo ($sst == 'wr_datetime' && $sod == 'desc') ? 'selected' : ''; ?>>최신순</option>
<option value="wr_good desc" <?php echo ($sst == 'wr_good' && $sod == 'desc') ? 'selected' : ''; ?>>추천순</option>
<option value="wr_hit desc" <?php echo ($sst == 'wr_hit' && $sod == 'desc') ? 'selected' : ''; ?>>조회순</option>
</select>
</div>
</li>
<div class="cb"></div>
</ul>
<!-- } -->
02. list.skin.php 제일 하단에 아래의 스크립트 코드를 추가한다.
<script>
function changeSortOption(value) {
var [sst, sod] = value.split(' ');
var currentUrl = window.location.href;
// URL에서 현재 정렬 파라미터 제거
currentUrl = currentUrl.replace(/[?&]sst=[^&]+/, '').replace(/[?&]sod=[^&]+/, '');
// 새로운 정렬 파라미터 추가
var connector = currentUrl.includes('?') ? '&' : '?';
var newUrl = currentUrl + connector + 'sst=' + sst + '&sod=' + sod;
// 페이지 새로고침
window.location.href = newUrl;
}
</script>
03. style.css 파일을 열어 아래와 같이 수정한다.
-. 수정할 부분
.rb_bbs_wrap {position: relative;}
.rb_bbs_wrap .rb_bbs_top {
margin-top: -55px; /* 상단 여백 조절 */
margin-bottom: 30px; /* 하단 여백 조절 */
display: flex; /* ul 자체를 flex 컨테이너로 만듦 */
justify-content: flex-end; /* 모든 li 항목을 우측으로 정렬 */
align-items: center; /* 세로 중앙 정렬 (li 항목들의 높이가 다를 경우) */
flex-wrap: wrap; /* 공간이 부족하면 줄바꿈 되도록 설정 */
}
.rb_bbs_wrap .rb_bbs_top li {
/* float:right; /* 기존 float 속성은 flexbox와 함께 사용하지 않음 */
/* flexbox가 알아서 정렬하므로 float은 제거합니다. */
margin-left: 10px; /* 각 li 항목 사이에 간격 추가 (필요에 따라 조절) */
/* 다른 li 항목의 기본 스타일은 여기에 유지 */
}
.rb_bbs_wrap .rb_bbs_top li.cnts {
margin-right: 10px; /* 전체 게시물 수 텍스트의 우측 여백 */
margin-top: 0; /* flexbox 사용 시 수직 정렬을 위해 margin-top 제거 */
font-size: 12px;
color:#999;
/* 다른 li 항목보다 내용이 길기 때문에 순서 조절을 위해 order 속성을 줄 수도 있습니다. */
/* order: 1; */
}
추가할 부분
/* 정렬 선택 박스 (새로 추가한 li) 스타일 */
.rb_bbs_wrap .rb_bbs_top li.order_list_item {
/* 이 li는 다른 li들과 동일하게 우측에 정렬됩니다. */
/* width: auto; 또는 flex-basis를 사용하여 너비를 조절할 수 있습니다. */
/* flex-basis: 150px; /* 예시: 고정 너비 설정 */
/* 또는 flex-basis: auto; 로 내용에 맞춰 조절 */
/* 다른 li 항목과 동일하게 margin-left가 적용됩니다. */
/* 추가적인 스타일이 필요하면 여기에 정의 */
}
.sort_select_wrap {
/* select 박스를 감싸는 div의 스타일 */
flex-basis: auto; /* 내용 너비에 맞춰 자동 조절 */
width: 100px; /* 셀렉트 박스의 고정 너비를 설정할 수도 있습니다. (예시) */
/* max-width: 100%; /* 부모 li.order_list_item의 너비를 넘지 않도록 */
}
/* 셀렉트 박스 높이 및 텍스트 정렬 조절 */
.sort_select_wrap select {
height: 36px; /* 원하는 높이로 조절 (예: 30px, 36px 등) */
padding: 4px 18px; /* 위아래 패딩을 줄여서 높이를 조절 */
line-height: 1.5; /* 텍스트가 중앙에 오도록 라인 높이 조절 (필요시) */
box-sizing: border-box; /* 패딩이 높이에 포함되도록 설정 */
/* 텍스트 가운데 정렬 추가 */
text-align: left;
text-align-last: left; /* Internet Explorer/Edge에서 드롭다운 화살표 옆 텍스트 정렬 */
-webkit-appearance: none; /* 웹킷 브라우저의 기본 스타일 제거 (선택 사항) */
-moz-appearance: none; /* 모질라 브라우저의 기본 스타일 제거 (선택 사항) */
appearance: none; /* 기본 스타일 제거 (선택 사항) */
/* background-image: url('경로/화살표_이미지.svg'); /* 기본 화살표 제거 시 커스텀 화살표 추가 (선택 사항) */
/* background-repeat: no-repeat; */
/* background-position: right 8px center; */
/* background-size: 10px; */
}
@media (max-width: 1024px) {
.sort_select_wrap {flex-basis: auto; width: 120px;} /* 반응형 너비 조절 */
}
@media (max-width: 768px) {
.sort_select_wrap {flex-basis: auto; width: 100px;} /* 반응형 너비 조절 */
}
@media (max-width: 480px) {
.sort_select_wrap {flex-basis: auto; width: 90px;} /* 반응형 너비 조절 */
}
/* .cb 클래스는 float를 해제하는 용도였으나, flexbox 사용 시에는 불필요할 수 있습니다. */
/* ul에 flexbox를 적용하면 자식 li 요소들이 자동으로 가로로 정렬되므로 .cb는 제거해도 됩니다. */
.cb { clear: both; } /* 혹시 모를 상황을 대비해 일단 유지 */