skip navigation

썸네일

  • - Thumbnail 리스트 기본 DOM 구조는 같으며, 클릭시 레이어 팝업이 활성화 되는 부분만 해당 DOM추가 된다.

  • - 클릭시 레이어 팝업이 활성화 되는 경우 anchor Tag에 title속성으로 "제목 상세 내용 보기" 제공하여 접근성을 향상 시킨다.

  • - 마우스오버, 마우스클릭(레이어)의 경우 부모 div.list_thumb에 .type_over, .type_layer 클레스로 제어한다.

기본

[VIEW]
검색 등
문구
[CODE]
<div class="list_thumb"> <div class="top_info">검색 등</div> <div class="list_wrap"> <ul> <li> <div class="thum_wrap"> <a href="#" class="btn_link"> <div class="img_wrap"><img src="../../images/library/@thumnail_list.gif" alt=""></div> <div class="txt_wrap"> <p class="title">제목</p> <p>짧은 내용</p> </div> </a> </div> </li> <li> <div class="thum_wrap"> <a href="#" class="btn_link"> <div class="img_wrap"><img src="../../images/library/@thumnail_list.gif" alt=""></div> <div class="txt_wrap"> <p class="title">제목</p> <p>짧은 내용</p> </div> </a> </div> </li> <li> <div class="thum_wrap"> <a href="#" class="btn_link"> <div class="img_wrap"><img src="../../images/library/@thumnail_list.gif" alt=""></div> <div class="txt_wrap"> <p class="title">제목</p> <p>짧은 내용</p> </div> </a> </div> </li> <li> <div class="thum_wrap"> <a href="#" class="btn_link"> <div class="img_wrap"><img src="../../images/library/@thumnail_list.gif" alt=""></div> <div class="txt_wrap"> <p class="title">제목</p> <p>짧은 내용</p> </div> </a> </div> </li> <li> <div class="thum_wrap"> <a href="#" class="btn_link"> <div class="img_wrap"><img src="../images/@thumnail_list.gif" alt=""></div> <div class="txt_wrap"> <p class="title">제목</p> <p>짧은 내용</p> </div> </a> </div> </li> <li> <div class="thum_wrap"> <a href="#" class="btn_link"> <div class="img_wrap"><img src="../../images/library/@thumnail_list.gif" alt=""></div> <div class="txt_wrap"> <p class="title">제목</p> <p>짧은 내용</p> </div> </a> </div> </li> </ul> </div> <div class="btm_info">문구</div> </div>

마우스오버

[VIEW]
검색 등
문구
[CODE]
<div class="list_thumb type_over"> <!-- 클래스(type_over)로 제어 --> <div class="top_info">검색 등</div> <div class="list_wrap"> <ul> <li> <div class="thum_wrap"> <a href="#" class="btn_link"> <div class="img_wrap"><img src="../../images/library/@thumnail_list.gif" alt=""></div> <div class="txt_wrap"> <p class="title">제목</p> <p>짧은 내용</p> </div> </a> </div> </li> <li> <div class="thum_wrap"> <a href="#" class="btn_link"> <div class="img_wrap"><img src="../../images/library/@thumnail_list.gif" alt=""></div> <div class="txt_wrap"> <p class="title">제목</p> <p>짧은 내용</p> </div> </a> </div> </li> <li> <div class="thum_wrap"> <a href="#" class="btn_link"> <div class="img_wrap"><img src="../../images/library/@thumnail_list.gif" alt=""></div> <div class="txt_wrap"> <p class="title">제목</p> <p>짧은 내용</p> </div> </a> </div> </li> <li> <div class="thum_wrap"> <a href="#" class="btn_link"> <div class="img_wrap"><img src="../../images/library/@thumnail_list.gif" alt=""></div> <div class="txt_wrap"> <p class="title">제목</p> <p>짧은 내용</p> </div> </a> </div> </li> <li> <div class="thum_wrap"> <a href="#" class="btn_link"> <div class="img_wrap"><img src="../../images/library/@thumnail_list.gif" alt=""></div> <div class="txt_wrap"> <p class="title">제목</p> <p>짧은 내용</p> </div> </a> </div> </li> <li> <div class="thum_wrap"> <a href="#" class="btn_link"> <div class="img_wrap"><img src="../../images/library/@thumnail_list.gif" alt=""></div> <div class="txt_wrap"> <p class="title">제목</p> <p>짧은 내용</p> </div> </a> </div> </li> </ul> </div> <div class="btm_info">문구</div> </div>

마우스클릭

[VIEW]
검색 등
문구
[CODE]
<div class="list_thumb type_layer"> <!-- 클래스(type_layer)로 제어 --> <div class="top_info">검색 등</div> <div class="list_wrap"> <ul> <li> <div class="thum_wrap active"> <!-- Controlled by 'active' class --> <a href="#info01" class="btn_link" title="제목 상세 내용 보기"> <!-- title속성으로 "제목 상세 내용 보기" 제공하여 접근성을 향상 시킨다. --> <div class="img_wrap"><img src="../../images/library/@thumnail_list.gif" alt=""></div> <div class="txt_wrap"> <p class="title">제목</p> <p>짧은 내용</p> </div> </a> <!-- 클릭시 나오는 레이어 영역 --> <div class="info_wrap" id="info01"> <!-- anchor의 title속성과 id를 맞춰 준다. --> <article class="lay_wrap"> <header class="lay_header"> <h1>타이틀</h1> </header> <div class="lay_content"> 컨텐츠 </div> <footer class="lay_footer"> <a href="#" class="close">레이어팝업 닫기</a> </footer> </article> </div> <!-- //클릭시 나오는 레이어 영역 --> </div> </li> <li> <div class="thum_wrap"> <a href="#info02" class="btn_link" title="제목 상세 내용 보기"> <div class="img_wrap"><img src="../../images/library/@thumnail_list.gif" alt=""></div> <div class="txt_wrap"> <p class="title">제목</p> <p>짧은 내용</p> </div> </a> <!-- 클릭시 나오는 레이어 영역 --> <div class="info_wrap" id="info02"> <article class="lay_wrap"> <header class="lay_header"> <h1>타이틀</h1> </header> <div class="lay_content"> 컨텐츠 </div> <footer class="lay_footer"> <a href="#" class="close">레이어팝업 닫기</a> </footer> </article> </div> <!-- //클릭시 나오는 레이어 영역 --> </div> </li> <li> <div class="thum_wrap"> <a href="#info03" class="btn_link" title="제목 상세 내용 보기"> <div class="img_wrap"><img src="../../images/library/@thumnail_list.gif" alt=""></div> <div class="txt_wrap"> <p class="title">제목</p> <p>짧은 내용</p> </div> </a> <!-- 클릭시 나오는 레이어 영역 --> <div class="info_wrap" id="info03"> <article class="lay_wrap"> <header class="lay_header"> <h1>타이틀</h1> </header> <div class="lay_content"> 컨텐츠 </div> <footer class="lay_footer"> <a href="#" class="close">레이어팝업 닫기</a> </footer> </article> </div> <!-- //클릭시 나오는 레이어 영역 --> </div> </li> <li> <div class="thum_wrap"> <a href="#info04" class="btn_link" title="제목 상세 내용 보기"> <div class="img_wrap"><img src="../../images/library/@thumnail_list.gif" alt=""></div> <div class="txt_wrap"> <p class="title">제목</p> <p>짧은 내용</p> </div> </a> <!-- 클릭시 나오는 레이어 영역 --> <div class="info_wrap" id="info04"> <article class="lay_wrap"> <header class="lay_header"> <h1>타이틀</h1> </header> <div class="lay_content"> 컨텐츠 </div> <footer class="lay_footer"> <a href="#" class="close">레이어팝업 닫기</a> </footer> </article> </div> <!-- //클릭시 나오는 레이어 영역 --> </div> </li> <li> <div class="thum_wrap"> <a href="#info05" class="btn_link" title="제목 상세 내용 보기"> <div class="img_wrap"><img src="../../images/library/@thumnail_list.gif" alt=""></div> <div class="txt_wrap"> <p class="title">제목</p> <p>짧은 내용</p> </div> </a> <!-- 클릭시 나오는 레이어 영역 --> <div class="info_wrap" id="info05"> <article class="lay_wrap"> <header class="lay_header"> <h1>타이틀</h1> </header> <div class="lay_content"> 컨텐츠 </div> <footer class="lay_footer"> <a href="#" class="close">레이어팝업 닫기</a> </footer> </article> </div> <!-- //클릭시 나오는 레이어 영역 --> </div> </li> <li> <div class="thum_wrap"> <a href="#info06" class="btn_link" title="제목 상세 내용 보기"> <div class="img_wrap"><img src="../../images/library/@thumnail_list.gif" alt=""></div> <div class="txt_wrap"> <p class="title">제목</p> <p>짧은 내용</p> </div> </a> <!-- 클릭시 나오는 레이어 영역 --> <div class="info_wrap" id="info06"> <article class="lay_wrap"> <header class="lay_header"> <h1>타이틀</h1> </header> <div class="lay_content"> 컨텐츠 </div> <footer class="lay_footer"> <a href="#" class="close">레이어팝업 닫기</a> </footer> </article> </div> <!-- //클릭시 나오는 레이어 영역 --> </div> </li> </ul> </div> <div class="btm_info">문구</div> </div>