어떠한 태그를 사용하여야 하나

프론트엔드 개발일을 하면서 항상 마음 한구석 찝찝하고 궁금했던 문제가 있었습니다.
바로 anchor태그와 button태그의 사용입니다.

태그의 의미

우선 각 태그의 의미를 찾아봤습니다.

<a>: The Anchor element

The HTML <a> element (or anchor element) creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL.

다른 웹 페이지, 파일, 같은 페이지 내의 위치, 이메일 주소 또는 다른 URL에 대한 하이퍼 링크를 작성

<button>: The Button element

The HTML <button> element represents a clickable button, which can be used in forms or anywhere in a document that needs simple, standard button functionality...

클릭할수 있는 버튼을 나타냅니다.

정리하자면

  • anchor tag는 다른 리소스나 페이지내의 위치를 가리키며 href 속성과 함께 사용해야 한다.
  • button tag는 onclick event가 필요한 상황에서 사용이 되어야 한다.

하지만 실제는?

하지만 프로젝트를 진행하면서 여태껏 단순히 onclick이벤트가 필요한 부분에 button tag를 사용하지 않고 아래와 같은 방식으로 사용했습니다. 또 facebook, naver등과 같은 기업에서도 아래와 같은 방식으로 사용하는것 같았습니다.

<a href="#">버튼<a/>
<a href="#" role="button">좋아요</a>

태그의 의미에 맞지 않는 용도로 사용을 했고 의미없는 href속성을 사용한 것 입니다.

또 위와 같이 사용할경우 클릭 시 페이지 최상단으로 스크롤 되는 문제도 발생합니다. 그래서 이 문제를 해결하기 위해 또 일일이 아래와 같이 정의해 주어야 합니다.

event.preventDefault()

왜?

그렇다면 왜 여태껏 이러한 경우 button tag가 아닌 anchor tag를 사용했을까요? 제가 놓친 무언가가 있는 것일까요? 있다면 알려주세요!

제 생각에는 css 스타일링의 편의 때문에 그렇게 된것이 아닌가 하는 생각이 듭니다.
button tag의 경우 운영체제, 브라우저 마다의 기본 스타일이 다르고 쉽게 css를 reset,normalize 하기가 어렵습니다. 또한 일부 브라우저에서 버튼을 클릭할때 발생하는 딸깍! 거리는 스타일도 영 거슬립니다.

그렇다면 스타일링 문제만 해결되면 맘껏 button tag를 사용해도 되지 않을까요? 정말?

해결

그래서 button tag의 스타일을 감히 만져 보기로 했습니다. 그 결과 아래와 같은 방법으로 스타일을 통일 시킬수 있었습니다.

code

<button>
  <span>버튼 테스트</span>
</button>
button {
  box-sizing: border-box;
  padding: 0;
  border: 1px solid #00f;
  outline: 0;
  background: none;
  text-align: center;
}
button span {
  box-sizing: border-box;
  position: relative;
}

demo

테스트 결과

브라우저

  • window: ie8, ie9, ie10, ie11, chrome, firefox
  • macos: chrome, safari, firefox

나름 테스트 해본 결과 ie8에서 딸깍 거리는 스타일의 문제는 해결하지 못했지만 나머지 브라우저에서는 동일한 스타일로 보여줄수 있었습니다.

결론

아직은 테스트가 완벽하다고 생각되지는 않기 때문에 앞으로 사이드프로젝트를 진행하면서 다양한 케이스에서 button tag를 적극적으로 사용하고 문제점을 찾아볼 생각입니다.

혹시라도 제가 놓치고 있거나 잘못 생각하고 있는 부분이 있다면 언제든 지적 부탁드립니다.
감사합니다!


부족한 점이 많습니다. 그럼에도 글을 작성하는 이유는 항상 다른분들의 생각이 궁금하고 논의하고 싶기 때문입니다. 제가 잘못 알고있는 부분이나 부족한 부분은 언제든지 말씀해 주세요.
감사합니다 :)

참조

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button