1. <a>
<a href="https://...">
anchor (외부로 내보내기)
href 특성을 함께 사용하여 다른 페이지나 같은 페이지 내의 특정 위치로 이동할 수 있도록 연결하는 하이퍼링크 역할을 한다.
2. target 속성
<a href="https://..." target="_blank">
연결된 URL이 클릭되었을 때, 해당 문서가 열릴 위치를 설정한다.
| _self | 기본값 URL를 현재 브라우저 탭에 가져옴. |
| _blank | URL를 새로운 윈도우나 탭에서 오픈함. |
| _parent | URL를 현재 브라우징 맥락의 부모에 표시. 부모가 존재하지 않으면 _self와 동일하게 행동함. |
| _top | URL를 최상단 브라우징 맥락(현재 맥락의 부모면서 자신의 부모가 존재하지 않는, 제일 높은 맥락)에 표시. 부모가 존재하지 않으면 _self와 동일하게 행동함. |
3. <button> 과의 차이점
a태그와 button태그는 유사한 쓰임새를 가진다. 실제로 디자인만 보고는 둘 중 무엇을 선택해야 할지 쉽게 고를 수 없다. 하지만 둘은 분명한 차이점을 가진다.
업무 교육 중 둘을 언제 사용해야할 지에 대해 혼동이 있어 고민이 있었고, 그 때 배운 내용을 중심으로 이를 정리해본다.
(이미지 출처 : Google 메인 홈)
흔히 버튼 모양을 만드는 경우, 두 태그 중 무엇을 써야할 지 고민이 있었는데 용도를 나눠 비교하자면
<a> 태그는 "어디론가로 이동"을 하기 위한 버튼을 만들 때 사용한다.
사진 속 'Gmail' 텍스트의 경우 해당 텍스트를 누르면 Google 서비스 중 하나인 Gmail로 페이지가 이동하게 된다. 이 텍스트를 감싸기 위해서 a태그를 이용하는 것이다.
그 외에도 'Gmail' 오른쪽에 위치한 '이미지', 그리고 'Google 앱' 목록 내부에 위치하는 각각의 컨텐츠들이 a태그를 이용하기 적절하다고 판단이 된다.
<button> 태그는 "어떠한 동작"을 하기 위한 버튼을 만들 때 사용한다.
사진 속 'Google 앱(3x3 도트 모양 아이콘)' 을 누를 경우 해당 페이지가 따로 갱신되는 것 없이 앱에는 어떤 것이 있는지 자세히 보여주는 서랍이 아래에 등장한다. 즉, 단순 클릭 동작과 같다. 이 아이콘을 담기 위해서 button태그를 이용하는 것이다.
그 외에도 'Google 앱' 오른쪽에 위치한 'Google 계정(짱구 이미지)'가 button태그를 이용하기 적절하다고 판단이 된다.
이것이 무조건 정답인 것은 아니다. 실제로 개발자 도구로 다른 실사이트를 확인했을 때, 이렇게 만들어져있지도 않다. a태그로 만든 뒤,<a href=".." role="button">과 같이 wai-aria를 이용하여 button 역할을 지정하는 등의 다른 대처도 존재한다. 다만 태그의 용도를 확실히 알고 사용하는 것이 조금 더 시멘틱한 코드 작성 방식인 것임은 맞는 것 같다.
참고 문서
MDN - a
TCP School - a target
Helopy.blog - html elements
