장바구니

등록된 상품이 없습니다
합계: 0

최근 본 상품

등록된 상품이 없습니다
워드프레스 전문가들이 선택한 필수 플러그인
    유용한팁
    Home / 유용한팁
    글보기
    게시판 특정 화면모드(글목록,글보기) 상단에만 배너를 노출하는 방법
    조회수1198
    2020-07-15 12:13


    망보드 1.9.1 버전에서 아래와 같이 게시판 화면 모드 및 레벨에 따라 태그를 감출 수 있는 


    CSS 클래스가 추가되어 화면 모드에 따라 일부 태그를 보이게 하거나 감추도록 설정할 수 있습니다.



    ※ 아래의 클래스는 현재 사용하시는 테마에서 body_class filter 를 지원하고 있어야 사용이 가능합니다.

       (화면모드에 따라 body 태그에 mb-mode-list, mb-mode-view, mb-mode-write 클래스가 자동으로 추가되지 않을 경우 사용 불가)



    1. 게시판 화면 모드에 따라 태그를 감출 수 있는 CSS 클래스 


       - mb-hide-list    : 글목록 화면에서 태그 항목을 감추는 CSS 클래스 

       - mb-hide-view  : 글보기 화면에서 태그 항목을 감추는 CSS 클래스 

       - mb-hide-write : 글작성 화면에서 태그 항목을 감추는 CSS 클래스 


      => 글목록 화면에서만 태그 내용을 보이도록 CSS 클래스 설정 

          <div class="mb-hide-view mb-hide-write">내용 입력</div>


      => 글작성 화면에서만 태그 내용을 보이도록 CSS 클래스 설정 

          <div class="mb-hide-list mb-hide-view">내용 입력</div>


      => 글보기 화면에서만 태그 내용을 보이도록 CSS 클래스 설정 

          <div class="mb-hide-list mb-hide-write">내용 입력</div>




    2. 회원 레벨에 따라 태그를 감출 수 있는 CSS 클래스 


       - mb-hide-level0  : 비회원 접속시 태그 항목을 감추는 클래스 

       - mb-hide-level1  : 레벨 1회원 접속시 태그 항목을 감추는 클래스 

       - mb-hide-level2  레벨 2회원 접속시 태그 항목을 감추는 클래스

       - mb-hide-level3  레벨 3회원 접속시 태그 항목을 감추는 클래스

       - mb-hide-level4  레벨 4회원 접속시 태그 항목을 감추는 클래스

       - mb-hide-level5  레벨 5회원 접속시 태그 항목을 감추는 클래스

       - mb-hide-level6  레벨 6회원 접속시 태그 항목을 감추는 클래스

       - mb-hide-level7  레벨 7회원 접속시 태그 항목을 감추는 클래스

       - mb-hide-level8  레벨 8회원 접속시 태그 항목을 감추는 클래스

       - mb-hide-level9  레벨 9회원 접속시 태그 항목을 감추는 클래스

       - mb-hide-level10  레벨 10회원 접속시 태그 항목을 감추는 클래스


      => 비회원 접속시 태그 내용을 감추는 CSS 클래스 설정 

          <div class="mb-hide-level0">내용 입력</div>


      => 비회원 접속시에만 태그 내용을 보이도록 CSS 클래스 설정 

          <div class="mb-hide-level1 mb-hide-level2 mb-hide-level3 mb-hide-level4 mb-hide-level5 mb-hide-level6 mb-hide-level7 mb-hide-level8 mb-hide-level9 mb-hide-level10">내용 입력</div>




    3. 디바이스 플랫폼(PC,Tablet,Mobile)에 따라 태그를 감출 수 있는 CSS 클래스 


       - mb-mobile-hide : 모바일에서 접속시 화면에서 태그 항목을 감추는 CSS 클래스 

       - mb-tablet-hide : 태블릿에서 접속시 화면에서 태그 항목을 감추는 CSS 클래스 

       - mb-desktop-hide : 데스크탑에서 접속시 화면에서 태그 항목을 감추는 CSS 클래스 

       - mb-desktop-large-hide : 데스크탑(1200px 이상)에서 접속시 화면에서 태그 항목을 감추는 CSS 클래스 


      => 모바일, 태블릿, 데스크탑에서 각각의 태그 내용을 다르게 표시하는 방법

          <div class="mb-tablet-hide mb-desktop-hide mb-desktop-large-hide">모바일에서 출력되는 내용</div>

          <div class="mb-mobile-hide mb-desktop-hide mb-desktop-large-hide">태블릿에서 출력되는 내용</div>

          <div class="mb-mobile-hide mb-tablet-hide">데스크탑에서 출력되는 내용</div>


      => 모바일 및 데스크탑에서 2개의 태그 내용을 다르게 표시하는 방법

          <div class="mb-tablet-hide mb-desktop-hide mb-desktop-large-hide">모바일에서 출력되는 내용</div>

          <div class="mb-mobile-hide">모바일 이외의 디바이스에서 출력되는 내용</div>






    카테고리일반