Interactive content

• 사용자와 상호 작용할 수 있는 콘텐츠
• a, audio, button, details, embed, iframe, img, input, label, select, textarea, video
• 입력 장치(키보드, 마우스)로 조작이 가능

<a> vs <button>

• 같은 외형을 지닌 경우라도 a, button 요소를 구별해서 사용
• 실행 결과를 가리킬 수 있는 URL이 있으면 a 요소
• 참조할 URL이 없으면 button 요소를 사용
• 커서 모양이 다름

※참고 Button에 손 모양 커서를 사용해도 될까?
관련 글 보기

target attribute

<a 
   href="https://velog.io/@jtwjs"
   target="_blank"
>

• 안전하지 않은 외부 페이지 새 창 링크
• 새 창으로 열린 외부 페이지 B는 자바스크립트 window.opener 객체를 통해 부모 페이지 A의 제어 권한을 획득
• 사용자는 탭 가로채기(tabnabbing) 공격에 노출된다.

해결 방법

<a 
   href="https://velog.io/@jtwjs"
   target="_blank"
   rel="noopener noreferrer" 
>

• noopener 값은 window.opener 객체를 제거
• noreferrer 값은 window.opener 제어 불능
• 다행히도 최신 브라우저는 target="_blank" 링크에 rel="noopener" 속성을 암시적으로 적용하고 있다.
• noopener를 지원하지 않는 구형 브라우저를 위해 noreferrer를 함께 표기

<detalis> & <summary>

<details open>
  <summary>
    details content 요약
  </summary>
  ...숨겨진 컨텐츠
</details>

• 열림 상태일 때 정보를 표시하는 위젯.
• details 요소에 open 속성을 넣으면 열린 상태로 표시
• summary 요소는 details 요소의 나머지 부분에 대한 요약, 캡션, 범례 를 의미

<input>

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

type="search"

• 주로 검색창을 만들 때 사용한다
• 기본적으로 브라우저에서 제공하는 css로 오른쪽 끝에 X 표시 버튼이 있는데 css로 제어가능

type="tel"

• 모바일 기기에서 input에 포커스가 되면 전화번호 키패드가 등장

type="url"

• 모바일 기기에서 input에 포커스가 되면 URL을 입력하기 위한 키패드가 등장

type="email"

• 사용자가 과거의 이메일을 입력햇던 이력을 가져와 자동완성 기능 제공

type="date"

• 날짜와 시간에 대한 유효한 인터페이스 제공
• 사용하는 브라우저 또는 기기에 따라 UI가 다름
• 커스터마이징은 불가
• type="datetime-local", type="month", type="week", type="time"등 다양한 타입 존재

placeholder

• 컨트롤에 초기값이 없을때 사용자에게 데이터 입력을 지원하기 위해 제공하는 텍스트
• label 대안으로 사용하면 안된다.
• 값을 입력하면 placeholder text가 사라지기 때문에 이 input이 대한 설명이나 정보를 볼 수 없어 기억에 의존하게 된다.
  • 사용자경험을 떨어뜨린다.

<datalist>

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

<label for="search">검색: </label>
<input type="search" id="search" value="?" list="search-list">

<datalist id="search-list">
  <option value="프론트엔드" label="프론트엔드"></option>
  <option value="취업" label="취업"></option>
</datalist>