(66)[Web]2일차: ((HTML)) F_WebApp01>Test005~023

1. 2023.11.28(화)

F_WebApp01

ㄴ C:\WebStudy\WebApp01\WebContent

웹컨텐트라는 공간안에 web-inf는 클라이언트는 접근할 수 없게 이루어져 있다. 
나중에 그것을 이용해서 뭔가를 할 것. 
이 공간은 서버쪽에서는 접근이 가능하지만 클라이언트는 접근이 불가함. 
자바에서 private와 유사


--> 문서를 web-inf에 만들면 페이지에서 404에러가 나온다. 
ㄴ 400번대는 클라이언트 에러 500번대 는 서버쪽 에러

ㄴㄴTest004.html_데이터 입력 관련 태그

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test004.html</title>
</head>
<body>

<div>
	<h1>데이터 입력 관련 태그</h1>
	<hr>
</div>

<div>
	<!-- 입력할 내용이 폼태그에 들어야 있어야 나중에 속성으로 어떤
	check --> 
	<form>

	이름 <input type = "text"><br>
	<!-- 타입을 무엇으로 지정하냐에 따라서 달라짐 지금은 text를 넣어서 텍스트박스가 나옴 -->
	국어 <input type = "text"><br>
	영어 <input type = "text"><br> 
	수학 <input type = "text"><br> 
	<br>
	
	<input type = "button" value = "결과">
	<input type = "reset" value = "취소">
	<!-- 타입을 텍스트가 아닌 버튼으로 눌러서 버튼이 나온다. 리셋은 별도로 스크립트 처리를 하지 않더라도
	취소 버튼을 누르면 form안에 있는 내용을 지울 수 있다. 처음 요청받은 상태로 되돌리는 기능 -->
	<br>
	
	총점 <input type = "text"> 평균 <input type = "text"><br>
	
	</form>
	
</div>
</body>
</html>

ㄴㄴTest005.html_데이터 입력 관련 태그

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test005.html</title>
<style type="text/css">
/* 스타일이라는 태그를 직접 쓰게되면 그 사이의 공간은 css의 영역 */
	*
	{
		font-size : 20pt;
		font-weight : bold;
		font-family : 맑은 고딕;
		color : #334433;
	}

</style>
</head>
<body>

<div>
	<h1>데이터 입력 관련 태그</h1>
	<hr>
</div>

<div>
	<form>

	이름 <input type="text"><br>
	국어 <input type="text"><br>
	영어 <input type="text"><br> 
	수학 <input type="text"><br> 
	<br>
	
	<input type="button" value="결과">
	<input type="reset" value="취소">
	<br>
	
	총점 <input type="text"> 평균 <input type="text"><br>
	
	</form>
	
</div>
</body>
</html>

ㄴㄴTest006.html_데이터 입력 관련 태그(자바스크립트포함)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test005.html</title>
<style type="text/css">
	*
	{
		font-size : 20pt;
		font-weight : bold;
		font-family : 맑은 고딕;
		color : #334433;
	}

</style>

<!-- 자바스크립트의 공간 -->
<script type = "text/javascript">
	function actionPerformed()
	{
		//alert("함수 호출 확인~!!!");
		/* 경고창 통해 함수호출확인이라고 뜨게 하겠다.
		자바스크립트에서의 주석은 자바와 같다고 생각해도 됨.*/
		// 주석
		var vKor = document.getElementById("kor").value;
		/* id가 kor인 엘리먼트를 붙잡아온다. html에서 쓴다고 해서 스크립트에서 볼 수 있는것이 아님.
		이곳은 스크립트의 공간. 여기서는 html에서 쓴 것을 하나하나 가져와야함 
		document 는 문서객체 
		즉 문서객체에서 요소에 들어있는 값을 id로 가져온다 = getElementById*/
		var vEng = document.getElementById("eng").value;
		var vMat = document.getElementById("mat").value;
		// 변수 가져오기(기본적으로 문자형)
		
		var vTot = 0;
		var vAvg = 0;
		// 변수 선언
		
		vTot = parseInt(vKor) + parseInt(vEng) + parseInt(vMat);
		// 정수형태로 변환 후 합 구하기
		vAvg = Math.round(vTot/3);
		
		document.getElementById("tot").value = vTot;
		document.getElementById("avg").value = vAvg;
		// 결과값을 tot이라는 id를 쓰는 컨트롤의 벨류값으로 넣어줌
	}
</script>


</head>
<body>

<div>
	<h1>데이터 입력 관련 태그</h1>
	<hr>
</div>

<div>
	<form>

	이름 <input type="text" id="name"><br>
	<!-- 타입을 무엇으로 지정하냐에 따라서 달라짐 지금은 text를 넣어서 텍스트박스가 나옴 -->
	국어 <input type="text" id="kor"><br>
	영어 <input type="text" id="eng"><br> 
	수학 <input type="text" id="mat"><br> 
	<br>
	
	<!-- 결과 버튼에 클릭 이벤트가 발생했을 때 actionPerformed() 자바스크립트 함수 호출 
	== 클릭이벤트가 on 되었을 때. 보통 이벤트 핸들러라고 부른다. onclick 자체는 이벤트가 아니고 click이란
	이벤트 앞에 on이 붙은 것-->
	<input type="button" value="결과" onclick="actionPerformed()">
	<input type="reset" value="취소">
	<br>
	
	총점 <input type="text" id="tot"> 평균 <input type="text" id="avg"><br>
	
	</form>
	<!-- 자바처럼 컴파일되고 실행되는 형태가 아니라 중간에 띄어쓰기 없애는 것이 좋다 
	리소스 관리 차원-->
	
</div>
</body>
</html>

ㄴㄴTest007.html_수평선 넣기 / 공백 넣기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test007.html</title>
</head>
<body>

<div>
	<h1>수평선 넣기 / 공백 넣기</h1>
	<hr>
</div>

<div>
	수평선을 사용해보자
	<hr size="20" color="red">
	<br><br>
	<!-- css가 아닌 방식으로 꾸미는 것은 바람직하지 않다.
	size는 수평선의 두께를 의미함 -->
	
	음영선이 없는 수평선
	<hr size="2" noshade="noshade">
	<br><br>
	
	수평선의 수평 길이 설정
	<hr size="5" width="400">
	<hr size="5" width="200">
	<br><br>
	
	수평선의 정렬
	<hr size="5" width="50%" align="left">
	<hr size="7" width="50%" align="right">
	<hr size="9" width="50%" align="center">
	<hr size="9" width="50%">
	<!-- width 값에 %로 지정하면 브라우저의 길이에 따라서 달라짐
	align지정안하면 디폴트값은 center -->
</div>


<div>
	공백 발생<br>
	공백                          공백<br>
	<!-- 이 사이 공백은 의미 없음 -->
	공백 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 공백<br>
	<!-- &nbsp; 이게 공백 하나이며 여러개를 만들고 싶으면 여러개를 이어야 함 -->
</div>

<!-- 쓰지말것 check-->
<div>
	<font size="1">F강의장 식구들 화이팅</font><br>
	<font size="2">F강의장 식구들 화이팅</font><br>
	<font size="3">F강의장 식구들 화이팅</font><br>
	<font size="4">F강의장 식구들 화이팅</font><br>
	<font size="5">F강의장 식구들 화이팅</font><br>
	<font size="6">F강의장 식구들 화이팅</font><br>
	<font size="7">F강의장 식구들 화이팅</font><br>
	
	<font size="8">F강의장 식구들 화이팅</font><br>
	<font size="9">F강의장 식구들 화이팅</font><br>
	<font size="10">F강의장 식구들 화이팅</font><br>
	<!-- 글꼴, 크기 지정하는 엘리먼트 
	size는 1부터 7까지이며 8쓴다고 에러는 나지 않지만 더 커지지 않는다.-->
	
	<font size="4" color="green">F강의장 식구들 화이팅</font><br>
	<font size="4" color="#00ff00">F강의장 식구들 화이팅</font><br>
	<font size="4" color="red" face="궁서체">F강의장 식구들 화이팅</font><br>
</div>



</body>
</html>

ㄴㄴTest008.html_기타 글꼴 꾸미기 태그

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test008.html</title>
</head>
<body>

<div>
	<h1>기타 글꼴 꾸미기 태그</h1>
	<hr>
</div>

<!-- 쓰지말아라 -->
<div>
	기본 텍스트<br><br>
	
	<b>글자를 굵게(진하게) 설정하기</b><br><br>
	
	<i>이텔릭체(기울여)로 설정하기</i><br><br>
	
	<u>밑줄 긋기</u><br><br>
	
	<tt>타이프체로 설정하기</tt><br><br>
	
	<small>현재 글자 크기보다 한 단계 줄이기</small><br><br>
	
	<big>현재 글자 크기보다 한 단계 키우기</big><br><br>
	
	<strong>글자 강조하기</strong><br><br>
	
	<s>취소선 넣기</s><br><br>
	
	<em>강조하기, 글자 비스듬히 출력</em><br><br>
	
	아래 첨자 테스트하기<sub>아래첨자</sub><br><br>
	
	위 첨자 테스트하기<sup>위첨자</sup><br><br>
</div>

</body>
</html>

ㄴㄴTest009.html_pre 태그 / xmp 태그

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test009.html</title>
</head>
<body>

<div>
	<h1>pre 태그 / xmp 태그</h1>
	<hr>
</div>

	나 보기가 						역겨워 가실 때에는
	
	말 없이 고이 보내드리오다.
	
	<br><br>
	
	<pre>
	
	<font color="blue">나 보기가 						역겨워 가실 때에는</font>
	
	말 없이 고이 보내드리오다.
	
	</pre>
	<!-- pre안에 들어있는 내용은 띄어쓰기 개행 다 적용됨 -->
	
	<xmp>
	<font color="blue">나 보기가 						역겨워 가실 때에는</font>
	
	말 없이 고이 보내드리오다.
	</xmp>
	<!-- xmp 태그는 문서상 띄어쓰기, 개행에 더해서 태그 자체도 다 보여줌 -->
	
	<br><br>
	
</body>
</html>

ㄴㄴTest010.html_이미지 다루기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test010.html</title>
</head>
<body>

<div>
	<h1>이미지 다루기</h1>
	<hr>
</div>

<div>
	<h2>이미지 크기 및 정렬을 확인해 보도록 하자</h2>
	<img src="images/img_02.gif">
	<img src="images/img_02.gif" width="100">
	<img src="images/img_02.gif" height="50">
	<!-- 넓이나 높이속성만 지정했는데 종횡비가 깨지지 않는 상태에서 크기가 변경됨 -->
	<br>
	
	<img src="images/img_02.gif" width="200" height="100">
	<!-- 비율깨진모습 -->
	<br><br>
	
	<img alt="" src="images/img_02.gif" width="100" border="10"
	vspace="200" hspace="100" align="top">위 아래 정렬 실습
	<!-- border는 액자 같은 것 만들어줌 vspace가 상하 공백 hspace가 좌우 공백 align은 어디부터 정렬할건지-->
	
	
</div>

</body>
</html>

ㄴㄴTest011.html_하이퍼링크 실습

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	
<div>
	<h1>하이퍼링크 실습</h1>
	<hr>
</div>
	<!-- 절대경로와 상대경로의 개념
	루트부터 시작하는 경로가 절대경로(하드디스크부터)
	상대경로는 내가 현재 있는 위치에 따라 다른 것 -->

<div>
	<a href="http://localhost:3306/WebApp01/Test011_1.html">절대경로 지정 방식</a>
	<!-- <a href="http://www.text.com/Test011_1.html">웹 상의 주소 지정 방식</a>
	<a href="http://www.text.com">웹 상의 주소 지정 방식</a> 
	우리는 등록하지 않았으므로 맨 위처럼 해야 함-->
	<br><br>
	
	<a href="./Test011_1.html">상대경로 지정 방식1</a>
	<!-- 현재위치 기준으로 경로 지정 -->
	<br><br>
	
	<a href="Test011_1.html">상대경로 지정 방식2</a>
	<!-- 이렇게도 가능 -->
	<br><br>
	
	<!-- check -->
    <!-- C:\WebStudy\WebApp01\WebContent\Test011_1.html
		가짜 경로
	C:\WebStudy\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\WebApp01\Test011_1.html 
	이것이 진짜 경로라고 생각하면 된다.-->
	
	<a id="top">책갈피 위치</a>
	
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<!-- 개행을 많이 해서 거리를 만들자 -->
	
	<a href="#top">책갈피 위치로 이동하기</a>
	
</div>
</body>
</html>

ㄴㄴTest011_1.html_하이퍼링크 실습

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test011_1.html</title>
</head>
<body>

<div>
	<h1>하이퍼링크 이동 실습</h1>
	<hr>
</div>

<div>
	<h2>링크 이동 페이지~!!!</h2>
</div>

</body>
</html>

ㄴㄴTest012.html_테이블(표) 만들기 - 테이블에 속성 적용하기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test012.html</title>
</head>
<body>

<div>
	<h1>테이블(표) 만들기 - 테이블에 속성 적용하기</h1>
	<h2>테이블에 속성 적용하기</h2>
	<hr>
</div>

<div>
	<!-- CSS를 통해 관리해야 할 속성들 -->
	<table border="10" background="images/img_03.jpg" cellpadding="20" cellspacing="30">
		<tr>
			<th>한식</th>
			<th>중식</th>
		</tr>
		<tr>
			<td>김치찌게</td>
			<td>짜장면</td>
		</tr>
		<tr>
			<td>된장찌게</td>
			<td>짬뽕</td>
		</tr>
		<tr>
			<td>순두부찌게</td>
			<td>사천탕수육</td>
		</tr>
	</table>
</div>
	<!-- 테이블 태그를 만들면 아주 작은 빈 네모가 있는 것과 똑같고
	border는 테이블 테두리의 굵기를 말함 border를 설정하지 않으면 네모가 만들어지지만
	굵기가 없기 때문에 보이지 않는다. 이 또한 나중에 CSS로 제어함
	
	tr은 세로 구분하는 박스 td는 가로 박스 tr은 시각적으로 들어오지 않는다.
	th안에 있는건 중앙정렬 된 채로 나오고 글자도 조금 더 진하게 나온다. -->

</body>
</html>

ㄴㄴTest013.html_테이블 열/행 병합 실습

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test013.html</title>
</head>
<body>

<div>
	<h1>테이블 열/행 병합 실습</h1>
	<hr>
</div>
	<!-- 입력하면서 어떻게 변화하는지 확인 -->
<div>
	<table border = "1">
		<tr>
			<td colspan="2">강남구</td>
			<td colspan="2">노원구</td>
			<!-- 컬럼 두개를 차지하도록 colspan활용 -->
		</tr>
		<tr>
			<td>역삼동</td>
			<td>논현동</td>
			<td>상계동</td>
			<td>중계동</td>
		</tr>
	</table>
	<br><br>
	
	<!-- th 셀의 활용 -->
	<table border = "1">
		<tr>
			<th colspan="2">강남구</td>
			<th colspan="2">노원구</td>
			<!-- 컬럼 두개를 차지하도록 colspan활용 -->
		</tr>
		<tr>
			<td>역삼동</td>
			<td>논현동</td>
			<td>상계동</td>
			<td>중계동</td>
		</tr>
	</table>	
	
	<br><br>
	
	<!-- 강남구에 청담동 추가 -->
	<!-- 노원구에 하계동 추가 -->
	<table border = "1">
		<tr>
			<th colspan="3">강남구</td>
			<th colspan="3">노원구</td>
			<!-- 컬럼 두개를 차지하도록 colspan활용 -->
		</tr>
		<tr>
			<td>역삼동</td>
			<td>논현동</td>
			<td>청담동</td>
			<td>상계동</td>
			<td>중계동</td>
			<td>하계동</td>
		</tr>
	</table>
	
	<!-- 병합과 관련된 팁
	일단 병합 생각하지말고 다 채워넣고 위아래 결합은 rowspan 좌우결합은 colspan 활용해서 완성시키기 -->
	
	<!-- 강남구 -> 역삼동 논현동
	노원구 -> 상계동 중계동 하계동 월계동 -->
	<br><br>
	
	<table border = "1">
		<tr>
			<th>강남구</td>
			<th>강남구</td>
			<th>노원구</td>
			<th>노원구</td>
			<th>노원구</td>
			<th>노원구</td>
		</tr>
		<tr>
			<td>역삼동</td>
			<td>논현동</td>
			<td>상계동</td>
			<td>중계동</td>
			<td>하계동</td>
			<td>월계동</td>
		</tr>
	</table>
	
	<br><br>
	
	<table border = "1">
		<tr>
			<th colspan="2">강남구</td>
			<th colspan="4">노원구</td>
		</tr>
		<tr>
			<td>역삼동</td>
			<td>논현동</td>
			<td>상계동</td>
			<td>중계동</td>
			<td>하계동</td>
			<td>월계동</td>
		</tr>
	</table>
	
	<br><br>
	
	<!-- 
	    강남구				노원구
	역삼동 논현동 상계동 중계동 하계동 월계동
					↓
	노원구	상계동
			중계동
	강남구	역삼동
			논현동	
	 -->
	
	<table border = "1">
		<tr>
			<th rowspan="4">노원구</td>
			<td>상계동</td>
		</tr>
		<tr>
			<td>중계동</td>
		</tr>
		<tr>
			<td>하계동</td>
		</tr>
		<tr>
			<td>월계동</td>
		</tr>
		<tr>
			<th rowspan="2">강남구</td>
			<td>역삼동</td>
		</tr>
		<tr>
			<td>논현동</td>
		</tr>
	</table>
	
	<!-- 
	노원구	상계동
			중계동
	강남구	역삼동
			논현동
			청담동
	은평구	불광동
			녹번동
			역촌동
			신사동
	 -->
	 
	 <table border = "1">
		<tr>
			<th rowspan="2">노원구</td>
			<td>상계동</td>
		</tr>
		<tr>
			<td>중계동</td>
		<tr>
			<th rowspan="3">강남구</td>
			<td>역삼동</td>
		</tr>
		<tr>
			<td>논현동</td>
		</tr>
		<tr>
			<td>청담동</td>
		</tr>
		<tr>
			<th rowspan="4">은평구</td>
			<td>불광동</td>
		</tr>
		<tr>
			<td>녹번동</td>
		</tr>
		<tr>
			<td>역촌동</td>
		</tr>
		<tr>
			<td>신사동</td>
		</tr>
	</table>
	
	
</div>


</body>
</html>

ㄴㄴTest014.html_테이블 열/행 병합 실습2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test014.html</title>
</head>
<body>
<div>
	<h1>테이블 셀 병합 실습2</h1>
	<hr>
</div>

<div>
	<table border="1" style="width:200px">
		<tr>
			<td rowspan="6" style="vertical-align:top">a</td>
			<td colspan="2">b</td>
			<td colspan="2">c</td>
		</tr>
		<tr>
			<td rowspan="3">d</td>
			<td>e</td>
			<td rowspan="2">f</td>
			<td>g</td>
		</tr>
		<tr>
			<td>h</td>
			<td>i</td>
		<tr>
			<td>j</td>
			<td>k</td>
			<td>l</td>
		</tr>
		</tr>
			<td colspan="4">m</td>
		</tr>
		<tr>
			<td colspan="2">n</td>
			<td>o</td>
			<td>p</td>
		</tr>	
	</table>
</div>	
	
</body>
</html>

ㄴㄴTest015.html_움직이는 태그 실습

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test015</title>
</head>
<body>
<div>
	<h1>움직이는 태그 실습</h1>
	<hr>
</div>

<!-- 그냥 알고만 있자~ -->
<div>
	<marquee>기본적인 방향 왼쪽으로 이동</marquee>
	<marquee behavior="alternate">좌우 왕복 이동</marquee>
	<marquee direction="right">오른쪽으로 이동</marquee>
	<marquee direction="up">위쪽으로 이동</marquee>
</div>

<div>
	<h2>속도 조절: scrollamount</h2>
	<p>**숫자의 차이에 민감.숫자가 클수록 속도가 빨라짐**</p>
	<marquee behavior="alternate" scrollamount="1">
		<img alt="" src="images/img_04.gif">
	</marquee>
	<marquee behavior="alternate" scrollamount="100">
		<img alt="" src="images/img_04.gif">
	</marquee>
	<marquee behavior="alternate" scrollamount="50" background="pink">
		<img alt="" src="images/img_04.gif">
	</marquee>
</div>

<div>
	<h2>속도 조절: scrolldelay</h2>
	<p>**지연시킴. 숫자가 달라져도 큰 차이가 없음**</p>
	<marquee behavior="alternate" scrolldelay="1">
		<img alt="" src="images/img_04.gif">
	</marquee>
	<marquee behavior="alternate" scrolldelay="100">
		<img alt="" src="images/img_04.gif">
	</marquee>
	<marquee behavior="alternate" scrolldelay="50" background="pink">
		<img alt="" src="images/img_04.gif">
	</marquee>
</div>

<div>
	<h2>위아래로 움직이며 옆으로 이동</h2>
	<p>**marguee 태그 중첩 가능**</p>
	<marquee>
		<marquee direction="down" behavior="alternate" height="100">
			우리 모두 기운냅시다~!!
		</marquee>
	</marquee>
</div>
</body>
</html>

ㄴㄴTest016.html_메타 태그 실습

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test016.html</title>

<meta name="keywords" content="html,연습,웹">
<meta name="description" content="html 연습 페이지입니다.">
<meta name="author" content="ohsukyoung">
<meta name="generator" content="eclipse">

<!-- **텍스트 기반의 환경에서 이 문서를 관리하기 위해** -->
<!-- 자바DOC 자바 문서화 주석이 존재 -->

<meta http-equiv="refresh" content="5; url=http://www.naver.com"> <!-- 5초 후 페이지 이동 -->

</head>
<body>

<div>
	<h1>메타 태그 실습</h1>
	<p>메타 데이터: 데이터를 위한 데이터</p>
	<hr>
</div>

하나~ 두울~ 세엣~ 네엣~ 짠!!!

</body>
</html>

ㄴㄴTest017.html_한 줄 데이터 입력 상자 / 암호 입력 상자

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test017.html</title>
</head>
<body>

<div>
	<h1>한 줄 데이터 입력 상자 / 암호 입력 상자</h1>
	<hr>	
</div>

<div>
	<form>
		회원아이디
		<input type="text" name="name" size="20"
		maxlength="10" placeholder="아이디"><br>
		<!-- **maxlength: 글자수 제한** -->
		<!-- **placeholder: 사용자에게 입력예시 알려주는 형태로 많이 사용** -->
		패스워드
		<input type="password" name="name" size="10"
		maxlength="8" placehoder="패스워드"><br>
	</form>
</div>

<!-- maxlength 활용 -->
<div>
	<form>
		휴대폰 번호
		<input type="text" name="phone1" size="5" maxlength="3"> -
		<input type="text" name="phone1" size="6" maxlength="4"> -
		<input type="text" name="phone1" size="6" maxlength="4">
	</form>
</div>


</body>
</html>

ㄴㄴTest018.html_여러 줄 데이터 입력 글상자

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test018.html</title>
</head>
<body>
	<div>
		<h1>여러 줄 데이터 입력 글상자</h1>
		<hr>
	</div>
	
<!-- 
	많은 내용을 기재할 수 있는 엘리먼트로
	태그 사이의 공백 문자 인식
	엔터키 입력을 통한 개행 처리
 -->
	
<div>
	<form>
		<textarea rows="10" cols="50">많은 내용을 기재</textarea>
		<!-- **
		textarea: pc 데이터 영역(textarea태그 사이-여는 태그 닫는 태그)에서 값을 처리함(value 가 아님!)
		ㄴ rows: 행 / cols: 너비
		※ 주의사항1) pc 데이터 영역에서는 띄어쓰기 공백들이 모두 인식되기 때문에 조심할것!
		※ 주의사항2) 개행은 br로 처리X -> 개행 (\n) 처리O
		** -->
		
		<!-- **
		textarea 주의사항1) 테스트
		 -> 마지막 글자와 </textarea> 붙여야함
		 ㄴ 이유: 공백인식되므로!
		 ** -->
		<textarea rows="10" cols="50">많은 내용을 기재할 수 있는 엘리먼트
태그와 태그 사이의 공백 문자 인식한다.
엔터키 입력을 통한 개행 처리 -> 이렇게 사용O</textarea>

		<textarea rows="10" cols="50">많은 내용을 기재할 수 있는 엘리먼트
태그와 태그 사이의 공백 문자 인식한다.
엔터키 입력을 통한 개행 처리 -> 이렇게 사용X
		</textarea>

		<br>
		<!-- **textarea 주의사항2) 테스트** -->
		하나 
		두울 
		셋 -> 하나(\n)두울(\n)셋 으로 처리할 것!!

	</form>
</div>
	
	
<div>
	<form>
		<input type="text" value="입력 내용 처리">
		<!-- **input: value속성의 속성값으로 값을 처리함** -->
	</form>
</div>
</body>
</html>

ㄴㄴTest019.html_여러 줄 데이터 입력 글상자

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test019.html</title>
</head>
<body>
<div>
	<h1>여러 줄 데이터 입력 글상자</h1>
	<hr>
</div>
	
<div>
	<form>
		<!-- ** 
		체크박스
		※ 주의사항1)
		아래의 내용은 위의 질문에 대해 묶여서 처리되어야하므로 
		name을 같게하여 묶음처리
		※ 주의사항2)
		체크박스를 선택했을 때 값을 가져오기 위해서는 value를 넣어줘야 함
		※ 당부사항) 
		ㄴ친절한 코드: <label>로 묶어서 텍스트 선택시 같이 선택되는 것
		ㄴ불친절한 코드: 체크박스로만 선택되는 것
		ㄴ멀리 떨어졌을 때 같이 선택되게 하는 예제: 미역국(input의 id 와 label의 for를 같은 값으로)
		** -->
		<p>1. 오늘 점심으로 먹은 메뉴는?</p>
		<input type="checkbox" name="foodCheck1" value="code1"> 밥(텍스트로 선택X)<br>
		
		<label>
			<input type="checkbox" name="foodCheck1" value="code1"> 밥(텍스트로 선택O)
		</label><br><br>
		
		<input type="checkbox" name="foodCheck1" value="code2" id="label2"> 미역국
		<input type="checkbox" name="foodCheck1"> 김치찌개
		<input type="checkbox" name="foodCheck1"> 달걀말이
		<br><br>
		
		<input type="checkbox" name="foodCheck1"> 장조림
		<input type="checkbox" name="foodCheck1"> 김
		<input type="checkbox" name="foodCheck1"> 김치
		<input type="checkbox" name="foodCheck1"> 멸치볶음
		<br><br><br>
		
		<p>2. 오늘 저녁으로 먹을 메뉴는?</p>
		
		<input type="checkbox"> 밥
		<label for="label2">
			<input type="checkbox"> 미역국(점심 미역국과 연결됨)
		</label>
		<input type="checkbox"> 김치찌개
		<input type="checkbox"> 달걀말이
		<br><br>
		
		<input type="checkbox"> 장조림
		<input type="checkbox"> 김
		<input type="checkbox"> 김치
		<input type="checkbox"> 멸치볶음
		<br><br>
	</form>
</div>	
</body>
</html>

ㄴㄴTest020.html_여러 줄 데이터 입력 글상자

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test020.html</title>
</head>
<body>
<div>
	<h1>여러 줄 데이터 입력 글상자</h1>
	<hr>
</div>

<div>
	<form>
		<!-- **
		라디오버튼
		※ 주의사항1) 여자 or 남자 가 맞고, 여자 and 남자 는 있을 수 없으므로 
		name으로 묶어줌으로써 둘중하나 선택으로 처리됨(ex. gender, subject)
		※ 주의사항2) 값을 받기 위해서는 value를 부여해야함(ex. kor,eng,mat...)
		- 텍스트 선택하기 위해 <label>의 for 속성과 <input>의 id를 맞춰줘야함
		- checked="checked"를 부여해 가급적 이 속성을 선택하도록 유도할 수 있음 
		** -->
		<p>1. 당신의 성별은?</p>
		
		<input type="radio" name="gender" checked="checked"> 여자
		<input type="radio" name="gender" id="m"> 
		<label for="m"> 남자</label>
		
		<br><br>
		
		<p>2. 당신이 좋아하는 과목은?</p>
		
		<input type="radio" name="subject" value="kor"> 국어
		<input type="radio" name="subject" value="eng"> 영어
		<input type="radio" name="subject" value="mat" checked="cheched"> 수학
		<input type="radio" name="subject" value="soc"> 사회
		<input type="radio" name="subject" value="sci"> 과학
		
		<br><br>
		
	</form>
</div>

</body>
</html>

ㄴㄴTest021.html_전송, 취소 버튼 만들기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test021.html</title>
</head>
<body>
<div>
	<h1>전송, 취소 버튼 만들기</h1>
	<hr>
</div>

<div>
	<!-- **서버쪽을 보기 위해서는 백엔드와 같이 해야함, 큰 흐름을 인지하고 넘어가기** -->

	<!-- form: 데이터 전송 및 페이지 요청			**'데이터 전송' 보다 '페이지 요청'이 더 중요함** -->
	<!-- 폼으로 구성한 데이터의 내용을 전달할테니... 요청한 페이지와 만날 수 있게 해 달라... -->
	<form action="http://localhost:3306/WebApp01/Test022.html">
		<!-- **
		요청메서드 종류: 
		ㄴ get 메서드: ex. 엽서 전달/ 중간 집배원 존재. 내용이 다 보임
		ㄴ post 메서드: ex. 편지/ 편지는 편지봉투안에 있기 때문에 내용 안 보임
		**  -->		
		
		*이름
		<input type="text" name="name" size="15" maxlength="10"><br>
		*이메일
		<input type="text" name="email" size="15" maxlength="20"><br>
		*하고 싶은 말
		<br>
		<textarea rows="10" cols="50" name="field"></textarea>
		<br><br>
		
		<input type="submit" value="전송하기1" name="submitBtn">
		<input type="button" value="전송하기2">
		<button type="button">전송하기3</button>
		<button>전송하기4</button>
		<!-- **
		모양만 보았을 때는 버튼이지만, 어떻게 만들었는지에 따라 다르게 동작함
		- 전송하기1: <input type="submit">
		- 전송하기2: <input type="button">
		- 전송하기3: <button type="button"></button>
		ㄴ 전송하기2-3은 기능적으로 같은 버튼
		ㄴ 왜 두가지가 있을까?
			ㄴㄴ 전송2는 다른 태그 수용X
			ㄴㄴ 전송3은 다른 태그 수용O
		- 전송하기4: <button></button>
		ㄴ type이 기재되지 않은 버튼일 시, submit과 같은 기능을 함
		** -->
		
		<br><br>
		
		<input type="reset" value="취소하기" name="resetBtn">
		<!-- **<input type="reset">: 내용이 모두 삭제됨** -->
	</form>
</div>

</body>
</html>

ㄴㄴTest022.html_Test021.html 에서 요청한 내용 확인

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test022.html</title>
</head>
<body>
<div>
	<h1>Test021.html 에서 요청한 내용 확인</h1>
	<hr>
</div>

<div>
<!-- **a태그 링크(페이지 이동)와 완전 다른 개념!* -->
	안녕? 난 Test022.html 이야~<br>
	네가 나에게 전송한 <br>
	이름, 이메일, 하고 싶은 망르 모두 확인했어~<br>
	담에 보자<br>
</div>

</body>
</html>

ㄴㄴTest023.html_드로다운메뉴(selectbox) 만들기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test023.html</title>
</head>
<body>
<div>
	<h1>드로다운메뉴(selectbox) 만들기</h1>
	<hr>
</div>

<div>
	<form>
		<!-- **
		select
		- 야구 값과 <option>은 연관이 없기 때문에 value로 값을 가져와야함
		- 제일 많이 쓰는 값(사원)을 위로 구성하면 많은 수고로움을 덜 수 있지만, 
			회사 사정상 사원이 회장보다 위에있는 것을 원하지 않을 수 있음
			이럴 때 selected="selected"사용이 권장됨
		※ 주의사항1) 최초선택이 되어있을때 셀렉트를 확인못하고 넘어가면 최초선택된 값으로 넘어가므로
			<option>에 선택을 안내하는 문구로 선택을 해야 페이지가 넘어갈 수 있게 구성
		** -->
		
		<input type="text">
		
		<!-- **select 주의사항1) 테스트** -->
		<p>당신이 가장 좋아하는 종목은?</p>
		<select name="selectSport">
			<option>--선택하세요--</option>
			<option value="val2">축구</option>
			<option value="val3">배구</option>
			<option value="val4">농구</option>
		</select>
		
		<p>당신의 직책은?</p>
		<select name="selectJikwi">
			<option value="1">회장</option>
			<option value="2">사장</option>
			<option value="3">부장</option>
			<option value="4">과장</option>
			<option value="5">대리</option>
			<option value="6" selected="selected">사원</option>
			<option value="7">인턴</option>
		</select>
		<br><br>
		
		<button type="button">확인</button>
		<button type="reset">다시입력</button>
		<!-- **reset 엑션발생시 모두 없어지는 것이 아니라 기본값으로 바뀜** -->
	
		<p>좋아하는 산은?(다중 선택 가능)</p>
		<select name="trav" size="6" multiple="multiple">
			<option value="val1">백두산
			<option value="val2">한라산
			<option value="val3">지리산
			<option value="val4">설악산
			<option value="val5">북한산
			<option value="val6">속리산
		</select>
		<!-- **
		select는 기본적으로 다중선택이 불가능함
		하지만 가능하게 만들 수 있음
		-> <select>의 사이즈를 option갯수만큼 바꾸기, muitiple속성 부여
		ㄴㄴ shift 연속 선택 가능, ctrl 개별 선택 가능
		** -->
	</form>
</div>



</body>
</html>

'📝 배우고 익히기 + > Web' 카테고리의 다른 글

(68)[Web]3일차: ■ Javascript 개요 및 기본문법 ■ / F_WebApp03>Test001~Test014 (0)	2023.11.29
(68)[Web]3일차: ((CSS)) F_WebApp02>Test005~020 (4)	2023.11.29
(66)[Web]2일차: CSS 개요 / ■ CSS ■ / F_WebApp02>Test001~004 (0)	2023.11.28
(65)[Web]1일차: ■ HTML ■ / 이클립스 WebStudy 환경셋팅 / Test001~003 (0)	2023.11.28
(65)[Web]1일차: 웹 개요 (3)	2023.11.28

🍀보통 기록합니다💭

(66)[Web]2일차: ((HTML)) F_WebApp01>Test005~023

1. 2023.11.28(화)

F_WebApp01

ㄴ C:\WebStudy\WebApp01\WebContent

ㄴㄴTest004.html_데이터 입력 관련 태그

ㄴㄴTest005.html_데이터 입력 관련 태그

ㄴㄴTest006.html_데이터 입력 관련 태그(자바스크립트포함)

ㄴㄴTest007.html_수평선 넣기 / 공백 넣기

ㄴㄴTest008.html_기타 글꼴 꾸미기 태그

ㄴㄴTest009.html_pre 태그 / xmp 태그

ㄴㄴTest010.html_이미지 다루기

ㄴㄴTest011.html_하이퍼링크 실습

ㄴㄴTest011_1.html_하이퍼링크 실습

ㄴㄴTest012.html_테이블(표) 만들기 - 테이블에 속성 적용하기

ㄴㄴTest013.html_테이블 열/행 병합 실습

ㄴㄴTest014.html_테이블 열/행 병합 실습2

ㄴㄴTest015.html_움직이는 태그 실습

ㄴㄴTest016.html_메타 태그 실습

ㄴㄴTest017.html_한 줄 데이터 입력 상자 / 암호 입력 상자

ㄴㄴTest018.html_여러 줄 데이터 입력 글상자

ㄴㄴTest019.html_여러 줄 데이터 입력 글상자

ㄴㄴTest020.html_여러 줄 데이터 입력 글상자

ㄴㄴTest021.html_전송, 취소 버튼 만들기

ㄴㄴTest022.html_Test021.html 에서 요청한 내용 확인

ㄴㄴTest023.html_드로다운메뉴(selectbox) 만들기

'📝 배우고 익히기 + > Web' 카테고리의 다른 글

티스토리툴바

(66)[Web]2일차: ((HTML)) F_WebApp01>Test005~023

1. 2023.11.28(화)

F_WebApp01

ㄴ C:\WebStudy\WebApp01\WebContent

ㄴㄴTest004.html_데이터 입력 관련 태그

ㄴㄴTest005.html_데이터 입력 관련 태그

ㄴㄴTest006.html_데이터 입력 관련 태그(자바스크립트포함)

ㄴㄴTest007.html_수평선 넣기 / 공백 넣기

ㄴㄴTest008.html_기타 글꼴 꾸미기 태그

ㄴㄴTest009.html_pre 태그 / xmp 태그

ㄴㄴTest010.html_이미지 다루기

ㄴㄴTest011.html_하이퍼링크 실습

ㄴㄴTest011_1.html_하이퍼링크 실습

ㄴㄴTest012.html_테이블(표) 만들기 - 테이블에 속성 적용하기

ㄴㄴTest013.html_테이블 열/행 병합 실습

ㄴㄴTest014.html_테이블 열/행 병합 실습2

ㄴㄴTest015.html_움직이는 태그 실습

ㄴㄴTest016.html_메타 태그 실습

ㄴㄴTest017.html_한 줄 데이터 입력 상자 / 암호 입력 상자

ㄴㄴTest018.html_여러 줄 데이터 입력 글상자

ㄴㄴTest019.html_여러 줄 데이터 입력 글상자

ㄴㄴTest020.html_여러 줄 데이터 입력 글상자

ㄴㄴTest021.html_전송, 취소 버튼 만들기

ㄴㄴTest022.html_Test021.html 에서 요청한 내용 확인

ㄴㄴTest023.html_드로다운메뉴(selectbox) 만들기

'📝 배우고 익히기 + > Web' 카테고리의 다른 글

관련글

티스토리툴바