웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
<button>태그를 아시나요?
2004.10.13 17:30
아아..;;
처음으로 강좌를 올리네요.^^
혹시 <button>이라는 태그를 아시는지요...
[아실것 같지만...흐음..;;]
일단 중복확인은 되지 않았습니다.
<button>이란... <input type="button>이거랑 비슷한겁니다.
그러나 input 태그 방식은 단순히 글자 및 CSS만 적용 가능 하지요.
이런 단점을 보완한 태그가 바로 <button>태그 입니다.
<input type="button">과 사용법은... 동일하구요,
<button>과 </button>사이에 자신이 넣고 싶은 HTML 내용을 넣으시면 됩니다.
예를 들자면...
<button><img src="http://gnyang.w3ip.co.kr/images/index_01.jpg" border=0>나는 천재 그냥군~'ㅡ';;</button>
하시면은,
버튼 컨트롤에
http://gnyang.w3ip.co.kr/images/index_01.jpg 이미지와 나는 천재 그냥군~'ㅡ';;
이 찍혀 나옵니다.
M$IE의 검색 기능에서 알았던건가...;;
몇년전의 일이라서 출처는 기억을 못하겠습니다.[M$에서 발췌했다는 것은 압니다.]
하여간 정말 신기한 태그라고 생각됩니다.
IE에서만 될지도...;;
불여우 사용자님께는 죄송합니다.^^
처음으로 강좌를 올리네요.^^
혹시 <button>이라는 태그를 아시는지요...
[아실것 같지만...흐음..;;]
일단 중복확인은 되지 않았습니다.
<button>이란... <input type="button>이거랑 비슷한겁니다.
그러나 input 태그 방식은 단순히 글자 및 CSS만 적용 가능 하지요.
이런 단점을 보완한 태그가 바로 <button>태그 입니다.
<input type="button">과 사용법은... 동일하구요,
<button>과 </button>사이에 자신이 넣고 싶은 HTML 내용을 넣으시면 됩니다.
예를 들자면...
<button><img src="http://gnyang.w3ip.co.kr/images/index_01.jpg" border=0>나는 천재 그냥군~'ㅡ';;</button>
하시면은,
버튼 컨트롤에
http://gnyang.w3ip.co.kr/images/index_01.jpg 이미지와 나는 천재 그냥군~'ㅡ';;
이 찍혀 나옵니다.
M$IE의 검색 기능에서 알았던건가...;;
몇년전의 일이라서 출처는 기억을 못하겠습니다.[M$에서 발췌했다는 것은 압니다.]
하여간 정말 신기한 태그라고 생각됩니다.
IE에서만 될지도...;;
불여우 사용자님께는 죄송합니다.^^
댓글 6
-
그냥이렇게。
2004.10.13 17:31
-
그냥이렇게。
2004.10.13 17:34
덧붙여 또 말합니다...--;;
<button 여시고 type="submit" 하시면
<input type="submit">과 같아진답니다.^^
리셋도 마찬가지로
<button type="reset">
하시면 되겠지요.^^ -
TheMics
2004.10.14 18:05
XHTML 엘리먼트이니 호환성 문제는 신경쓰지 않으셔도 됩니다.
IE 4, NN 6.2(던가;) 이후 모든 브라우저에서 다 지원됩니다 :) -
새천년건강체조
2004.10.15 21:54
<button> 버튼 =_=;; 대략 bottom 아래라고 생각하고 글을 읽었던;;; -
ps.구루
2004.10.30 09:12
<BUTTON>
BUTTON 요소는 보내기, 다시 작성, 누름 단추를 만들 때 사용합니다. 버튼을 규정하기 위해 INPUT 요소를 사용할 수도 있습니다. BUTTON 요소는 이미지와 강조를 포함한 다양한 라벨을 지원하지만 HTML 4.0에서 추가된 것으로 아직 웹 브라우저에서 널리 지원되지 않습니다.
구문: <BUTTON>...</BUTTON>
닫는 태그: 필요
속성
볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.
속성 값 내용
accesskey Character 키 입력으로 요소를 활성화시킬 문자를 지정합니다.
class ClassName CSS의 class 선택자를 지정합니다.
disabled [none] 버튼을 누른 수 없게 합니다.
id ElementID CSS의 ID 선택자를 지정합니다.
lang LanguageCode 내용에서 사용할 언어를 지정합니다.
name CDATA 요소의 이름을 지정합니다.
style StyleDesc CSS 스타일을 지정합니다.
tabindex Number 탭 순서를 지정합니다. 0과 32767사이의 하나의 숫자를 사용하며 양수로 표시된 값이 낮은 숫자일수록 우선 순위가 되며, 값이 같을 때는 HTML 문서에서 먼저 나온 것이 우선 순위가 됩니다. 값이 '0'이거나 없는 경우는 가장 마지막 순서가 됩니다.
title Text 웹 브라우저에서 툴팁으로 표시할 내용을 지정합니다.
type submit
reset
button 버튼의 종류를 지정합니다. submit는 보내기 단추를 만들며 기본값입니다. reset은 입력한 값을 모두 초기값으로 재설정하는 단추를 만들며 button은 일반 단추를 만듭니다.
value CDATA 요소의 값을 지정합니다.
예제
예제 1
<BUTTON name="submit" value="modify">정보 수정</BUTTON>
<BUTTON name="submit" value="continue">작성 계속</BUTTON>
정보 수정작성 계속
예제 2
<BUTTON type="button" onclick="myscript()">
<IMG src="images/mybutton.gif" />
</BUTTON>
이미지를 버튼 라벨로 사용한 예제입니다.
지원 브라우저/HTML 버전
이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.
IE 4, NN 6.2, HTML 4
참고
BUTTON 요소와 사용할 수 있는 이벤트로는 onfocus와 onblur가 있습니다. -
canelia
2004.11.01 13:02
button 객체와 사용할 수 있는 이벤트 핸들러들..
onclick / onmouseover / onmousedown / onmouseup 등..
여러개 테스트해봤는데 다 먹히는군요...
제목 | 글쓴이 | 날짜 |
---|---|---|
XHTML 1.0 Strict에서 더 이상 사용할 수 없는 태그 / 속성 [16] | EDENe | 2005.01.22 |
[기초]홈페이지의 프레임 나누기 입니다. [5] | piasol | 2004.12.10 |
드래그 금지 및 오른쪽 버튼 금지 소스 [6] | 편입성공기 | 2004.12.06 |
브라우저 주소창에 긴 경로 안 나타나게 하기 [7] | 편입성공기 | 2004.12.06 |
새창에 폼태그로 전송하기 | 편입성공기 | 2004.12.06 |
도메인 포워딩 즉 페이지 자동이동하기 [6] | 편입성공기 | 2004.12.06 |
페이지 회색스크롤바로 바꾸기 | 편입성공기 | 2004.12.06 |
톡톡 튀는 홈페이지 테이블 제작하기 ^^ [6] | piasol | 2004.12.03 |
최근게시물의 폰트크기와 링크색상 바꾸는 방법 | LUFFY | 2004.11.20 |
웹폰트사용에 대한 실체를 밝힌다!! [22] | Multi_Taeji | 2004.11.13 |
a링크를 이용 새창 띄우기 [10] | 토토루 | 2004.11.07 |
웹문서 검색을 대비한 헤더,푸터 나누기. [4] | 그럴까? | 2004.10.29 |
각 객체접근.. [2] | canelia | 2004.10.29 |
W3C 표준 권고안. 앞으로 꼭 지켜주세요.. [14] | canelia | 2004.10.29 |
스타일시트에서 링크포커스 없애기 [12] | keymove | 2004.10.26 |
타이틀 바에 움직이는 타이틀 넣기. [5] | 덜렁이 | 2004.10.16 |
<button>태그를 아시나요? [6] | 그냥이렇게。 | 2004.10.13 |
TabIndex를 이용하여 탭키 컨트롤하기 [5] | 손상모 | 2004.10.08 |
테이블 주위에 점선효과!!!~~(초간단팁!) [6] | 초라 | 2004.09.25 |
경고창 없이 부모창 닫고 아기창에서 마우스 오른버튼 클릭시 아기창도 닫는다. [4] | 詩와언어™ | 2004.08.27 |
input태그 처럼 onclick같은 이벤트 속성도 먹힌답니다.^^