button 태그 안 a 태그

어느날 부터 인가 html 마크업 상 사람들이 input으로 버튼을 만들기 보단 buuton 태그를 활용하여 버튼을 생성하는 경우가 많아 졌다

위와 같이 속성을 생략하고 작성하는 경우가 많은데, 웹표준에 보면 아래와 같이 type 을 선언해 주라고 표시하고있다

button 태그의 기본 타입이 바로 submit 이기 때문인데, 퍼블리셔 입장에선 대수롭지 않게 생각 할 수 있는 이 부분이 간혹 어떤 개발자에게는 짜증을 유발 시킬 가능 성이 있다.

input 태그를 사용하는 경우에는 type을 무조건 작성 해줘야하지만 우리가 이야기하는 button태그는  우리가 무심코 지낫을 때 누군가는 빡칠 수 있다는 것을 기억해두자.!

자 그럼 곰곰히 생각해보아야 할 것이 있다. 바로 버튼이라는 녀석의 용도이다.

요즘 같이 퍼블리싱을 하는 친구들을 보면, 버튼안에 링크를 걸기위해 버튼 태그안에 a테그를 넣어 링크를 걸려고하는 작업자 분들을 종종 보았다.

정확하게 말하자면, 올바른 방법이 아니라고 생각한다. 버튼에 대해 생각을 해보면 버튼의 타입은 여러가지로 나뉜다 'button','submit','reset' 등 이러한 형태들이 있으며, 이런 버튼들은 용도가 각기 다르다.

간단하게 기준을 내리자면 button 읜 본래 용도가 무엇인지 이해하고 사용해 해야 한다. 

링크는 페이지 이동이 아닌 화면상의 다른기능을 구현 할 때 쓰는 것이 아니다.

만일 링크의 외적인 다른 기능 쓰려고 한다면 그때 바로 button 을 사용하는 것이다.

가령 자바스크립트로 만들어진 슬라이드 베너와 같이 눌럿을 때 어딘가를 지시하는것이 아닌 엘리먼트가 유동화가 된다 던가 할 때 사용할 것을 고려해야한다. 

간혹 버튼을 링크 처럼 쓰기위하여, button안에 a태그를 넣는 경우가 있는데, 아래와 같다.

위와 같이 사용 할 것이라면 차라리 아래 처럼 사용하자

        
 눌러!
 

첫째. 버튼을 링크처럼 사용하는것에 대한 문제점은 여러 가지가 있지만, 그 중 대표적인 문제는 웹접근성이다. 페이지를 읽어주는 보이스리더 같은 화면 리더그램 은 해당 태그를 리딩할때 버튼/ 링크에 대한 부분을 명확하게 표기하고있다

둘째. 버튼안에 링크를 넣는것은 파이어폭스에서 정상적으로 동작하지 않는다.

셋째. 우리가 브라우저에서, 음.. 대표적으로 익스플로러에서 a 태그 안 링크영역을 마우스로 오버 했을 경우인데. 이럴경우 좌측하단에 링크주소가 표시된다. 이런것은 하나의 브라우저에서 보여지는 서비스인데 우리에게 큰 영향을 주지 않지만. 어찌됫 건 불편함이 야기 될 수 있따는 것이다.

그러니 링크는 링크 기능대로 ,button은 버튼 대로 꼭 구분 하여 사용 할 필요가 있다. 그리고 버튼을 사용해 줄땐 꼭 type 속성을 작성해주자