HTML 인터렉티브 콘텐츠

a, button

• a
  • 실행 결과를 가리킬 수 있는 url이 있을 때
  • 현재페이지 특정 섹션 스크롤 이동
  • 대화 상자를 참조하는 경우. a 요소의 href 값은 dialog 요소의 id(해시 url)을 참조
  • 링크 열기 가능. (button보다 더 많은 기능을 제공)
• button
  • 참조할 url이 없을 때
• pointer: 링크를 의미하기 때문에 button일 때는 pointer 하지 않는 것이 좋음.

a target

• target=”_blank”: 안전하지 않은 외부 페이지 새창 링크
  • 새창으로 열린 외부 페이지 B는 자바스크립트 window.opener 객체를 통해 부모 페이지 A의 제어 권한을 획득한다.
  • 사용자는 탭 가로채기(tabnabbing) 공격에 노출될 수 있다.
• 해당 문제는 rel로 해결할 수 있다. (rel="noopener noreferrer")
  • noopener 값은 window.opener 객체를 제거
  • noreferrer값은 window.opener 제거 불능
  • noopener를 지원하지 않는 낡은 브라우저를 위해 noreferrer를 함께 표기한다.
  • 최신 브라우저는 암시적으로 적용하고 있으나 낡은 브라우저를 위해 명시하는 것이 좋다.

details, summary

• 열림 상태일 때 정보를 표시하는 위젯.
• details 요소에 open 속성을 넣으면 열린 상태로 표시.
• summary 요소는 details 요소의 나머지 부분에 대한 요약, 캡션, 범례를 의미한다.
• 숨겨진 폼(form)을 드러내기도 한다.

input

• search, tel, url, email, date, time, range, color 등등.
• attr: required, placeholder(label 대안으로 사용하면 안됨 / 접근성이 떨어짐)

datalist

• 다른 콘트롤을 위해 미리 정의된 옵션 세트를 의미.
• 숨겨진 상태로 표시된다.

<label for="local">지역번호</label>
<input type="text" id="local" value="?" list="local-list">
<datalist id="local-list">
    <option value="02" label="서울"></option>
    <option value="031" label="경기"></option>
</datalist>

---

REFERENCE
패스트 캠퍼스 The RED : 견고한 UI 설계를 위한 마크업 가이드 _ 정찬명 강사님