게시판 리스트에서 번호 글자 부분 없애기
본문
게시판 리스트를 보면 위 처럼 보입니다.
#작성자, 날짜, 조회수는 list.skin에서 주석처리 해서 않보이는 상황
그런데 좌측에 번호 라는 부분은 모바일에서만 않보이게 하기 위해 css파일을 수정해봐도 끄떡 없이 버티네요.
pc에서는 잘 보여지고 있습니다. 모바일에서만 "번호"라는 글자 부위 않보이게 하고 싶습니다.
아래 코드는 어느 코드를 수정 하는건지 몰라 하나씩 모바일 적용 해봤던 이력 입니다. 현재 아래 코드 상태인데고 "번호"라는 글자 부분은 모바일에서 보여지네요
/* 게시판 목록 */
#bo_list {position:relative;margin-bottom:20px}
#bo_list:after {display:block;visibility:hidden;clear:both;content:""}
#bo_list .td_board {width:120px;text-align:center}
#bo_list .td_chk {width:30px;text-align:center;border-top:1px solid #ecf0f1;border-bottom:1px solid #ecf0f1} /*번호*/
#bo_list .td_date {width:60px;text-align:center}
#bo_list .td_datetime {width:60px;text-align:center}
#bo_list .td_group {width:100px;text-align:center}
#bo_list .td_mb_id {width:100px;text-align:center}
#bo_list .td_mng {width:80px;text-align:center}
#bo_list .td_name {width:120px;text-align:left;padding:10px 0} /*분류 내용*/
#bo_list .td_nick {width:100px;text-align:center}
#bo_list .td_num {width:50px;text-align:center}
#bo_list .td_num2 {width:50px;text-align:center} /*번호*/
#bo_list .td_numbig {width:80px;text-align:center}
#bo_list .txt_active {color:#5d910b}
#bo_list .txt_expired {color:#ccc}
#bo_list tbody tr {border-left:2px solid transparent}
#bo_list tbody tr:hover {border-left:2px solid #253dbe}
#bo_list tbody .even td {background:#fbfbfb}
/* 모바일 (480px 이하) */
@media screen and (max-width: 480px) {
#bo_list .td_num2 {
display: none; /* 모바일에서 감추기 */
}
#bo_list .td_chk {
display: none; /* 모바일에서 감추기 */
}
#bo_list .td_numbig {
display: none; /* 모바일에서 감추기 */
}
#bo_list .td_date {
display: none; /* 모바일에서 감추기 */
}
#bo_list .td_datetime {
display: none; /* 모바일에서 감추기 */
}
#bo_list .td_group {
display: none; /* 모바일에서 감추기 */
}
#bo_list .td_mb_id {
display: none; /* 모바일에서 감추기 */
}
#bo_list .td_mng {
display: none; /* 모바일에서 감추기 */
}
#bo_list .td_nick {
display: none; /* 모바일에서 감추기 */
}
#bo_list .td_num {
display: none; /* 모바일에서 감추기 */
}
#bo_list .td_num2 {
display: none; /* 모바일에서 감추기 */
}
#bo_list .td_numbig {
display: none; /* 모바일에서 감추기 */
}
#bo_list .txt_active {
display: none; /* 모바일에서 감추기 */
}
#bo_list .txt_expired {
display: none; /* 모바일에서 감추기 */
}
#bo_list .txt_expired {
display: none; /* 모바일에서 감추기 */
}
답변 4
list.skin.php 의 원코드를 건드리지 말고 가장 하단에 아래의 코드를 넣어 보세요.
<script>
for (i of document.querySelectorAll("#bo_list .td_num2")) i.innerHTML = "";
document.querySelector(".tbl_head01 thead").innerHTML = document.querySelector(".tbl_head01 thead").innerHTML.replace("번호", "");
</script>
위 코드 적용시 "번호" 글자와 게시물 순서 번호 숫자가 제거 됩니다. 그러나 공백이 유지되며 제목, 분류 부분이 우측에 고정되는 현상 해결을 못해 반영하지 못했네요.
data-label="번호" 부분 지워보세요
#bo_list .td_num2
이 부분이 정확히 번호 부분의 class 가 맞는지 확인해보세요.
클래스명이 안맞는 경우일 수도 있습니다.
쳇지피티 기준 해결 방법
<th scope="col" class="hide-on-mobile">번호</th>
<style>
/* 모바일에서 특정 열 숨기기 */
@media (max-width: 768px) {
.hide-on-mobile {
display: none;
}
}
위 방식으로 해결했습니다. 방법 유추에 도움답변 주신분들 감사합니다.
답변을 작성하시기 전에 로그인 해주세요.