테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

게시판 리스트에서 번호 글자 부분 없애기 채택완료

좐슨앤존슨 10개월 전 조회 1,250
답변 4
목록

http://sir.kr/data/editor/2412/2949472557_1734167207.7567.png" width="100%" />

게시판 리스트를 보면 위 처럼 보입니다.

#작성자, 날짜, 조회수는 list.skin에서 주석처리 해서 않보이는 상황

 

그런데 좌측에 번호 라는 부분은 모바일에서만 않보이게 하기 위해 css파일을 수정해봐도 끄떡 없이 버티네요.

pc에서는 잘 보여지고 있습니다. 모바일에서만 "번호"라는 글자 부위 않보이게 하고 싶습니다.

 

아래 코드는 어느 코드를 수정 하는건지 몰라 하나씩 모바일 적용 해봤던 이력 입니다. 현재 아래 코드 상태인데고 "번호"라는 글자 부분은 모바일에서 보여지네요

</p>

<p>/* 게시판 목록 */</p>

<p>#bo_list {position:relative;margin-bottom:20px}</p>

<p>#bo_list:after {display:block;visibility:hidden;clear:both;content:""}</p>

<p>#bo_list .td_board {width:120px;text-align:center}</p>

<p>#bo_list .td_chk {width:30px;text-align:center;border-top:1px solid #ecf0f1;border-bottom:1px solid #ecf0f1} /*번호*/</p>

<p>#bo_list .td_date {width:60px;text-align:center}</p>

<p>#bo_list .td_datetime {width:60px;text-align:center}</p>

<p>#bo_list .td_group {width:100px;text-align:center}</p>

<p>#bo_list .td_mb_id {width:100px;text-align:center}</p>

<p>#bo_list .td_mng {width:80px;text-align:center}</p>

<p>#bo_list .td_name {width:120px;text-align:left;padding:10px 0} /*분류 내용*/</p>

<p>#bo_list .td_nick {width:100px;text-align:center}</p>

<p>#bo_list .td_num {width:50px;text-align:center}</p>

<p>#bo_list .td_num2 {width:50px;text-align:center} /*번호*/</p>

<p>#bo_list .td_numbig {width:80px;text-align:center}</p>

<p>#bo_list .txt_active {color:#5d910b}</p>

<p>#bo_list .txt_expired {color:#ccc}</p>

<p>#bo_list tbody tr {border-left:2px solid transparent}</p>

<p>#bo_list tbody tr:hover {border-left:2px solid #253dbe}</p>

<p>#bo_list tbody .even td {background:#fbfbfb}</p>

<p> </p>

<p>/* 모바일 (480px 이하) */</p>

<p>@media screen and (max-width: 480px) {</p>

<p>  #bo_list .td_num2 {    </p>

<p>display: none; /* 모바일에서 감추기 */</p>

<p>  }</p>

<p>  #bo_list .td_chk  {    </p>

<p>    display: none; /* 모바일에서 감추기 */</p>

<p>      }</p>

<p>  #bo_list .td_numbig  {    </p>

<p>    display: none; /* 모바일에서 감추기 */</p>

<p>      }</p>

<p>      #bo_list .td_date  {    </p>

<p>        display: none; /* 모바일에서 감추기 */</p>

<p>          }</p>

<p>         </p>

<p>          #bo_list .td_datetime  {    </p>

<p>            display: none; /* 모바일에서 감추기 */</p>

<p>              }  </p>

<p>              #bo_list .td_group  {    </p>

<p>                display: none; /* 모바일에서 감추기 */</p>

<p>                  }</p>

<p>                  #bo_list .td_mb_id  {    </p>

<p>                    display: none; /* 모바일에서 감추기 */</p>

<p>                      }</p>

<p>                      #bo_list .td_mng  {    </p>

<p>                        display: none; /* 모바일에서 감추기 */</p>

<p>                          }</p>

<p>                          #bo_list .td_nick  {    </p>

<p>                            display: none; /* 모바일에서 감추기 */</p>

<p>                              }</p>

<p>                              #bo_list .td_num  {    </p>

<p>                                display: none; /* 모바일에서 감추기 */</p>

<p>                                  }</p>

<p>                                  #bo_list .td_num2  {    </p>

<p>                                    display: none; /* 모바일에서 감추기 */</p>

<p>                                      }</p>

<p>                                      #bo_list .td_numbig  {    </p>

<p>                                        display: none; /* 모바일에서 감추기 */</p>

<p>                                          }</p>

<p>                                          #bo_list .txt_active  {    </p>

<p>                                            display: none; /* 모바일에서 감추기 */</p>

<p>                                              }</p>

<p>                                              #bo_list .txt_expired  {    </p>

<p>                                                display: none; /* 모바일에서 감추기 */</p>

<p>                                                  }</p>

<p>                                                  #bo_list .txt_expired  {    </p>

<p>                                                    display: none; /* 모바일에서 감추기 */</p>

<p>                                                      }</p>

<p>

#리스트css #리스트수정
댓글을 작성하려면 로그인이 필요합니다.

답변 4개

채택된 답변
+20 포인트
비
비타주리
10개월 전

list.skin.php 의 원코드를 건드리지 말고 가장 하단에 아래의 코드를 넣어 보세요.

 

</p>

<p><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></p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�
좐슨앤존슨
10개월 전
위 코드 적용시 "번호" 글자와 게시물 순서 번호 숫자가 제거 됩니다. 그러나 공백이 유지되며 제목, 분류 부분이 우측에 고정되는 현상 해결을 못해 반영하지 못했네요.

댓글을 작성하려면 로그인이 필요합니다.

좐슨앤존슨
좐슨앤존슨
10개월 전

쳇지피티 기준 해결 방법
 

<th scope="col" class="hide-on-mobile">번호</th>

<style>
  /* 모바일에서 특정 열 숨기기 */
  @media (max-width: 768px) {
    .hide-on-mobile {
      display: none;
    }
  }

위 방식으로 해결했습니다. 방법 유추에 도움답변 주신분들 감사합니다.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

e
eyekiss
10개월 전

#bo_list .td_num2 

이 부분이 정확히 번호 부분의 class 가 맞는지 확인해보세요.

클래스명이 안맞는 경우일 수도 있습니다.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

세크티
세크티
10개월 전

data-label="번호" 부분 지워보세요

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인