[Day 11] Input + Tab Menu + CSS Styling + JS keyboard control

Form elements

• input (HTML5 “Forms 2.0 Tests”)
  • type=”tel”
    • 모바일에서 tel일 경우 숫자 키패드 띄워줌
    • pattern 속성에 정규표현식으로 숫자로만 제한해줌
  • type=”search”
    • 검색 폼
  • type=”date”, “month”, “week”, “time”
    • 날짜 관련 입력 폼 (아직은 모던 브라우저에서도 잘 지원되지 않는다.)

Tab Menu Markup & Accessibility

• 탭 부분을 ul > li 로 만들어서 탭 간의 이동을 가능하게 해서 만든다.
• 접근성을 향상시키기 위해 탭의 내용은 section을 만들고 section 내부의 heading에 WAI-ARIA(aria-label)를 활용해 탭의 id와 연결시킨다. (labeling 하는 원리)
• ARIA - tab ui
• WAI-ARIA 사례집

CSS Styling

• :not
  • 해당 선택자가 아닌 것 ( .term-list div:not(:nth-child(odd)) )
• vertical-align
  • 부모 요소가 아닌 line-height 안에서 세로 정렬 된다.
• css 선택자에서 해당 내용을 포함하는 것을 고를 때
  • .board 에서 list로 끝나는($) 클래스 속성을 가진 css 선택자를 선택할 때
    • .board [class$="list"]
  • 해당 내용으로 시작한다면 (^)
• text-overflow: ellipsis;
  • text가 오버플로우 될 경우 ... 처리

Javascript keyboard control

• keyboard event
  • keycode.info
    • Enter는 13번, space는 32번 등 키보드 이벤트는 각각의 코드를 갖는다.
    • keyup(), keypress(), keydown() 과 keycode를 조합해서 사용한다.
    • focus(), focusin(), focusout() 등의 이벤트도 있다.