Frog is cry
Leture15_HTML 소개와 주요기능 본문
HTML(Hypertext Markup Language)
> HTTP 통신에 사용되는 정적 스크립트 언어
> HTML은 대소문자를 구분하지 않는다
> 문법 오류가 있더라도 브라우저가 자동 수정을 한다.
> 태그는 시작태그 - 종료태그 쌍 형태도 있지만 독립적인 태그도 있다.
예) <HTML> </HTML> : 쌍 형태
<INPUT> : 독립적인 형태
클라이언트(brower)가 웹 서버로 요청(request)
Web Server(WAS : Web Application Server)
> HTTP로 받은 요청을 container에 전달
> 정적 처리만 가능
> 클라이언트에 응답(respunse)
Web Container(WAS : Web Application Server)
> Web server에서 전달받은 요청을 동적으로 처리
> JSP, Servlet 실행 환경 제공
웹 서버의 종류 : IIS, apache, tMax, WebtoB 등
Was의 종류 : tomcat, jeus, Web Logic, Webspere, JBOSS, Oracle
Tomcat 설치
1. http://tomcat.apache.org/ 접속
2. Tomcat 9.0 설치 파일 다운로드
3. 다운로드한 설치 파일 실행
4. JRE 위치 지정후 tomcat 설치 경로는 C드라이브 최상위로 지정
5. 포트번호 9090으로 설정
6 JAVA_HOME 환경변수 추가
7. Tomcat 9.0\startup 실행 (서버 가동)
8. 설치 후 브라우저를 실행하고 주소창에 http://localhost:9090/ (구동 확인)
이클립스 환경 구축
1. Dynamic Web Project 생성
2. 서버 생성
3. 프로젝트와 서버 연동
4. 실행 시 사용할 기본 웹 브라우저 선택
> CSS, HTML, JSP 파일의 인코딩 형식을 UTF-8로 변경
HTML의 기본구조
1. <html></html> : html 파일의 시작과 끝을 표시
2. <head></head> : 해당 페이지의 주요 정보(머리글)
3. <body></body> : 해당 페이지의 주 내용(본론)
4.<title></title> : 페이지 상단 제목
5. <meta charset = "UTF-8"> : 해당 페이지는 URF-8인코딩 형식을 따른다. (UTF-8 한글지원)
6. <!--내용--> : 주석
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>나의 첫</title>
</head>
<body>
웹페이지^__^
</body>
</html>
<!--
<Hn> </Hn> : 글자 크기 (n:1~6, 작을 수록 크다)
-->
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>
나의 첫 html 페이지
</title>
</head>
<body>
<h1>Hello,</h1>
<h2>Html!</h2>
<h3>나의</h3>
<h4>첫</h4>
<h5>html</h5>
<h6>페이지</h6>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
test1
test2 <br> <!-- 줄바꿈을 의미한다 -->
test3 <br><br>
test4 <br/><br/><br/>
test5
</body>
</html>
<!--
<DIV> </DIV> : Divisin 구역 설정
** div의 align 속성
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div align = "left"> <!-- 왼쪽 정렬 -->
문단을 정렬합니다.<br>
문단을 정렬합니다.<br>
문단을 정렬합니다.<br>
문단을 정렬합니다.<br>
</div>
<div align = "center"> <!-- 중앙 정렬 -->
문단을 정렬합니다.<br>
문단을 정렬합니다.<br>
문단을 정렬합니다.<br>
문단을 정렬합니다.<br>
</div>
<div align = "right"> <!-- 오른쪽 정렬 -->
문단을 정렬합니다.<br>
문단을 정렬합니다.<br>
문단을 정렬합니다.<br>
문단을 정렬합니다.<br>
</div>
</body>
</html><!--
특수문자
1) " : " (double quotation mark)
2) & : & (ampersand)
3) < : < (less-than sign)
4) > : > (greater-than sign)
5) &#ascii; (ex. A : A)
6)   : space
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
"
&
<
>
A
B C
</body>
</html>
<!-- (1/3)
** List 태그 : 목록 형태
1. 순서 없는 태그 : <UL></UL> (unordered list)
** UL 태그의 서브태그 : <LI>
** UL 태그의 TYPE 속성의 값 : disc, circle, square
2. 순서 있는 태그 : <OL></OL> (ordered list)
** OL 태그의 서브태그 : <LI>
** OL 태그의 TYPE 속성의 값 : A a I i 1
** OL 태그의 START 속성 : ~번 부터
** OL 태그의 REVERSED 속성 : 역순으로
3. 정의 태그 : <DL></DL> (definition list)
** DL 태그의 서브태그
1) <DT> : 정의할 용어 (definition term)
2) <DD> : 설명 (definition description)
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
Unordered list
<ul>
<li>떡볶이
<li>순대
<li>튀김
</ul>
<ul type = circle>
<li> 사과
<li> 오렌지
<li> 포도
<ul type = square>
<li> 청포도
<li> 일반포도
</ul>
</ul>
<ul type = disc>
<li>피카츄
<li>라이츄
<li>파이리
</ul>
</body>
</html>
<!-- (1/3)
** List 태그 : 목록 형태
1. 순서 없는 태그 : <UL></UL> (unordered list)
** UL 태그의 서브태그 : <LI>
** UL 태그의 TYPE 속성의 값 : disc, circle, square
2. 순서 있는 태그 : <OL></OL> (ordered list)
** OL 태그의 서브태그 : <LI>
** OL 태그의 TYPE 속성의 값 : A a I i 1
** OL 태그의 START 속성 : ~번 부터
** OL 태그의 REVERSED 속성 : 역순으로
3. 정의 태그 : <DL></DL> (definition list)
** DL 태그의 서브태그
1) <DT> : 정의할 용어 (definition term)
2) <DD> : 설명 (definition description)
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
Unordered list
<ul>
<li>떡볶이
<li>순대
<li>튀김
</ul>
<ul type = circle>
<li> 사과
<li> 오렌지
<li> 포도
<ul type = square>
<li> 청포도
<li> 일반포도
</ul>
</ul>
<ul type = disc>
<li>피카츄
<li>라이츄
<li>파이리
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
Definition List
<dl>
<dt>피카츄
<dd>전기포켓몬
<dt>꼬부기
<dd>물포켓몬
</dl>
</body>
</html>
<!--
<IMG> : 이미지 파일 추가
** IMG 태그의 속성
1) SRC : 이미지파일 이름 (확장자도 같이)
2) ALT : 설명
3) BORDER : 테두리
4) WIDTH : 너비 (비율, 픽셀)
5) HEIGHT : 높이 (비율, 픽셀)
6) ALIGN : 위치 (TOP, MIDDLE, BOTTOM, LEFT, RIGHT)
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<img src = "aa.png" alt ="피카츄" border = "5"><br>
<img src = "aa.png" width = "50" height = "100"><br>
<img src = "aa.png" width = "50%" height = "130%"><br>
<br><br>
<img src = "aa.png" align = "top">test01<br>
<img src = "aa.png" align = "middle">test02<br>
<img src = "aa.png" align = "bottom">test03<br>
<br><br>
<img src = "aa.png" align = "left">test04<br>
<img src = "aa.png" align = "right">test05<br>
</body>
</html>
<!--
<A></A> : anchor
속성:
HREF (hypertext reference)
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<a href = "http://www.naver.com">네이버로 이동!</a><p>
<a href = "test01.html"><img src= "aa.png"></a><p>
<a href = "aa.png">귀엽다</a>
</body>
</html>
<!--
<TABLE></TABLE> : 표
속성 :
BORDER : 표의 테두리 두께
BORDERCOLOR : 표의 테두리 색상
BACKGROUND : 표 전체의 배경 색상
BGCOLOR : 표 전체의 색상
CELLSPACING : 셀과 셀 사이의 간격
CELLPADDING : 셀과 셀 내용 사이의 간격
WIDTH : 표 전체의 가로 넓이
HEIGHT : 표 전체의 세로 넓이
ALIGN : 표 전체의 왼쪽/가운데/오른쪽 정렬
<CAPTION></CAPTION> : 표 이름
속성 :
ALIGN : TOP, BOTTOM <caption align = "top">피카츄</caption>
<TR></TR> : 행(ROW) 추가
속성 :
ALIGN : LEFT, CENTER, RIGHT
VALIGN : TOP, MIDDLE, BOTTOM
BGCOLOR: 행 색상
<TH></TH> : 행/열의 제목 (table header)
속성 :
ALIGN : LEFT, CENTER, RIGHT
VALIGN : TOP, MIDDLE, BOTTOM
BGCOLOR: 열 제목의 색상 지정
BORDERCOLOR: 셀 테두리 색상
BACKGROUND: 셀 바탕
ROWSPAN : 세로로 합치고자 하는 행의 수
COLSPAN : 가로로 합치고자 하는 열의 수
WIDTH : 열의 가로 길이
HEIGHT : 열의 세로 길이
<TD></TD> : 열 추가
속성 :
ALIGN : LEFT, CENTER, RIGHT
VALIGN : TOP, MIDDLE, BOTTOM
BGCOLOR: 셀의 색상 지정
BORDERCOLOR: 셀 테두리 색상
BACKGROUND: 셀 바탕
ROWSPAN : 세로로 합치고자 하는 행의 수
COLSPAN : 가로로 합치고자 하는 열의 수
WIDTH : 셀의 가로 길이
HEIGHT : 셀의 세로 길이
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>table01</h1><br>
<table>
<tr>
<th>국어</th><!-- 테이블 헤더 추가 -->
<th>영어</th>
<th>수학</th>
</tr>
<tr>
<td>100</td><!-- 칸추가 -->
<td>85</td>
<td>90</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>table02 - border 10으로 설정</h1><br>
<table border = "10">
<tr>
<th>국어</th>
<th>영어</th>
<th>수학</th>
</tr>
<tr>
<td>100</td>
<td>85</td>
<td>90</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>table03 - border 5으로 설정, caption top으로 설정</h1><br>
<table border = "5">
<caption align = "top">성적표</caption>
<tr>
<th>국어</th>
<th>영어</th>
<th>수학</th>
</tr>
<tr>
<td>100</td>
<td>85</td>
<td>90</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>table04 - border 5으로 설정, caption bottom으로 설정</h1><br>
<table border = "5">
<caption align = "bottom">성적표</caption>
<tr>
<th>국어</th>
<th>영어</th>
<th>수학</th>
</tr>
<tr>
<td>100</td>
<td>85</td>
<td>90</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>table05 - width 200으로 설정</h1><br>
<table border = "1" width = "200">
<caption align = "top">성적표</caption>
<tr>
<th>국어</th>
<th>영어</th>
<th>수학</th>
</tr>
<tr>
<td>100</td>
<td>85</td>
<td>90</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>table06 - width 30%, height 100으로 설정</h1><br>
<table border = "5" width = "30%" height = "100">
<caption align = "top">성적표</caption>
<tr>
<th>국어</th>
<th>영어</th>
<th>수학</th>
</tr>
<tr>
<td>100</td>
<td>85</td>
<td>90</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>table07 - align left으로 설정</h1><br>
<table border = "5" align = "left">
<caption align = "top">성적표</caption>
<tr>
<th>국어</th>
<th>영어</th>
<th>수학</th>
</tr>
<tr>
<td>100</td>
<td>85</td>
<td>90</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>table08 - align center으로 설정</h1><br>
<table border = "5" align = "center">
<caption align = "top">성적표</caption>
<tr>
<th>국어</th>
<th>영어</th>
<th>수학</th>
</tr>
<tr>
<td>100</td>
<td>85</td>
<td>90</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>table09 - cellspacing 20으로 설정</h1><br>
<table border = "5" cellspacing = "20">
<caption align = "top">성적표</caption>
<tr>
<th>국어</th>
<th>영어</th>
<th>수학</th>
</tr>
<tr>
<td>100</td>
<td>85</td>
<td>90</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>table10 - cellpadding 20으로 설정</h1><br>
<table border = "5" cellpadding = "20">
<caption align = "top">성적표</caption>
<tr>
<th>국어</th>
<th>영어</th>
<th>수학</th>
</tr>
<tr>
<td>100</td>
<td>85</td>
<td>90</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>table11 - 텍스트 좌우 정렬</h1>
<table border="5">
<caption align="top">성적표</caption>
<tr>
<th width="200">국어</th>
<th width="200">영어</th>
<th width="200">수학</th>
</tr>
<tr>
<td align="left">100</td>
<td align="center">85</td>
<td align="right">90</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>table12 - colspan</h1>
<table border="5">
<caption align="top">성적표</caption>
<tr>
<th width="200">국어</th>
<th width="200" colspan = "2">영어/수학</th>
</tr>
<tr>
<td align="center">100</td>
<td align="center">85</td>
<td align="center">90</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>table12 - colspan</h1>
<table border="5">
<caption align="top">성적표</caption>
<tr>
<th width="200">국어</th>
<th width="200" colspan = "2">영어/수학</th>
</tr>
<tr>
<td align="center">100</td>
<td align="center">85</td>
<td align="center">90</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>table13 - rowspan</h1>
<table border="5">
<caption align="top">성적표</caption>
<tr>
<th width="200">국어</th>
<td align="center">100</td>
</tr>
<tr>
<th width="200" rowspan="2">영어/수학</th>
<td align="center">85</td>
</tr>
<tr>
<td align="center">90</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<table border = "1">
<tr>
<th>이름</th>
<td colspan="2">김피카츄</td>
<td rowspan="4"><img src="aa.png" width="80" height="100"></td>
</tr>
<tr>
<th>연락처</th>
<td colspan="2">010-1111-2222</td>
</tr>
<tr>
<th>국어</th>
<th>영어</th>
<th>수학</th>
</tr>
<tr>
<td>100</td>
<td>80</td>
<td>90</td>
</tr>
<tr>
<th colspan = "3">평균</th>
<td rowspan = "2" align ="center">합격!</td>
</tr>
<tr>
<td colspan = "3" align = "center">90</td>
</tr>
</table>
</body>
</html><!--
<form></form>
회원 가입, 로그인 등의 사용자 입력/선택이 필요한 경우 사용하는 입력폼
속성 :
NAME : 해당 form의 이름
METHOD : 폼의 전송방식 (POST,GET)
METHOD 속성의 값 :
1. POST : 본문에 데이터를 담아 전송하는 타입
2. GET : 주소를 이용한 전송타입
ACTION : 폼이 전송될 목적지 페이지
** FORM 태그의 서브 태그
1. <INPUT>
속성 :
TYPE
값 :
TEXT : 일반 텍스트 입력
PASSWORD : 비밀번호 (*로 표시됨)
HIDDEN : 숨겨진 필드 (사용자에게 보여지지는 않는 데이터에 사용)
CHECKBOX : 선택 (네모칸)
RADIO : 라디오 버튼 (동그란 칸)
FILE : 파일 첨부
SUBMIT : 폼 값을 전송 (확인)
RESET : 폼 리셋 (취소)
IMAGE : 이미지
2. <TEXTAREA></TEXTAREA>
속성 :
NAME : 텍스트 영역의 이름을 부여
ROWS : 텍스트 영역의 높이
COLS : 텍스트 영역의 가로길이
3. <SELECT></SELECT>
e.g. 메일 주소 선택할 때
속성 :
NAME : 셀렉트 태그의 이름을 부여
SIZE : 보여줄 항목의 개수 지정
MULTIPLE : 복수 선택 가능
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form>
input01 - text<br>
<input type = "text" name="user" size ="20" maxlength = "10" value = "kim">
<!-- maxlength : 최대 수용 길이 -->
<hr><!-- 선 추가 -->
input02 - password<br>
<input type = "password" name="pwd" size ="20" maxlength = "10" >
<hr><!-- 선 추가 -->
input03 - checkbox<br> <!-- 여러개 체크 가능 -->
<input type = "checkbox" name="chk" value = "book">독서<br>
<input type = "checkbox" name="chk" value = "food">먹기<br>
<input type = "checkbox" name="chk" value = "game">게임<br>
<hr><!-- 선 추가 -->
input04 - checkbox 미리 체크(checked)<br>
<input type = "checkbox" name="chk" value = "book" checked>독서<br>
<input type = "checkbox" name="chk" value = "food">먹기<br>
<input type = "checkbox" name="chk" value = "game">게임<br>
<hr><!-- 선 추가 -->
input05 - radio<br> <!-- 하나만 체크가능 -->
<input type = "radio" name="hobby" value = "book">독서<br>
<input type = "radio" name="hobby" value = "food">먹기<br>
<input type = "radio" name="hobby" value = "game">게임<br>
<hr><!-- 선 추가 -->
input06 - radio 미리 체크(checked)<br>
<input type = "radio" name="hobby" value = "book">독서<br>
<input type = "radio" name="hobby" value = "food">먹기<br>
<input type = "radio" name="hobby" value = "game" checked>게임<br>
<hr><!-- 선 추가 -->
input07 - file <br>
<input type = "file">
<hr><!-- 선 추가 -->
input08 - submit, reset <br>
<input type = "submit"><br>
<input type = "submit" value ="전송"><br>
<input type = "reset"><br>
<input type = "reset" value = "취소"><br>
<hr><!-- 선 추가 -->
input09 - button, image <br>
<input type = "button" value = "이것은 버튼입니다.."><br>
<input type = "image" src ="aa.png"><br>
<hr><!-- 선 추가 -->
textarea01<br>
<textarea name = "content" rows = "4" cols = "30">하이하이하이~~</textarea>
<hr><!-- 선 추가 -->
select01<br>
<select name = "meat" size = "2">
<option value = "beef">소고기</option>
<option value = "pork">돼지고기</option>
<option value = "chicken">닭고기</option>
<!-- 선택된 항목의 value만 전송됨 -->
</select>
</form>
</body>
</html>
'JSP > 실습' 카테고리의 다른 글
| Leture17_JSP의 구조 (0) | 2020.08.06 |
|---|---|
| Leture16_HTML 회원 가입 페이지 구현 (0) | 2020.08.06 |
| Leture13_Practice (0) | 2020.08.05 |
| Leture12_ResultSet (0) | 2020.08.05 |
| Leture11_PreparedStatement (0) | 2020.08.05 |
Comments