둘의 차이점은? 태그 button과 input태그의 button타입

생활코딩 html강의를 수강하며, 즐겨 활용하는 사이트 홈페이지의 소스코드를 보다가 "button"이라는 태그에 꽂혀서 다짜고짜 개인 실습 사이트에 적용해봤다. a태그로 감싸, 버튼을 누르면 다른 페이지로 옮겨갈 수 있도록 했다.

<a href=form_choice1.html><button>투표</button></a>
<a href=form_choice1.html><button>건의사항</button></a>

그런데, 수업 따라가다 보니, input태그의 타입 중에도 button이 있었고 이 명령어가 수행하는 기능도 유사해 보였다. '클릭하는 버튼을 생성'하는 것. 실행하는 기능은 비슷해보이는데 작성하는 코드가 달라지는 점이 흥미로워서 둘의 차이를 탐색해봤다.

위와 같은 내용을, input태그 button타입으로 입력하는 코드는 아래와 같다.

<a href=form_choice1.html><input type="button" value="투표"></a>
<a href=advice.html><input type="button" value="건의사항"></a>

 

솔직히, 둘의 차이를 이론적으로 정확하게, 깊이는 모르겠다.

다만, 실험해본 결과

<a>태그로 링크를 걸어 감쌌을 때
<button>으로 쓴 경우	<input type="button">으로 쓴 경우
버튼 내부 텍스트에 밑줄이 생긴다.  마치, 텍스트url 주소처럼.	내부 텍스트에 밑줄 없다!

시각적으로, 타입으로서의 button을 쓰는 편이 훨씬 깔끔하다!

---

실험으로 이런 점을 깨닫고나서, 진도 나가기 전에 신나게 button을 태그로 달아뒀던 것들을 일일이 찾아다가 input 태그로 바꾸느라 고생까지는 아니고, 좀 귀찮았다.

깔끔한 디자인과 코드 작성의 편의성을 위해서, 열공!