11주차 - jsp (18) <button>
2022. 9. 13. 18:12ㆍjsp/html
이번의 목표
01. <button> 태그를 알아보자
02. <button> 태그에 <img> 태그를 사용해보자.
<button> 태그는 <input> 태그의 submit 과 같은 기능을 합니다. 즉, 데이터를 전송하는 기능을 합니다.
<button> 태그에는 <img> 태그를 이용할 수도 있습니다. button과 이미지의 크기를 맞추면 보다 깔끔한 디자인의 버튼을 만들 수 도 있습니다.
01. jsp 코드
02. 실행화면
01. jsp 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex19</title>
</head>
<body>
<form action="ex20.jsp">
<textarea rows="3" cols="10" placeholder="게시글 작성"></textarea>
<br>
<!-- <button>태그는 <input type="submit;"> 과 같은 기능을 한다 / 데이터를 전송하는 기능을 한다. -->
<button>
<img alt="불러올 수 없습니다." src="images/ok.png">
<!-- alt 속성은 이미지를 불러올 수 없을때 대체할 텍스트를 쓸 수 있다. -->
</button>
</form>
</body>
</html>02. 실행 화면
제가한 실행 화면에서는 <button> 과 <img>의 크기를 조절하지 않아서 이질감이 들게 되어있지만, 크기를 조절한다면 훨씬 보기 좋은 디자인이 될 것 같습니다.
'jsp > html' 카테고리의 다른 글
| <label>의 for 속성 (0) | 2022.09.22 |
|---|---|
| 11주차 - jsp (17) <div>와 <span> (0) | 2022.09.13 |
| 11주차 - jsp (16) <fieldset>, <textarea>, <select> (0) | 2022.09.13 |
| 10주차 - jsp(15) scriptlet(스크립트릿), request, response (0) | 2022.09.13 |
| 10주차 - jsp (14) <form> (0) | 2022.09.13 |