Front-end/HTML&CSS

HTML&CSS) HTML 버튼 만들기 button

luana_eun 2021. 11. 18. 02:47
728x90

버튼 만드는 방법 4가지!

 

 

 방법1 . <input type="button">

<input type="button" value="이름을 뭘로 할까?"></input>

input태그에 type으로 button을 지정하고 value에 글자를 넣으면 그 글자대로 버튼이 생긴다. 

 

 

 방법2 . <input type="submit">

<input type="submit" value="써브밋"></input>

submit은 <form>태그의 결과 전송 용도로 주로 쓰인다. 

input태그에 type으로 submit을 지정하고 value글자대로 버튼이 생긴다. 

submit 타입은 데이터를 아무런 검증없이 보내기때문에 자바스크립트에서 검증을 한 후 데이터를 전송해야한다. 

 

 

 방법3 . <button>

<button>버튼태그</button>

흔히 많이 쓰는 방법이다. 

 

 

 방법4 . <div>

<div>는 일반 text를 쓸때 사용하는 태그로, 위의 세 가지 방법과는 달리 눌리는 기능이 없다. 

그래서 CSS로 뒷배경 색깔을 넣어서 버튼처럼 보이게 만든 후 기능을 달아서 사용한다.'

<div>버튼 같지 않지만 버튼이 될 거야.</div>

<a>태그와 같이사용해서 버튼기능을 넣고

CSS에 :active { } 를 사용해서 마우스가 눌렀을때 변화도 설정할 수 있다. 

 

 

728x90