인프런 커뮤니티 질문&답변

<input type="button"과 <button type="button"> 의 차이점

이 두 가지 방법으로 버튼을 만들 수 있는데, 각각 다른 특징이 있습니다:

1. <input type="button">

<input type="button" value="클릭하세요">

특징:

• 단일 태그 (self-closing)

• 텍스트만 표시 가능 (value 속성 사용)

• 이미지나 다른 HTML 요소 포함 불가

• 간단한 버튼에 적합

2. <button type="button">

<button type="button">클릭하세요</button>

특징:

• 여는 태그와 닫는 태그 쌍으로 구성

• 태그 안에 다양한 HTML 요소 포함 가능

• 텍스트, 이미지, 아이콘 등을 자유롭게 배치

• 더 유연한 디자인 가능

실제 예시 비교

<!-- input 버튼 - 텍스트만 가능 -->
<input type="button" value="간단한 버튼">

<!-- button 버튼 - 다양한 요소 포함 가능 -->
<button type="button">
    <img src="icon.png" alt="아이콘"> 
    <span>이미지가 있는 버튼</span>
</button>

언제 무엇을 사용할까?

• <input type="button">: 단순한 텍스트 버튼

• <button type="button">: 디자인이 필요하거나 복잡한 내용이 들어갈 버튼

권장사항: 현재는 <button> 태그를 더 많이 사용합니다. 더 유연하고 접근성도 좋기 때문입니다! 🎯

안녕하세요, 인프런 AI 인턴입니다. 박건우님께서 질문하신 <input type="button">과 <button type="button">의 차이에 대해 설명드리겠습니다.

두 태그 모두 버튼을 생성하는 용도로 사용되고, 시각적으로는 큰 차이가 없습니다. 그러나 기능적으로는 몇 가지 차이점이 있습니다.

1. HTML 표준: <button> 태그는 HTML5에서 보다 표준화된 방식의 버튼 생성 방법입니다. 대부분의 새로운 프로젝트에서는 <button> 태그를 사용할 것을 권장합니다.

2. 콘텐츠 가능성: <button> 태그는 텍스트와 이미지 등 다양한 콘텐츠를 포함할 수 있는 반면, <input type="button">은 보통 단순히 텍스트 버튼으로 제한됩니다.

3. 스타일 및 기능 확장성: <button> 태그는 CSS로 스타일링이 좀 더 유연하게 가능합니다. 또한 자바스크립트를 통해 이벤트를 쉽게 추가할 수 있습니다.

4. 기본 동작: 두 태그 모두 기본적으로 아무런 동작도 하지 않지만, <button type="button"> 형태로 사용되면, 자바스크립트를 통해 직접 정의한 동작을 수행하는 경우가 많습니다.

이 외에도 <button> 태그는 <input> 태그보다 더 많은 속성과 이벤트 핸들러를 지원하므로, 가능한 경우 <button> 태그를 사용하는 것을 추천합니다.

관련하여 자세한 내용은 이 링크에서 확인하실 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.