FDS12_Markup_Summary

Tab menu | jQeury

공지사항 및 자료실 : Tab Menu

1. Contents의 논리적 순서

   (1) 공지사항 탭

   (2) 공지사항 목록

   (3) 더보기

   (4) 자료실 탭

   (5) 자료실 목록

   (6) 더보기

2. Semantic Markup

• tabindex=”0”으로 <h2>에 키보드 포커스 받음 > link 같은 건 javaScript로
• .board-act class부여해서 후에 동작 기능 컨트롤

2-1. tab, list 분리

• ARIA 사용해서 논리성과 접근성 다 챙기는 방법도 있음

  <section role="tabpanel" id="s1">

1. Markup

<section class="notice board-act">
    <h2 id="notice" class="tab notice-heading" tabindex="0">공지사항</h2>
    <ul class="board-list notice-list">
        <li class="icon-dot-circled">
            <a href="#">HTML의 모든 것을 알려주마 샘플 활용법</a>
            <time datetime="2019-04-09T11:18:27">2019.04.09</time>
        </li>
        <li class="icon-dot-circled">
            <a href="#">W3C 사이트 리뉴얼 및 공지사항</a>
            <time datetime="2019-04-09T11:18:27">2019.04.09</time>
        </li>
        <li class="icon-dot-circled">
            <a href="#">KWCAG 2.1 소식</a>
            <time datetime="2019-04-09T11:18:27">2019.04.09</time>
        </li>
        <li class="icon-dot-circled">
            <a href="#">서버 점검으로 인한 사이트 이용안내 입니다.</a>
            <time datetime="2019-04-09T11:18:27">2019.04.09</time>
        </li>
        <li class="icon-dot-circled">
            <a href="#">여러분들이 생각하는 웹 접근성에 대해 이야기를 나누어 봅시다.</a>
            <time datetime="2019-04-09T11:18:27">2019.04.09</time>
        </li>
    </ul>
    <a href="#" class="icon-plus board-more notice-more" title="공지사항" aria-labelledby="notice">더보기</a>
</section>
<section class="pds">
    <h2 id="pds" class="tab pds-heading" tabindex="0">자료실</h2>
    <ul class="board-list pds-list">
        <li class="icon-dot-circled">
            <a href="#">디자인 사이트 링크 모음</a>
            <time datetime="2019-04-09T11:18:27">2019.04.09</time>
        </li>
        <li class="icon-dot-circled">
            <a href="#">웹 접근성 관련 자료 모음</a>
            <time datetime="2019-04-09T11:18:27">2019.04.09</time>
        </li>
        <li class="icon-dot-circled">
            <a href="#">예제 샘플 응용해보기</a>
            <time datetime="2019-04-09T11:18:27">2019.04.09</time>
        </li>
        <li class="icon-dot-circled">
            <a href="#">웹 접근성 향상을위한 국가 표준 기술 가이드라인</a>
            <time datetime="2019-04-09T11:18:27">2019.04.09</time>
        </li>
        <li class="icon-dot-circled">
            <a href="#">로얄티 프리 이미지 자료</a>
            <time datetime="2019-04-09T11:18:27">2019.04.09</time>
        </li>
    </ul>
    <a href="#" class="icon-plus board-more pds-more" title="자료실" aria-labelledby="pds">더보기</a>
</section>

Aria-label

: <h2>에 id=”notice”, 밑에 <a>에 title=”공지사항” 외에도 aria-labelledby=”notice”로

.tab (비활성화 / 활성화 디자인)

.tab {
    padding: 5px 10px;
    display: inline-block;
    font-size: 1.4rem;
    border:1px solid #aaa;
    background: #ccc linear-gradient(#ccc, #eee);
    color: #666;
    border-radius: 7px 7px 0 0;
    margin-bottom: 5px;
}
.board-act .tab{
    background: #fff;
    border: 1px solid #ed552f;
    color: #ed552f;
    border-bottom: #fff;
}

• absolute인 box는 relative box 크기를 넘지 않음

• white-space: nowrap은 block box에만 쓸 수 있음

text-overflow : ellipsis

.board-list a{
    display: inline-block;
    width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

크기를 넘어가는 text 말줄임표로 처리함!

---

Script의 defer / async 속성 : HTML5 추가

• script의 async와 defer 속성

• 웹 브라우저는 html을 랜더링하는 과정에서 css(<link type='text/css'>) 또는 js(<script>) 를 만나면 동기적으로 처리한다. 즉, 하던 일을 중지하고 script를 다운받고 실행한다.

  • 그동안 문서가 그려지다 멈춰있는 문제, script에서 참조해야할 요소가 아직 그려지지 않은 문제 등
  • HTML parsing이 다 끝나야 DOM tree가 그려진다.

• Async

  외부 스크립트에 이 속성이 있으면 HTML 문서가 여전히 구문 분석되는 동안 파일을 다운로드 할 수 있으며 다운로드가 완료되면 스크립트가 실행될 수 있도록 구문 분석이 일시 중지 된다.

• Defer

  HTML 구문 분석이 완전히 완료되면 스크립트 파일을 실행하도록 브라우저에 지시한다.

main.js

1. menu의 mouseover event

var item = $('.menu-item');
// 메인 메뉴의 하위 메뉴 제어를 위한 스크립트
// keyboard Focus도 받을 수 있게
item.on('mouseover focusin', function(){
    item.removeClass('menu-act');
    $(this).addClass('menu-act');
});

• mouseover event 때 모든 .menu-item에 removeClass 한 후 해당 event 발생 object에만 addClass
• .on method로 mouseover, focusin 등 여러 event에 같은 event listener를 적용할 수 있다.

1. Sub-menu의 mouseover event

var itemSubLink = $('.sub-menu a');
// 서브 메뉴의 icon을 제어
itemSubLink.attr('class', 'icon-dot-circled');
// 서브메뉴 mouseover, mouseout
itemSubLink.on('mouseover', function(){
    $(this).attr('class', 'icon-ok');
    $(this).addClass('sub-menu-act');
});

itemSubLink.on('mouseout', function(){
    $(this).attr('class', 'icon-dot-circled');
    $(this).removeClass('sub-menu-act');
});

1. Board의 click event : tab menu & Keyevent

var tab = $('.tab');
var section = $('.notice, .pds');
// 탭 content 제어를 위한 스크립트
tab.on('click keyup', function(e){
    // 13 : enterm 32: space
    if(e.keyCode === 13 || e.type === 'click' || e.keyCode === 32){
        section.removeClass('board-act');
        $(this).parent().addClass('board-act');
    }
});

(1) 모든 section에 board-act 빼고, click event 발생한 (h2)의 parent(section)에만 board-act

(2) parent의 siblings에 removeClass 할 수도 있음

• keyCode.info 바로가기
  • ENTER: 13
  • TAB: 9
  • SPACE: 32
    1. Cursor: pointer

       .menu-item {
         position: relative;
         float: left;
         cursor: pointer;
       }
       

       <li>에 적용시 <a>의 hover 손가락처럼 나옴

<h2>에 적용해도 손가락

---

예제별 ARIA Example