HTML 기초 정리(17) - <button> 버튼 본문
HTML 기초 정리(17) - <button> 버튼
- 2024. 11. 30. 14:32
728x90
정의 및 사용법
태그 <button>는 클릭 가능한 버튼을 정의합니다.
요소 내부에 <button>텍스트(및 <i>, <b>, <strong>, <br>, <img>, 등의 태그)를 넣을 수 있습니다.
이는 요소로 만든 버튼에서는 불가능합니다 <input>
팁: 브라우저에 버튼의 유형을 알려주려면 항상 요소 type의 속성을 지정하세요.<button>
팁: CSS로 버튼을 쉽게 스타일링할 수 있습니다! 아래 예를 보거 CSS버튼 튜토리얼을 방문하세요.
속성
| 속성 | 값 | 설명 |
| autofocus | autofocus | 페이지가 로드될 때 버튼이 자동으로 포커스를 받도록 지정합니다. |
| disabled | disabled | 버튼을 비활성화해야 함을 지정합니다. |
| form | form_id (폼아이디) | 버튼이 어떤 형태에 속하는지 지정합니다. |
| formaction | URL(url주소) | 폼이 제출될 때 폼 데이터를 보낼 위치를 지정합니다. type="submit"에만 해당 |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain |
서버로 보내기 전에 폼 데이터를 어떻게 인코딩해야 하는지 지정합니다. type="submit"에만 해당 |
| formmethod | get post |
form-data를 보내는 방법(사용할 HTTP 메서드)을 지정합니다. type="submit"에만 해당 |
| formnovalidate | formnovalidate | 제출 시 form-data를 검증하지 않도록 지정합니다. type="submit"에만 해당 |
| formtarget | _blank _self _parent _top framename (프레임명) |
양식을 제출한 후 응답을 표시할 위치를 지정합니다. type="submit"에만 해당 |
| popovertarget | element_id (요소아이디) | 호출할 팝오버 요소를 지정합니다. |
| popovertargetaction | hide show toggle |
버튼을 클릭했을 때 팝오버 요소에 어떤 일이 일어나는지 지정합니다. |
| name | name (이름) | 버튼의 이름을 지정합니다 |
| type | button reset submit |
버튼의 종류를 지정합니다 |
| value | text (텍스트) | 버튼의 초기값을 지정합니다 |
예시
CSS를 사용하여 버튼 스타일을 지정하세요.
<!DOCTYPE html>
<html>
<head>
<style>
.button {
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {background-color: #04AA6D;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
</style>
</head>
<body>
<button class="button button1">Green</button>
<button class="button button2">Blue</button>
</body>
</html>
예시
CSS를 사용하여 버튼 스타일을 지정합니다(호버 효과 포함):
<!DOCTYPE html>
<html>
<head>
<style>
.button {
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: white;
color: black;
border: 2px solid #04AA6D;
}
.button1:hover {
background-color: #04AA6D;
color: white;
}
.button2 {
background-color: white;
color: black;
border: 2px solid #008CBA;
}
.button2:hover {
background-color: #008CBA;
color: white;
}
</style>
</head>
<body>
<button class="button button1">Green</button>
<button class="button button2">Blue</button>
</body>
</html>
반응형
'프로그램 > HTML' 카테고리의 다른 글
| HTML 기초 정리(19) - <caption> 테이블 캡션 (0) | 2024.12.03 |
|---|---|
| HTML 기초 정리(18) - <canvas> 캔버스 (0) | 2024.12.02 |
| HTML 기초 정리(16) - <br> 개행 (0) | 2024.11.27 |
| HTML 기초 정리(15) - <body> 본문 (0) | 2024.11.26 |
| HTML 기초 정리(14) - <blockquote> 인용 (0) | 2024.11.25 |
프로그램/HTML Related Articles
-
HTML 기초 정리(19) - <caption> 테이블 캡션
-
HTML 기초 정리(18) - <canvas> 캔버스
-
HTML 기초 정리(16) - <br> 개행
-
HTML 기초 정리(15) - <body> 본문
RECENT COMMENT