본문 바로가기
강의/JSP 강의 정리

JSP 강의 정리 3일차

by 리드민 2022. 7. 8.
반응형

[1] 테스트 환경

hardware
cpu : intel i7-7700, gpu : intel hd 630, ram : ddr4 16GB, mainboard : samsung DB400S7A-Z51, secondary storage : 256GB SSD, 1TB HDD
OS
windows pro 64bits
software
jdk version 1.8.0_301
eclipse version 2021-09 (4.21.0)
apache-tomcat version 9.0.54

 

[2] 강의 정리

 

[2-1] html

(9) form 태그와 input 속성

 

ex09.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h2>form 태그</h2>
	
	<form name ="profile" action="jspPage.jsp" method="get">
	
	<!--
		name : form의 이름
		action : form이 전송되는 서버쪽 url
		method : 전송방법 설정 get방식은 default
				 post 방식은 데이터를 url에 공개하지 않고 술겨서 전송
	 -->
	 
	 아이디 : <input type="text" name="id" size="10"> <br>
	 <!-- 
	 	input 태그는 사용자로부터 입력을 받을 수 있는 입력필드를 정의할때 사용
	 	type : 입력형식
	 	name : 서버로 전송되는 데이터의 이름
	 	size : 요소의 너비를 명시
	  -->
	  
	비밀번호 : <input type="password" name="pw" size="10"><br>
	 
	이름 : <input type="text" name="name" size="10" ><br>
	
	나이 : <input type="number" name="age" size="10"><br>
	
	자기소개<br>
	
	<textarea name="sojae" row="5" cols="20"></textarea>
	
	<input type="submit" value="서버로 전송">
	<input type="reset" value="초기화">
	
	<!-- 
		submit : 서버로 데이터를 전송하는 제출버튼
		주소는 action 버튼에 명시
		value : 버튼에 표시할 내용
		reset : 사용자가 입력한 내용을 초기화
	 -->
	
	</form>

</body>
</html>

 

 

(10) 체크박스와 라디오 버튼

체크박스와 라디오 버튼은 여러 항목중에서 원하는 항목을 선택할 때 사용하는 폼 요소이다. 이때 항목을 1개만 선택하려면 라디오 버튼을 사용하고, 2개이상 선택 하려면 체크박스를 사용한다. 라디오 버튼은 항목을 1개만 선택할 수 있으므로 이 미 선택한 항목이 있을 경우 다른 항목을 선택하면 기존항목은 취소된다.

 

체크박스 형식)

<input type=“checkbox” >
<input type=“radio” >

 

html 코드 예제)

ex10.html

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

	<h2>체크박스 버튼</h2>
	<!-- 체크박스는 다중선택이 가능하다. -->
	
	<form action="#">
	
		<input type="text" name = "id" value="hong"><br>
		
		<input type="checkbox" name="color" value="blue">블루<br>
		<input type="checkbox" name="color" value="red">레드<br>
		<input type="checkbox" name="color" value="orange">오렌지<br>

		<input type="submit" value="서버로 전송">
			
	</form>
	
	<!-- 
	HTML value 속성은 input 태그에서 보조적인 속성에 사용된다.
	값 설정, 버튼 텍스트 정의, 초기값 설정에 사용된다.
	submit, reset : 버튼 내의 텍스트 정의
	text : 입력필드의 초기값 설정
	checkbox, radio : 해당 입력필드를 선택시 서버로 제출되는 데이터(값)을 명시
	 -->
	
	<!-- 라디오 버튼은 단일 선택이다. -->
	
	 <h2>라디오버튼</h2>
	
	 <form action ="#">
	 	<label><input type="radio" name="fruit" value="apple">사과</label> <br>
	 	<input type="radio" name="fruit" value="strawberry">딸기 <br>
	 	<input type="radio" name="fruit" value="banana">바나나 <br>
	 	
	 	<input type="submit" value="서버로 전송">
	 </form>

	<h2>select 태그</h2>
	
	<form action="#">
		<select name="coffe">
		<option value="americano">아메리카노</option>
		<option value="latte">라떼</option>
		<option value="espresso">에스프레소</option>
		</select>
		<br>
		<input type="submit" value="서버로 전송">
	
	</form>

</body>
</html>

 

() html 코드를 사용해서 문단 태그와 텍스트 태그 등으로 애국자 1절을 웹브라우저에 표현해보자

practice01.html

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

	<!-- 
		문단 태그와 텍스트 태그 등으로
		애국자 1절을 웹브라우저에 표현해보자
	 -->
	
	<h1>애국가</h1>
	<p></p>
	<h3>
	동해물과 백두산이 마르고 닳도록<br>
	하느님이 보우하사 우리나라 만세<br>
	무궁화 삼천리 화려 강산<br>
	대한 사람 대한으로 길이 보전하세<br>
	</h3>


</body>
</html>

 

 

() html 코드를 사용해서 table 태그로 표를 만들어보자

practice02.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	
	<!-- 
		table 태그로 표만들기
		이름		나이		전화번호		취미
		홍길동	20	010-1111-2222	컴퓨터
		...
		...
		...
	 -->
	 
	 <table border="1">
	 
	 <tr>
	 	<td>홍길동</td>
	 	<td>20</td>
	 	<td>010-1111-2222</td>
	 	<td>컴퓨터</td>
	 </tr>

	 <tr>
	 	<td>홍길동</td>
	 	<td>20</td>
	 	<td>010-1111-2222</td>
	 	<td>컴퓨터</td>
	 </tr>
	 
	 <tr>
	 	<td>홍길동</td>
	 	<td>20</td>
	 	<td>010-1111-2222</td>
	 	<td>컴퓨터</td>
	 </tr>
	 
	 <tr>
	 	<td>홍길동</td>
	 	<td>20</td>
	 	<td>010-1111-2222</td>
	 	<td>컴퓨터</td>
	 </tr>
	 
	 </table>

</body>
</html>

 

() html 코드를 사용해서 form 태그로 회원가입 폼 만들어보자.

practice.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	
	<!-- 
		form 태그를 사용해서 회원가입 폼 만들기
		(아이디, 비밀번호, 이름, 연락처, 이메일)
	-->
	 
	<h2> form 태그</h2>
	
	<form name="profile" action="practice03.jsp" method="get">
	
	아이디 : <input type="text" name="id" size="10"> <br>
	
	비밀번호 : <input type="password" name="pw" size="10"> <br>
	
	이름 : <input type="text" name="name" size="10"> <br>
	
	연락처 : <input type = "text" name = "phonenumber" size="10"> <br>
	
	연락처 : <input type = "text" name = "email" size="10"> <br>

	<input type="submit" value="서버로 전송">
	
	</form>
	 
	 <form action="#">
	 
	 	아이디 : <input type="text" name="id" size="10"> <br>
	 	비밀번호 : <input type="password" name="pw" size="10"> <br>
	 	이름 : <input type="text" name="name" size="10"> <br>
	 	연락처 : <input type="text" name="tel" size="10"> <br>
	 	이메일 : <input type="email" name="email" size="10"> <br>
	 
	 	<input type ="submit" vaule="서버로 전송">
	 </form>
	 
</body>
</html>

 

[2-2] html에서 css 사용

(1) CSS(Cascading Style Sheets)
CSS(Cascading Style Sheets)는 HTML등으로 작성된 문서의 표시 방법을 기술하기위한 스타일 시트 언어이다.
CSS는 텍스트나 이미지 배경의 크기나 배치 방법등 디자인을 담당한다.
  HTML로는 웹 사이트의 내용을 나열하고 CSS로는 웹 문서의 디자인을 구성한다.이렇게 내용과 디자인이 구분되어 있으면 사이트의 내용을 수정할 때에도 디자인에 전혀 영향을 미치지 않아 편리하다. 또한 반대로 내용은 건드리지 않은 상태에서 스타일 시트를 이용해 디자인만 바꿔서 완전히 다른 느낌이 나는 문서로 만들 수 있다. 

 

(2) html에 css를 적용하는 방법 목록

1. 인라인 스타일(Inline style)

2. 내부 스타일 시트(Internal style sheet)

3. 외부 스타일 시트(External style sheet)

전체 선택자 시트

태그 선택자 시트

클래스 선택자 시트

아이디 선택자 시트

 

(2-1) 인라인 스타일

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body>

	<h2 style="color:blue; font-size: 50px">인라인 스타일시트</h2>

</body>
</html>

 

(2-2) 내부 스타일 시트

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style>
	h2{
		color : darkorange
	}

</style>

</head>
<body>
	
	<h2>내부 스타일 시트</h2>

	<!-- 
		내부스타일 : HTML 문서 내부 상단에 <style> 태그를 사용해 스타일을 정의하는 것
	 -->

</body>
</html>

 

(2-3) 외부 스타일 시트

1. 전체 선택자 시트

2. 태그 선택자 시트

3. 클래스 선택자 시트

 

html 파일)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>


<link rel="stylesheet" type="text/css" href="style.css">

<!-- 
	link 태그는 해당 문서와 외부소스사이의 관계를 정의할때 사용한다.
	link 요소는 빈 태그이며, 속성만을 포함한다.
	<head> 요소 내부에만 위치할 수 있으며, 그 갯수에는 제한이 없다.
	주로 외부 스타일 시트를 연결할 때 사용한다.
 -->

</head>
<body>

	<h2 class="red">외부 스타일 시트</h2>
	<!-- 
		외부스타일 : HTML문서와 별도로 확장자가 css인 파일생성 후
		문서 상단에 <link> 태그로 불러와 스타일을 적용하는 것
	 -->
	 
</body>
</html>

CSS 파일)

@charset "UTF-8";


.red{
	color:red;
}

 

4. 아이디 선택자 시트

 

html 파일)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>


<link rel="stylesheet" type="text/css" href="style.css">

<!-- 
	link 태그는 해당 문서와 외부소스사이의 관계를 정의할때 사용한다.
	link 요소는 빈 태그이며, 속성만을 포함한다.
	<head> 요소 내부에만 위치할 수 있으며, 그 갯수에는 제한이 없다.
	주로 외부 스타일 시트를 연결할 때 사용한다.
 -->

</head>
<body>

	<h2 id="red2">외부 스타일 시트</h2>
	<!-- 
		외부스타일 : HTML문서와 별도로 확장자가 css인 파일생성 후
		문서 상단에 <link> 태그로 불러와 스타일을 적용하는 것
	 -->
	 
</body>
</html>

CSS파일(style.css))

@charset "UTF-8";

#red2{
	color:red;
}
반응형

'강의 > JSP 강의 정리' 카테고리의 다른 글

JSP 강의 정리 5일차  (0) 2022.07.12
JSP 강의 정리 4일차  (0) 2022.07.11
JSP 강의 정리 2일차  (0) 2022.07.07
JSP 강의 정리 1일차  (0) 2022.07.06
JSP 강의 정리 목차  (0) 2022.07.06

관련글

티스토리툴바