html 폼 만들기 4 - 이미지 버튼 만들기
네 안녕하세요, 이번 포스팅에서는 이미지 버튼을 만들어보도록 하겠습니다.
저번 포스팅에서는 기본 버튼들을 만들어 그 기능을 살펴보았습니다.
하지만 우리가 보는 버튼 중에는 이미지로 된 버튼들도 존재하고,
디자인적으로도 더 예쁘고,
시선을 사로잡기에도 좋아서 사업적 아이템이 되기도 하여 다방면에서 더 좋습니다.
그래서 이러한 이미지 버튼을 이번에 직접 만들어보는 시간을 가져보도록 하겠습니다.
그리고 버튼 태그에 대해서 잘 모르시는 분들이 계시다면,
제가 버튼 태그에 대한 포스트를 기재해 둘 테니,
한 번 들어가셔서 보고 다시 오시길 추천드립니다.
아래는 버튼 태그 포스팅 링크입니다.
2023.03.04 - [html, css, 자바스크립트] - html 폼 만들기 3 - button 태그로 기본 버튼 만들기
html 폼 만들기 3 - button 태그로 기본 버튼 만들기
html 폼 만들기 3 - button 태그로 기본 버튼 만들기 네 안녕하세요, 이번 포스팅에서는 버튼을 만드는 방법에 대하여 알아보겠습니다... 우리가 무언가를 검색을 하거나, 혹은 아이디와 비밀번호를
funnycoderl.tistory.com
1. 이미지 버튼 : img 태그 이용
이미지 버튼은 말 그대로 그냥 버튼에 이미지를 씌워놓은 겁니다.
그래서 크게 막 다른 것은 없고, img 태그만 추가적으로 들어갈 뿐입니다.
그러면 같이 한 번 이미지 버튼은 어떻게 생겼는지 같이 한 번 볼까요?
<input type"image" src="button.png" alt="이미지 버튼">
<button type="button"><img src="button.png" alt="이미지 버튼"></button>이런 식으로 img 태그에서 적용하는 속성들을 같이 써줍니다.
input 태그에도 우리가 이미지를 넣어서 버튼을 만들 거기 때문에 이미지를 삽입한다는 문구를 넣었고,
우리가 직접 누를 수 있는 button 태그에는 img 속성을 넣어서 이미지 버튼이 될 수 있도록 만들었습니다.
그리고 이미지 버튼 역시 button 태그에 있는 type 속성을 submit 또는 reset으로 지정을 하면
이 역시 허용 버튼, 리셋 버튼이 됩니다.
그럼 이제 이를 이용 헤서 이미지 버튼을 만드는 예제를 작성해 보도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>버튼이 있는 입력 폼</title>
</head>
<body>
<h3>버튼을 만들자!</h3>
<hr>
<form>
이미지 버튼 : <input type="image" src="3장media/button.png" alt="이미지 버튼">
<button type="button"><img src="3장media/button.png" alt="이미지 버튼"></button><br>
</form>
</body>
</html>이렇게 작성을 했습니다/
그럼 결과 화면을 같이 보실까요?
이런 식으로 버튼들이 만들어집니다.
여기까지 이미지 버튼을 만드는 방법에 대하여 알아보았습니다.
다음 포스팅에서는 선택형 입력 폼을 만드는 방법에 대하여 알아보도록 하겠습니다.
긴 글 읽어주신 독자분들께 진심으로 감사합니다~
'html, css, 자바스크립트 > html' 카테고리의 다른 글
| html 폼 만들기 6 - 라디오 버튼 만들기 (0) | 2023.03.04 |
|---|---|
| html 폼 만들기 5 - 체크박스 만들기 (0) | 2023.03.04 |
| html 폼 만들기 3 - button 태그로 기본 버튼 만들기 (0) | 2023.03.04 |
| html 폼 만들기 2 - datalist, option 태그로 데이터 목록을 가지고 있는 창 만들기 (0) | 2023.03.03 |
| html 폼 만들기 1 - input, textarea 태그로 기본 텍스트 입력창 만들기 (0) | 2023.03.03 |
댓글