(HTML, CSS) <input type = "button">과 <button>차이 , 버튼에 아이콘이 안 나오는 이유

 

 

<input type="button">으로 버튼을 만들고,

 

그 안에 font awsome의 i태그를 넣어 버튼 안에 아이콘을 넣어보고자 했다.

 

근데 아무리 해도 아이콘이 나오질 않았다. 

 

처음에는 오타 때문인 줄 알았는데 다름 아닌 <input type="button">를 사용했기 때문이다. 

 

<input type="button">를 <button>으로 바꾸고 나니 아이콘이 아주 잘 나왔다.

 

 

 

<input type="button">와 <button>의 차이

<input type="button">는 중첩된 태그를 지원하지 않는 독립적인 개체다.

 

따라서 <i>태그를 안에 넣었을 때 읽어낼 수 없다.

 

따라서 버튼 안에 다른 요소를 넣고 싶다면 <input type="button">가 아닌 <button>을 써야 한다.

 

<button><i></i></button> <!-- 가능 -->
<input type="button" /> <!-- 불가능 -->