- 폼 전송 기능을 하는
<input type="submit">과<button>은 기능적으로 동일하다. - 기본적으로 button 요소는 type 속성을 명시하지 않으면 submit 기능을 수행한다.
- 즉 폼에서 이를 대체하기 위한 목적으로는 안성맞춤이다.
button
type="submit" : 폼의 전송 기능을 담당한다.
type="reset" : 폼 작성 내용을 초기화하는데 사용한다.
type="button" : 흔히 자바스크립트를 이용한 기능 구현에 많이 사용한다.
장점
- 디자인적인 관점에서 input 요소와 달리 매우 자유롭다.
- 일반적인 요소들을 디자인하는 모든 것들을 적용할 수 있어 배경으로 이미지를 넣을 수도 있고
- 다른 태그들을 삽입할 수도 있다.
- 최근에는 각종 라이브러리에서 button 요소들에 대한 꾸밈을 적용한 css를 배포하기에 간단히 클래스명을 이용해 이를 적용할 수도 있다.
참고사항
크로스브라우징을 위해 버튼의 기본 값을 사용하지 말고, 이를 css로 디자인하여 사용한다.
기본적으로 IE8 이상과 기타 모던 브라우저들에서 잘 작동하기 위한 범용적으로 사용될 만한 속성들에 대하여 초기화를 진행한다.
- display: inline-block - 부모요소의 text-align 속성으로 버튼의 정렬 위치를 정할 수 있게 사용한다.
- font-family: inherit - 버튼 요소에 상속되지 않는 글꼴을 강제상속
- vertical-align: middle - 다른 요소를 만날때 수직 가운데 정렬을 대비
- cursor: pointer - 커서에 손가락 표시
- white-space: nowrap - 버튼의 크기가 작을때 줄바꿈 되지 않는다.
- text-decoration: none - 글자의 밑줄 제거
- background: transparent - 기본 배경색을 투명화
- border: none - 테두리 속성을 초기화한다.
- outline: 0 - 포커스시 생성되는 외곽선 제거
a요소를 대체?
- 폼을 제외한 곳에서 a요소는 앵커로써, 문서 간의 연결, URI 참조가 주된 목적이고,
- button요소는 클릭함으로써 이벤트를 발생시키는게 주된 목적이다.
- 목적에 맞게 기본 링크들은 a요소로 마크업하고, 기능을 구현하는 것은(ex. 팝업창을 띄우거나 어떤 요소를 숨기거나 보이게 하거나 등등) button요소를 사용하는 것이 시멘팅한 마크업의 지름길이다
:D