anchor vs button

max·2018년 11월 24일

anchor button button normalize css normalize css reset html markup normalize reset semantic

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

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

태그의 의미

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

: The Anchor element

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

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

: The Button element

The HTML 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