230918 (HTML, JSP기초)

공부일지

230918 (HTML, JSP기초)

CD가참둥그렇다 2023. 9. 18. 12:42

3장

테스트 2 : figure 태그 사용

삽화나 다이어그램, 사진 등과 같이 문서의 주요 흐름과 독립적인 콘텐츠를 정의할 때 사용.
설명이 필요한 이미지를 넣을 때 필요. 설명은 figcaption으로 넣는다.
code : 문서 내에서 코드를 표시하기(동작하는 것이 아니라 보여주는 소스코드를 삽입한다.)
alert : 팝업으로 띄워지는 정보창. system.out.과 유사한 사용
pre 태그 : 태그 내용물이 작성된 서식 그대로 출력됨. 띄어쓰기, 줄바꿈 등이 유지된다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>figure 태그 활용</title>
</head>
<body>
	<h3>figure 태그 활용</h3>
	<hr>
	<figure id="1-1">
		<figcaption>alert()함수</figcaption>
		<pre>
	<code>funtion f() {alert("경고합니다.");}</code>
		</pre>
		<hr>
		<small>실행결과</small>
		<pre>
	<img src="media/alert.png" alt="실행결과">	
	</pre>
	</figure>
</body>
</html>

테스트 3 : details 와 summary 태그

details : 접을 수 있는 설명 태그. 태그의 이름은 summary에 입력하고 내부에 작성한 문자는 제목을 클릭하여 펼칠 수 있다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>details 와 summary 태그</title>
</head>
<body>
	<h3>details 와 summary 태그</h3>
	Q &amp; A 리스트
	<hr>
	<details>
		<summary>Question 1</summary>
		<p>웹 개발자가 알아야 하는 언어 3 가지?</p>
	</details>
	<details>
		<summary>Answer 1</summary>
		<p>HTML5, CSS, JavaScript</p>
	</details>
</body>
</html>

테스트 4 : 인라인 시맨틱 태그

mark : 하이라이트 표시
time : 시간 전용 태그
meter : value가 채워질 양, max가 최대치로 로딩 바를 생성함.
progress : value가 채워질 양, max가 최대치로 로딩 바를 생성함. meter 보다 길다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>인라인 시맨틱 태그</title>
</head>
<body>
	<h3>인라인 시맨틱 태그 사례</h3>
	<hr>
	<p>
		내일<mark>HTML5 시험</mark><br> 
		시간은<time>09:00</time><br> 
		난이도<meter value="0.8" max="1.0">80%</meter><br> 
		자료 업로딩(20%)<progress value="2" max="10"></progress><br>
	</p>
</body>
</html>

테스트 5 : 로그인 폼

form : 사용자의 정보를 서버로 전송하기 위한 입력 태그. 내부에 작성하는 기능으로는 아래가 있다.
- action : 폼을 전송할 서버 쪽 스크립트 파일을 지정
- name : 폼을 식별하기 위한 이름 지정
- accept-charset : 폼 전송에 사용할 문자 인코딩 지정
- target : action에서 지정한 스크립트 파일을 열 창을 지정
- method : 폼을 서버에 전송할 http 메소드를 정함. get 또는 post. get은 폼 데이터를 끝에 url 끝에 붙여서 눈에 보이게 보냄, post는 숨겨서 보냄
input 태그 : 사용자가 다양하게 폼 태그에 입력할 공간을 만들어줌. 내부에 작성하는 속성은 다음과 같음
- type : 태그 모양 변경 가능. text, radio, checkbox, password 등
- name : 태그 이름을 지정
- readonly : 태그를 읽기전용으로
- maxlength
- required : 필수 태그 지정, 필수태그 없이 submit시 에러메세지 출력
- autofocus : 웹 페이지가 로딩될 때 해당 태그로 포커스가 이동함.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 폼</title>
</head>
<body>
	<h3>로그인 폼</h3>
	<hr>
	<form name="fo" method="get">
	사용자 ID : <input type="text" size="15" value=""><br>
	비밀번호 : <input type="password" size="15" value=""><br>
	<input type="submit" value="완료">
	</form>
</body>
</html>

테스트 6 : 텍스트 입력

textarea : text area로 내용 입력 태그. 크기 지정이 가능하고 사이에 작성하는 글자는 기본으로 작성되어 있는 문자가 된다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>텍스트 입력 폼</title>
</head>
<body>
	<h3>자기소개서 작성</h3>
	<hr>
	<form>
	이름 : <input type="text" size="15" value=""><br>
	암포 : <input type="password" size="15" value=""><br>
	자소서 : <textarea rows="5" cols="20">이곳에 자기소개서 작성</textarea>
	</form>
</body>
</html>

테스트 7 : 데이터 목록을 가진 텍스트 입력

input : 입력할 창을 만든다.
list : list에 담긴 id를 가지는 데이터 리스트를 가져와 선택 가능하게 한다.
datalist : option으로 구분되고, option 내부의 value에 입력한 내용이 리스트 형식으로 출력된다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>데이터 목록을 가진 텍스트 입력</title>
</head>
<body>
	<h3>가보고 싶은 곳</h3>
	<hr>
	<form>
	나라 : <input type="text" name="country" list="countries"><br>
		<datalist id="countries">
			<option value="가나">
			<option value="스위스">
			<option value="브라질">		
		</datalist>
	보고 싶은 것 : <input type="text" list="what"><br>
		<datalist id="what">
			<option value="산">
			<option value="바다">
			<option value="도시">
		</datalist>
	</form>
</body>
</html>

테스트 8 : 버튼이 잇는 입력 폼

버튼의 2가지 형태
- <input> 내부에 value를 부여해 버튼의 이름을 만들어 줌
- <button> 사이에 버튼의 이름을 만들어 줄 수 있음.
버튼의 타입
- button : 버튼 형태를 만든다. onClick 메소드를 활용하여 특정 액션을 취하는 기능을 넣을 수 있다.
- submit : form에서 입력 받은 데이터를 전송해준다.
- reset : form에서 입력 받은 데이터를 초기화한다.
버튼 내부에 이미지 입력
- input에 이미지를 넣으면 이미지 자체가 버튼이 된다.
- button에 이미지 태그를 넣으면 이미지가 버튼 내부에 들어가게 된다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>버튼이 있는 입력 폼</title>
</head>
<body>
	<h3>버튼을 만들자</h3>
	<hr>
	<form>
	검색 : <input type="text" size="10" value="">
		<input type="button" value="Q1">
		<button type="button">Q2</button><br>
	submit 버튼 : <input type="submit" value="전송1">
		<button type="submit">전송2</button><br>
	이미지 버튼 : <input type="image" src="media/button.png" alt="이미지 버튼">
		<button type="button"><img alt="이미지 버튼" src="media/button.png"></button>
	</form>
</body>
</html>

jsp 찍어 먹어보기

jsp 파일 생성
프로젝트에 빌드패스를 클릭한다.
library 탭에서 modulepath에 add external jars로 아파치-lib-servlet을 찾아서 등록한다.
jsp 파일에 <%= request.getParameter("") %> 태그를 추가한다.
form에 action 속성을 넣고, 만든 jsp파일을 넣는다.
정보를 전송하고 싶은 태그에 이름을 붙여준다.
jsp파일의 “” 내부에 정보를 받을 태그의 이름을 넣는다.

<form action="3-08-1.jsp">
검색 : <input type="text" size="10" value="" name="search">

예시 : 123을 입력 후 엔터를 입력한 경우