a태그와 button 그리고 input
a태그와 button 그리고 input
우리가 일반적으로 생각하는 버튼을 만들 수 있는 방법에는 3가지가 있다.
- a 태그 사용
- button 태그 사용
- input 태그 사용
프로젝트 제작 당시, 각각의 일반적인 개념을 갖고 있었지만
'키보드 tab처리를 해야되는 중요한 부분에는 a 태그로 처리해라' 라는 배움만을 생각해
대부분의 버튼 태그를 a 태그로 처리했었다🤔(사전과제 본 후 면접봤을 때도 이 부분에 대해 질문받음)
화면 자체로만 봤을 때는 문제가 되진 않겠지만,
하지만 중요한 것은 생긴 것보다는 ⭐어떤 역할을 하느냐가 중요하다는 것⭐
(시맨틱하게 마크업하기 위해서는 역할에 대해 생각하는 것이 중요하다)
*해당 태그는 최소 44*44 권고*
📍a 태그
anchor 태그로 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와
그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만드는 태그이다.
- 링크 안 콘텐츠는 링크가 향하는 곳을 설명해야 한다.
- tab을 사용해 focus 이동을 할 수 있다.
- 점프 메뉴 사용 시 href ="#id"
- button 역할은 button 태그를 사용하자
- 스크린 리더기에서 링크로 읽어준다. (클릭한 링크는 방문한 링크라 읽어줌)
📍button 태그와 input 태그 (type="button")
type="button"인 button태그와 input 태그는 단순 클릭용의 일반 버튼을 마크업 시 사용한다.
(그러나 일반 버튼으로 사용 시 button 태그 사용을 더 권장한다.)
차이점은
button 태그는 내부 콘텐츠 지정이 가능해 스타일 적용이 더 용이하고, 가상요소(::after ::before)도 사용가능
input 태그는 내부 콘텐츠를 지정하려면 value 속성에 값을 지정해야 한다.
button 태그
- button 내부 콘텐츠에는 간단하게 button을 설명하는 텍스트를 포함한다.
- 닫는 태그가 있어, 내부 콘텐츠에 텍스트 외 이미지도 넣을 수 있다.
- tab을 사용해 focus 이동을 할 수 있다.
input 태그
- value 미지정 시 빈 버튼이 된다.
- 클릭과 같은 이벤트 처리를 통해, 기능을 지정할 수 있다.
- tab을 사용해 focus 이동을 할 수 있다.
<a href="#">a태그는 다른 페이지로 이동</a>
<button type="submit(기본값) / reset / button">기본 버튼/내부 콘텐츠</button>
<input type="submit / reset / button" value="내부 콘텐츠(텍스트)">a태그는 다른 페이지로 이동
* 참고 사이트