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
'Front-end > HTML&CSS' 카테고리의 다른 글
HTML&CSS) HyperLink 링크 이동 <a href> (0) | 2022.01.18 |
---|---|
HTML) select 선택 항목 (0) | 2022.01.18 |
HTML) 테이블 만들기 (0) | 2022.01.17 |
HTML&CSS) 목록 태그 ul 와 li, 목록 스타일 없애기 (0) | 2021.11.18 |
HTML&CSS) inline과 block 차이 (0) | 2021.11.18 |