망보드 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> |