프론트엔드 개발일을 하면서 항상 마음 한구석 찝찝하고 궁금했던 문제가 있었습니다.
바로 anchor태그와 button태그의 사용입니다.
우선 각 태그의 의미를 찾아봤습니다.
다른 웹 페이지, 파일, 같은 페이지 내의 위치, 이메일 주소 또는 다른 URL에 대한 하이퍼 링크를 작성
The HTML element represents a clickable button, which can be used in forms or anywhere in a document that needs simple, standard button functionality...
클릭할수 있는 버튼을 나타냅니다.
하지만 프로젝트를 진행하면서 여태껏 단순히 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의 스타일을 감히 만져 보기로 했습니다. 그 결과 아래와 같은 방법으로 스타일을 통일 시킬수 있었습니다.
<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;
}
나름 테스트 해본 결과 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
저는, button 을 써야 하는 상황에서
div 태그에 css 로 사용하는 습관이 있었었는데
접근성 부분에서 문제가 있다는걸 나중에서야 알게 되어 필요할때 button 을 쓰고있습니다.
저같은 경우는 링크 = a
이벤트 = button
이렇게 쓰고있어요. 이게 맞다고 생각하고..
주소에 실제로 변동이 일어나는게 아닌데 a 태그를 쓰는건 뭔가 잘못된 방식이라고 느껴지긴 해요!
옛날에 bootstrap 의 경우 예시 코드에 버튼에 a 태그를 사용했었던것같은데
그게 수많은 개발자들에게 나쁜 습관을 심어준것은 아닌지..!!! 생각이 듭니다
좋은 포스트 감사합니다~!