[출처:웹접근성 연구소 http://www.wah.or.kr/Consulting/consultList_view.asp?seq=1079&page=1&cType=&FindTxt=%EB%A0%88%EC%9D%B4%EC%96%B4]
[a]
다른 자원을 참조(링크) 할 때 사용 합니다.
[input]
사용자의 입력을 받은 form을 서버측에 전송하거나 서버측으로부터 새로운 데이터를 받아서 현재 페이지를 갱신할 때 사용 합니다.
[button]
자원을 참조하지도 않고 form 을 전송하지도 않으나 사용자의 클릭 또는 Enter 행위를 이용해서 화면의 인터페이스를 조작하고자 할 때 사용 합니다. a, input과 달리 닫기 태그가 존재하며 인라인 요소(텍스트, 이미지) 따위를 자식 요소로 포함할 수 있습니다.
[a], [input] 요소의 쓰임새에 대해서는 비교적 명확하게 이해하고 계시리라 생각 됩니다.
[button] 요소의 경우 좀 더 구체적으로 세 가지 쓰임을 가질 수 있는데 다음과 같습니다.
첫째,
[input type="submit"] 버튼과 같이 [button type="submit"]...[/button] 처럼 submit 속성값을 사용하면 form을 submit 하는 용도(기능)로 쓸 수 있습니다.
둘째,
form 을 submit 하지 않고 자바스크립트에 완전히 의존해서 화면의 인터페이스를 조작하는 역할 입니다. 이 때에는 [button type="button"]...[/button] 으로 선언 합니다.
셋째,
form 을 reset(초기화) 하는 기능 입니다. [button type="reset"]초기화[/button]
[button type="button"] 의 실 예로 다음과 같은 상황을 들 수 있습니다.
* 숨은 레이어(도움말 따위)를 펼치거나 접는 기능으로써 흔히 '토글' 버튼이라고 부르는 것.
* 레이어 또는 브라우저를 닫는 기능으로써 흔히 '닫기' 버튼이라고 부르는 것.
* '이전, 다음' 과 같이 브라우저 히스토리 기능을 자바스크립트로 구현하려는 경우.
언급하신 버튼들의 종류들에 대한 마크업.
* 취소 - button type="reset" 또는 button type="button" 으로 구현.
* 목록 - 목록 페이지 링크 이므로 a 요소로 구현. 만약 여러 유형의 목록(예를 들면 그냥 목록과 게시물 검색결과 목록 등)이 존재하고 상황에 따라 이동해야 할 목록 페이지가 달라진다면 이 URL은 서버측 스크립트로 처리.
* 수정 - 수정 페이지 링크 일때에는 a 요소로 구현. 현재 페이지에서 자바스크립트를 이용하여 숨은 서식을 드러내는 기능이라면 button type="button" 으로 구현.
* 삭제 - 서버측 스크립트에 따라서 다양한 방법으로 마크업 할 수 있으나 보통 URL 이동을 하기 때문에 a 요소로 처리함. URL 이동 없이 그냥 삭제가 된다면 상황에 따라 input 또는 button 모두 사용할 수 있음.
* 글쓰기 - 글쓰기 페이지로 이동하는 버튼이라면 a 요소로 구현. 글쓰기 페이지에서 작성된 글을 전송하는 버튼이라면 input type="submit" 으로 구현.
참고
CSS Text Button Design.
naradesign.net/wp/2008/10/31/203/
웹 접근성을 고려한 게시판 제작 기법
naradesign.net/wp/2008/11/14/257/
naradesign.net/open_content/reference/board/boardListBasic.html
naradesign.net/open_content/reference/board/boardReadBasic.html
naradesign.net/open_content/reference/board/boardWriteBasic.html
[a]
다른 자원을 참조(링크) 할 때 사용 합니다.
[input]
사용자의 입력을 받은 form을 서버측에 전송하거나 서버측으로부터 새로운 데이터를 받아서 현재 페이지를 갱신할 때 사용 합니다.
[button]
자원을 참조하지도 않고 form 을 전송하지도 않으나 사용자의 클릭 또는 Enter 행위를 이용해서 화면의 인터페이스를 조작하고자 할 때 사용 합니다. a, input과 달리 닫기 태그가 존재하며 인라인 요소(텍스트, 이미지) 따위를 자식 요소로 포함할 수 있습니다.
[a], [input] 요소의 쓰임새에 대해서는 비교적 명확하게 이해하고 계시리라 생각 됩니다.
[button] 요소의 경우 좀 더 구체적으로 세 가지 쓰임을 가질 수 있는데 다음과 같습니다.
첫째,
[input type="submit"] 버튼과 같이 [button type="submit"]...[/button] 처럼 submit 속성값을 사용하면 form을 submit 하는 용도(기능)로 쓸 수 있습니다.
둘째,
form 을 submit 하지 않고 자바스크립트에 완전히 의존해서 화면의 인터페이스를 조작하는 역할 입니다. 이 때에는 [button type="button"]...[/button] 으로 선언 합니다.
셋째,
form 을 reset(초기화) 하는 기능 입니다. [button type="reset"]초기화[/button]
[button type="button"] 의 실 예로 다음과 같은 상황을 들 수 있습니다.
* 숨은 레이어(도움말 따위)를 펼치거나 접는 기능으로써 흔히 '토글' 버튼이라고 부르는 것.
* 레이어 또는 브라우저를 닫는 기능으로써 흔히 '닫기' 버튼이라고 부르는 것.
* '이전, 다음' 과 같이 브라우저 히스토리 기능을 자바스크립트로 구현하려는 경우.
언급하신 버튼들의 종류들에 대한 마크업.
* 취소 - button type="reset" 또는 button type="button" 으로 구현.
* 목록 - 목록 페이지 링크 이므로 a 요소로 구현. 만약 여러 유형의 목록(예를 들면 그냥 목록과 게시물 검색결과 목록 등)이 존재하고 상황에 따라 이동해야 할 목록 페이지가 달라진다면 이 URL은 서버측 스크립트로 처리.
* 수정 - 수정 페이지 링크 일때에는 a 요소로 구현. 현재 페이지에서 자바스크립트를 이용하여 숨은 서식을 드러내는 기능이라면 button type="button" 으로 구현.
* 삭제 - 서버측 스크립트에 따라서 다양한 방법으로 마크업 할 수 있으나 보통 URL 이동을 하기 때문에 a 요소로 처리함. URL 이동 없이 그냥 삭제가 된다면 상황에 따라 input 또는 button 모두 사용할 수 있음.
* 글쓰기 - 글쓰기 페이지로 이동하는 버튼이라면 a 요소로 구현. 글쓰기 페이지에서 작성된 글을 전송하는 버튼이라면 input type="submit" 으로 구현.
참고
CSS Text Button Design.
naradesign.net/wp/2008/10/31/203/
웹 접근성을 고려한 게시판 제작 기법
naradesign.net/wp/2008/11/14/257/
naradesign.net/open_content/reference/board/boardListBasic.html
naradesign.net/open_content/reference/board/boardReadBasic.html
naradesign.net/open_content/reference/board/boardWriteBasic.html
