button 디자인시 유의할 점

버튼 디자인 유형들....

<button type="button">버튼이름</button>
<input type="button" value="버튼이름" onclick="">

- input 요소와 차이점은 내용을 가질수 있다는점

- button 요소는 텍스트뿐만 아니라 이미지 요소를 자식으로 포함할 수 있다.

<input type='button'>, <button> 차이

<input type='button'> 과 <button type="button">은 기능적으로 동일하다.

하지만 button태그에 type속성을 넣지 않으면 submit 기능을 수행한다.

버튼 자체를 submit 용도록 사용한다면 문제가 안되지만 스크립트 동작을 원할 경우 type="button" 써주는 것을 추천한다.

*button의 속성값

- type="submit" 전송기능

- type="reset" 내용을 초기화

- type="button" 기능구현에 많이 사용, 자바스크립트 실행을 목적으로 한다. 

<a>요소

URI를 ‘연결‘하기 위한 버튼으로서 <a href="#url"> 형식으로 마크업 

a태그에 스타일을 줘서 버튼 형식으로 보이도록 코딩하면 된다.

<button>요소

<button>엘리먼트는 누를 수 있는 단추로써, 누르거나 눌렀다 놓았을 때 이벤트를 발생시키도록 하는게 주된 목적

URI를 연결하지 않고 단순하게 사용자 인터페이스만를 ‘조작‘하기 위한 버튼으로서 <button type="button"> 엘리먼트로 마크업 type 속성을 명시하지 않으면 어떤 브라우저는 Form Submit 기능을 실행하기 때문에 반드시 type 속성을 button으로 지정해 주어야 한다.

목적에 맞게 기본 링크들은 a 요소로 마크업하고, 기능을 구현하는 것은 (ex. 팝업창을 띄우거나 어떤 요소를 숨기거나 보이게 하거나 등등) button 요소를 사용하는 것이 시멘틱한 마크업의 지름길이다.

Form 페이지의 전송 버튼을 ‘submit’ 버튼 대신 ‘a’ 버튼으로 마크업 하는 경우 화면 낭독기는 HTML기반으로 내용을 읽어 주기 때문에 이것을 ‘~링크’라고 읽어 주고 시각장애인은 이것을 ‘~전송 버튼’이라고 확신할 수 없는 문제가 발생

결과적으로 폼 submit 용도가 아닌 <button> 엘리먼트에는 type="button"을 넣어 <button type="button"> 형태로 쓰자.

*URI 와 URL의 차이

URI 가 더 큰 개념이라고 할 수 있죠.. URI는 Uniform Resource Identifier 의 약자로 URL(Uniform Resource Locator)와 URN(Uniform Resource Name) 을 포함합니다.

*출처 : 까먹음;;;;