그리드/테이블 상단 :: 복합적으로 있는 경우 <!-- 그리드/테이블 상단 --> <div class="cptGroupTop"> <div class="alignL"> <div class="groupTitle">Grid Title</div> <div class="unit"><span class="text">타이틀에 대한 설명입니다</span></div> </div> <div class="alignR"> <div class="comSideOpt"> <ul class="opList"> <li class="item"> <select class="iptSlt" name="" id=""> <option value="">선택</option> </select> </li> <li class="item"> <select class="iptSlt" name="" id=""> <option value="">선택</option> </select> </li> </ul> </div> </div> </div> 그리드/테이블 상단 :: 타이틀이 없는 경우 <!-- 그리드/테이블 상단 --> <div class="cptGroupTop"> <div class="alignL"> <div class="unit"><span class="text">(총 <span class="total">100</span>건)</span></div> </div> <div class="alignR"> <div class="comSideOpt"> <ul class="opList"> <li class="item"> <select class="iptSlt" name="" id=""> <option value="">선택</option> </select> </li> <li class="item"> <select class="iptSlt" name="" id=""> <option value="">선택</option> </select> </li> </ul> </div> </div> </div> 그리드/테이블 상단 :: 타이틀이 없는 경우 <!-- 그리드/테이블 상단 --> <div class="cptGroupTop"> <div class="alignL"> <div class="unit"><span class="text">조회결과 (총 <span class="total">100</span>건)</span></div> </div> <div class="alignR"> <div class="comSideOpt"> <ul class="opList"> <li class="item"> <button class="viewBtn on">10건</button> <button class="viewBtn">20건</button> <button class="viewBtn">50건</button> <button class="viewBtn">100건</button> </li> <li class="item"> <button class="srhBtn bLine">엑셀다운로드</button> </li> </ul> </div> </div> </div> 그리드/테이블 상단 :: 타이틀만 있는 경우 (우측이 없는 경우) <!-- 그리드/테이블 상단 --> <div class="cptGroupTop"> <div class="alignL"> <div class="groupTitle">Grid Title</div> <div class="unit"><span class="text">타이틀에 대한 설명입니다</span></div> </div> </div> 그리드/테이블 상단 :: 작은 타이틀 <!-- 작은 타이틀 --> <div class="comSmTit"> <div class="alignL"> <div class="title">Small Title</div> </div> <div class="alignR"> <span class="titText">최근수정 : 2022-12-31</span> <span class="titText">수정자 : 홍길동</span> <div class="comSideOpt"> <ul class="opList"> <li class="item"><button class="srhBtn dkbLine">PAR-Q 출력</button></li> </ul> </div> </div> </div> 그리드/테이블 상단 :: 작은 타이틀 + 설명글 <!-- 작은 타이틀 + 설명글 --> <div class="comSmTit"> <div class="alignL"> <div class="title">측정대상자 검색</div> <div class="unit"><span class="desc">*아이디 또는 개인정보를 입력 후 '회원검색' 버튼을 클릭해 주세요.</span></div> </div> </div>
설명
그리드(데이터 테이블) 혹은 입력테이블의 상단에 사용되는 공통 요소
추가 조작
경로 .cptGroupTop .className
className 설명
className 설명