페이지 정보

작성자 루미집사 댓글 0건 조회 2,857회 작성일 22-01-29 05:52

웹접근성 선형화에 최적화된 초신글 탭

본문

웹접근성용 최신글용 탭 ( 선형화에 최적화 )

- 키보드로 접근 방식을 아래의 순서대로 초점이 맞도록 해야 한다. 

  1. 첫번째 탭의 제목
  2. 첫번째 탭의 게시글 제목
  3. 첫번째 탭의 더보기
  4. 두번째 탭의 제목
  5. 두번째 탭의 게시글 제목
  6. 두번째 탭의 더보기 


    .

     

자바스크립트    

$(function() {
       rumiEasyTab('#tab-group-1', 'click');
       rumiEasyTab('#tab-group-2', 'mouseover');
    });
    
    /**
     * 웹접근성용 최신글용 탭
     * i : 탭의 ID
     * mEvent : 마우스 이벤트 종류 ( mouseenter, click, mouseoer.... )
     */
    function rumiEasyTab(i, mEvent) {
        var title = $(i+' > .rumi-tab-title');
        var content = $(i+' > .rumi-tab-content');
        title.on(mEvent+' focusin', function() {
            title.removeClass('rumi-tab-active')
            content.removeClass('rumi-visible')
            $(this).addClass('rumi-tab-active')
            $(this).next().addClass('rumi-visible')
        })
        title.click(function(e) {
            var _url = $(this).find('a').attr('data-url') ||e.target.dataset.url || e.srcElement.dataset.url;
            if($(this).hasClass('rumi-tab-active')) {
                console.log(_url);
            }
        });
    }
    

 

 

CSS    

#tab-group-1 { margin-bottom: 20px; }
    .rumi-tab-area ul, .tab-area li { margin:0; padding:0; list-style:none; }
    .rumi-tab-area {display:flex;justify-content: space-between;position:relative;border:1px solid #ccc;font-size:0px;height:300px;width:40%;margin: 0 auto;}
    .rumi-tab-area .rumi-tab-title {flex: auto;height:40px;line-height: 40px;padding:0 10px;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;text-align:center;background-color:#eee;font-size:16px;z-index:10;}
    .rumi-tab-area .rumi-tab-title a { display:block; }
    .rumi-tab-area .rumi-tab-content {display:none;position: absolute;width:100%;border-top: 1px solid #ccc;top: 39px;left:0;padding:20px 15px 40px 15px;font-size:16px;z-index:0;height: calc(100% - 39px);}
    .rumi-tab-area .rumi-tab-more { position: absolute; bottom:0; left:0; width: 100%; height:36px; line-height:36px; text-align: right; padding:0 20px 0 0; background-color: #eee; border-top:1px solid #ccc;}
    .rumi-tab-area .rumi-tab-active { background-color:#ffffff !important; border-bottom:0px; border-top:2px solid orangered; height:40px; line-height: 37px; }
    .rumi-tab-area .rumi-visible { display:block !important; }
    .rumi-tab-area .rumi-border-none { border-right: 0px !important;}
    

 

 

CSS :: 반응형 적용    

.latest-wrap { width:100%; max-width:800px; margin:0 auto;}
    #tab-group-1 { margin-bottom: 20px; }
    .rumi-tab-area ul, .tab-area li { margin:0; padding:0; list-style:none; }
    .rumi-tab-area {display:flex;position:relative;border:0px solid #ccc;font-size:0px;height:300px;width:100%;margin: 0 auto;}
    .rumi-tab-area .rumi-tab-title {height:60px;line-height: 60px;padding:0;text-align:center;z-index:10;margin-right:50px;}
    .rumi-tab-area .rumi-tab-title a { display:block;font-size:24px;font-weight:bold; }
    .rumi-tab-area .rumi-tab-content {display:none;position: absolute;width:100%;border-top: 3px solid #e9e9e9;top: 57px;left:0;padding:20px 15px 40px 15px;font-size:16px;z-index:0;height: calc(100% - 57px);}
    .rumi-tab-area .rumi-tab-more { position: absolute; top:-44px; right:0; width: 30px; height:30px; line-height:30px; text-align: center; padding:0; }
    .rumi-tab-area .rumi-tab-more a { font-size:40px !important;font-weight:bold;color:#555;}
    .rumi-tab-area .rumi-tab-active { background-color:#ffffff !important; border-bottom:3px solid #D82782; height:60px; line-height: 60px; }
    .rumi-tab-area .rumi-tab-active a { color:#D82782 !important; }
    .rumi-tab-area .rumi-visible { display:block !important; }
    .rumi-tab-area .rumi-border-none { margin-right:0; }
    @media only screen and (max-width: 1320px){
        .rumi-tab-area .rumi-tab-title { margin-right:40px;}
        .rumi-tab-area .rumi-tab-title a { font-size:20px !important; }
        .rumi-tab-area .rumi-tab-more a { font-size:36px !important; }
    }
    @media only screen and (max-width: 1024px) {
        .rumi-tab-area .rumi-tab-title { margin-right:35px;}
        .rumi-tab-area .rumi-tab-title a { font-size:18px !important; }
        .rumi-tab-area .rumi-tab-more a { font-size:36px !important; }
    }
    @media only screen and (max-width: 991px) {
        .rumi-tab-area .rumi-tab-title { margin-right:30px;}
        .rumi-tab-area .rumi-tab-title a { font-size:17px !important; }
        .rumi-tab-area .rumi-tab-more a { font-size:34px !important; }
    }
    @media only screen and (max-width: 768px) {
        .rumi-tab-area .rumi-tab-title { margin-right:20px;}
        .rumi-tab-area .rumi-tab-title a { font-size:16px !important; }
        .rumi-tab-area .rumi-tab-more a { font-size:30px !important; }
    }
    @media only screen and (max-width: 576px) {
        .rumi-tab-area .rumi-tab-title { margin-right:10px;}
        .rumi-tab-area .rumi-tab-title a { font-size:14px !important; }
        .rumi-tab-area .rumi-tab-more a { font-size:26px !important; }
    }
    @media only screen and (max-width: 479px) {
        .rumi-tab-area .rumi-tab-title { margin-right:10px;}
        .rumi-tab-area .rumi-tab-title a { font-size:12px !important; }
        .rumi-tab-area .rumi-tab-more a { font-size:24px !important; }
    }

 

 

HTML    

<!-- TAB #1 -->
    <div id="tab-group-1" class="rumi-tab-area">
        <div class="rumi-tab-title rumi-tab-active"><a href="#notice" data-url="rumi_notice">공지사항</a></div>
        <div class="rumi-tab-content rumi-visible">
            <ul>
                <li><a href="#">안녕하세요</a></li>
                <li><a href="#">탭 테스트</a></li>
                <li><a href="#">오늘은 7월 24일</a></li>
                <li><a href="#">라라라</a></li>
            </ul>
            <div class="rumi-tab-more"><a href="#notice-more">&boxvh; 공지사항 더보기</a></div>
        </div>
        <div class="rumi-tab-title"><a href="#free" data-url="rumi_fre">자유게시판</a></div>
        <div class="rumi-tab-content">
            <ul>
                <li><a href="#">두번째 탭</a></li>
                <li><a href="#">환영합니다</a></li>
                <li><a href="#">헬로 월드</a></li>
                <li><a href="#">웅컁컁컁</a></li>
            </ul>
            <div class="rumi-tab-more"><a href="#free-more">&boxvh; 자유게시판 더보기</a></div>
        </div>
        <div class="rumi-tab-title"><a href="#qa" data-url="rumi_qa">질문/답변</a></div>
        <div class="rumi-tab-content">
            <ul>
                <li><a href="#">다음 탭 따라하기</a></li>
                <li><a href="#">다음 탭 따라하기</a></li>
                <li><a href="#">다음 탭 따라하기</a></li>
                <li><a href="#">다음 탭 따라하기</a></li>
            </ul>
            <div class="rumi-tab-more"><a href="#qa-more">&boxvh; 질문/답변 더보기</a></div>
        </div>
        <div class="rumi-tab-title rumi-border-none"><a href="#" data-url="rumi_photo">포토갤러리</a></div>
        <div class="rumi-tab-content">
            <ul>
                <li><a href="#">여기는 마지막 탭</a></li>
                <li><a href="#">아침을 안 먹어</a></li>
                <li><a href="#">배가 고프군요</a></li>
                <li><a href="#">밥 사줘</a></li>
            </ul>
            <div class="rumi-tab-more"><a href="#">&boxvh; 포토갤러리 더보기</a></div>
        </div>
    </div>
    <!-- TAB #2 :: -->
    <div id="tab-group-2" class="rumi-tab-area">
        <div class="rumi-tab-title rumi-tab-active"><a href="#" data-url="notice">공지사항</a></div>
        <div class="rumi-tab-content rumi-visible">
            <ul>
                <li><a href="#">안녕하세요</a></li>
                <li><a href="#">탭 테스트</a></li>
                <li><a href="#">오늘은 7월 24일</a></li>
                <li><a href="#">라라라</a></li>
            </ul>
            <div class="rumi-tab-more"><a href="#">&boxvh; 공지사항 더보기</a></div>
        </div>
        <div class="rumi-tab-title"><a href="#" data-url="free">자유게시판</a></div>
        <div class="rumi-tab-content">
            <ul>
                <li><a href="#">두번째 탭</a></li>
                <li><a href="#">환영합니다</a></li>
                <li><a href="#">헬로 월드</a></li>
                <li><a href="#">웅컁컁컁</a></li>
            </ul>
            <div class="rumi-tab-more"><a href="#">&boxvh; 자유게시판 더보기</a></div>
        </div>
        <div class="rumi-tab-title"><a href="#" data-url="qa">질문답변</a></div>
        <div class="rumi-tab-content">
            <ul>
                <li><a href="#">다음 탭 따라하기</a></li>
                <li><a href="#">다음 탭 따라하기</a></li>
                <li><a href="#">다음 탭 따라하기</a></li>
                <li><a href="#">다음 탭 따라하기</a></li>
            </ul>
            <div class="rumi-tab-more"><a href="#">&boxvh; 질문답변 더보기</a></div>
        </div>
        <div class="rumi-tab-title rumi-border-none"><a href="#" data-url="photo">포토갤러리</a></div>
        <div class="rumi-tab-content">
            <ul>
                <li><a href="#">여기는 마지막 탭</a></li>
                <li><a href="#">아침을 안 먹어</a></li>
                <li><a href="#">배가 고프군요</a></li>
                <li><a href="#">밥 사줘</a></li>
            </ul>
            <div class="rumi-tab-more"><a href="#">&boxvh; 포토갤러리 더보기</a></div>
        </div>
    </div>

 

 

rumi_developer_2000880543_v5Dujscx_437076.png
기본 CSS 적용시 ( 반응형 X )

 

 

rumi_developer_2000880543_fckZ56Tn_fc46e2.png
반응형 CSS 적용시

 

 

 

 

댓글목록

등록된 댓글이 없습니다.