<button> 요소 사용 이유


요즘 작업 중 자주 사용하는 요소가 <button> 요소 이다.

폼 페이지에서 취소, 저장, 등록, 우편번호 등과 같은 버튼으로 자주 사용한다.


처음 <button> 요소 를 사용했던 이유로 <input>과 <a>를 혼용하는 경우가 종종 발생하기 때문이다.

<input>과 <a> 요소 역할을 정확히 이해하지 못해 발생했던 문제였다.


이들 요소에 대한 비교 설명은 아래와 같다.


<a>요소 

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


<button>요소

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


<input>요소

사용자의 입력을 서버로 ‘전송‘하기 위한 버튼으로서 <input type="submit">, <button type="submit"> 엘리먼트로 마크업 합니다.


버튼의 목적을 명확하게 판단한 뒤 알맞는 엘리먼트를 사용하는 것은 접근성을 향상시켜 줍니다. 

최근에는 Javascript를 지원하지 않는 브라우저 환경이 드물지만 되도록 Javascript에만 의존하여 기능을 수행하지 않도록 하는 것이 좋습니다. 

특히 Link Button을 이용하여 Form을 전송하는 기능을 구현하면 Javascript를 지원하지 않는 환경에서의 상호 운용성을 확보하지 못하고 화면낭독기 장치를 이용하는 사람들의 접근성을 떨어 뜨리게 됩니다. 

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


[출처]나라디자인



이 글을 읽고난 후 마크업을 조금 더 정확히 하기위해서 

링크와 같은 연결은 <a>요소, 

스크립트로 움직이는 버튼에 대해서 <button>요소를 사용한다고 판단이 들었다.




<button> 요소에 대한 추가적인 설명


1. 타입 분류


<button type="submit">

주로 입력내용을 Server로 전송하기 위해 사용하며 <input>의 type속성이 submit과 같다.

타입을 미입력시 기본으로 설정되는 타입이다.


<button type="button"> 

일반 버튼 역할, 버튼요소로 자바스크립트 실행을 목적으로 한다.


<button type="reset"> 

주로 사용자가 입력한 내용을 초기화 하는데 사용하며 <input>에서 type이 reset과 같다.



2. 실제 작업시 발생 된 문제


실제 작업에서 <button> 요소를 사용해 보니 브라우져 마다 다른 결과가 나와 까다롭다는 생각이 들었다.

나름 작업하면서 알게된 <button> 요소 CSS 방법은 아래와 같다.


background:; 원하는 디자인 이미지 넣기

border:none;

cursor:pointer;

overflow:visible;

white-space: nowrap;


background, border:none;, cursor:pointer;은 버튼요소 기본 css 무효시키며

overflow:visible;은 익스7에서 비정상적으로 늘어나는 좌우패딩버그를 막아준다.

그리고 overflow:visible;사용하면 텍스트가 세로로 정렬 문제를 white-space: nowrap;로 가로 정렬 시킨다.

저 5가지 css는 <button> 요소 작업시 꼭 알아야 할 부분이다.


내가 작업하면서 참고하였던 <button> 요소에 대한 유용한 설명이 나와있는 블로그를 소개한다.





posted by 베르베르써니 베르베르써니