1. Interactive Content

• a, audio, button, details, embed, iframe, img, input, label, select, textarea, video
• 입력 장치(키보드, 마우스)로 조작할 수 있다.

2. <a> vs <button>

• 참조할 URL이 있으면 <a>, 없으면 <button> 요소를 사용하자.
• 커서 모양이 다름에 유의하자!!
  • <button>에는 pointer 사용하지 말기 ⭐️
  • link인 경우에만 pointer를 사용하고 아니면 default

[1] <a> 사용 예시

• 대화 상자를 참조하는 경우 <a>요소의 href 값은 <dialog> 요소의 id를 참조한다.

  <a href="#modal">
  <dialog id="modal">

• 링크 위에 마우스를 올리면 웹 브라우저느 상태 표시줄에 목적지 URL을 표시해준다.
  • 다른 페이지로 이동할 것이라는 신호(정보)를 제공한다.
• 문맥 메뉴를 이용하면 새 탭에서 링크 열기 기능을 사용할 수 있다. (button 요소는 X)

[2] <a target>

<a target="_blank" rel="noopner norefeerer">

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

3. details / summary

<details open>
  <summary></summary>
</datails>

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

4. <input type>

다양한 쓰임의 type을 아는 것이 input 활용의 모든 것이다.

• search, tel, url, email, date, number, range, color

5. <input arr>

• required
• placeholder : label 대안으로 사용하면 안된다. (접근성, 사용성 떨어짐)
  • 서비스 사용자가 기억에 의존해야하기 때문에 가급적 사용하지 않는 것이 사용자 경험에 더 좋다.
• datalist : 다른 컨트롤을 위해 미리 정의된 옵션 세트를 의미한다. 숨겨진 상태로 표시된다.