<div> 요소를 특정 요소처럼 사용하기

<div>로도 <button>, <input> 등을 CSS를 이용해 비슷한 모양으로 구현할 수 있다. 그러나 기본 요소들이 제공하는 동작들을 사용하지 못한다는 단점이 있다.

<div>를 사용해야 하는 경우에, 몇 가지 코드를 추가로 작성하면 사용 목적과 유사하게 만들 수 있다.

• role - 해당 요소의 원래 목적을 작성하면 목적을 가진 요소로 인식
• tab-index - 해당 요소를 탭 키로 도달하게 하는 속성, 해당 속성을 통해 탭 키로 이동할 다음 키보드 위치를 지정
• 키보드 이벤트 리스너 추가하기

<div tabIndex="0" role="button">
  button 
</div>