728x90
수업내용
1교시 (09:30-10:20)
- 지난 시간 복습
URI / URL <-- 전체 공부하기
http://localhost:8088/firstWeb/html/hello.html
1. 프로토콜
http : HTTP 프로토콜
2. 컴퓨터 : 웹서버(아파치 탐캣 port 8088 세팅)
localhost:8088 : 컴퓨터:포트
3. server.xml 파일에 가서
<Context> 태그에 있는 path 속성을 읽는다.
docBase="firstWeb" path="/firstWeb"
/firstWeb : / <-- root, firstWeb <-- path 앨리어스
4. 파일 찾아기기
/html <-- 구분자, 폴더이름
/hello.html <-- 구분자, 요청한 파일 이름
=====================================================
localhost:8088
192.168.219.105:8088
/firstWeb/html/hello.html
C:\\00.KOSMO108\\30.Web\\eclipse_web_work\\firstWeb\\hello.html
server.xml <-- xml 파일을 변경하면 꼭 서버를 리스타트 해야 한다.
<Context docBase="firstWeb" path="/firstWeb" reloadable="true" source="org.eclipse.jst.jee.server:firstWeb"/>
docBase="firstWeb" --> C:\\00.KOSMO108\\30.Web\\eclipse_web_work\\firstWeb
path="/firstWeb" --> /firstWeb
=====================================================
2교시 (10:30-11:20)
- Context
- server.xml (155~156 line)
<Context docBase="firstWeb" path="/firstWeb" reloadable="true" source="org.eclipse.jst.jee.server:firstWeb"/>
<Context docBase="testContext" path="/" reloadable="true" source="org.eclipse.jst.jee.server:testContext"/>- 이클립스는 도메인(Context)이 여러 개 가능하다
- firstweb, testweb 등 여러 개 프로젝트를 만들 수 있음
- 인텔리제이는 도메인이 한 개라서 버그가 없는 편
- 이클립스는 도메인(Context)이 여러 개 가능하다
- <Context docBase="firstWeb" path="/firstWeb" reloadable="true" source="org.eclipse.jst.jee.server:firstWeb"/> <Context docBase="testContext" path="/" reloadable="true" source="org.eclipse.jst.jee.server:testContext"/>
- server.xml (155~156 line)
- firstWeb
firstWeb 웹 애플리케이션 이라고 부른다.
-------------------------------------
프로젝트
웹 애플리케이션
컨텍스트
firstWeb.war 묶어서 관리한다.
--------------------------------------------------------------------------------
Servers
context.xml
server.xml : 8088, path
<Connector port="8088"
<Context docBase="firstWeb" path="/firstWeb"
web.xml
firstWeb : 사용자 정의로 만든 웹 애플리케이션 이다. 웹 프로젝트, 컨텍스트 Context etc.
html, css, javascript, jquery, Ajax, json, xml, plain text
이미지 파일, 오디오 파일, 동영상, 지도 ....
coreJava, Jsp, Servlet
여러가지 라이브러리 ... etc.
Java Resource
src
: WAS (Tomcat Servlet Container)
: coreJava 코드, Servlet 코드
WebContent
: html
: css
: js
: jsp
: img
: 웹서버가 파일을 읽은 위치
: Client Side Script : html, css, javascript, jquery, Ajax, json, xml, plain text :
Server Side Script : jsp, el, jstl
META-INF
WEB-INF
lib
firstWeb Context 사용하는 라이브러리를 포팅한다.
ojdbc6.jar
web.xml
3교시 (11:30-12:20)
4교시 (12:30-13:20)
- HTML Hyper Text Markup Language
===================================
Hyper Text 문서를 서로 연결해 주는 링크
Markup 마크업을 표시한다.
HTML 읽어 주는 프로그램이 브라우저이다.
Hyper Text Markup Language 만든 문서를 웹 문서라고 한다.
확장자는 html, htm
웹 문서를 읽어주는 프로그램이 웹 브라우저이다.
웹 문서를 만들 때 사용한는 것이 태그 Tag 라고 한다.
태그 tag
<p></p>
요소 element
<p>내용</p>
<p 속성1=속성값1>내용</p>
속성 attribute
내용 contents
-------------------------------
html 태그가 DOM Tree로 변경되면 요소를 노드 node 라고 칭한다.
element node
attribute node
contents node
-------------------------------
HTML 과 브라우저 관계
HTML로 작성된 문서는 브라우저를 통해 나타낸다.
나타낸다 <--- 렌더링 한다.
브라우저 렌더링 엔진 자바스크립트 엔진
---------------------------------------------------------------------------------
Chrome 블링크(Blink) <- 웹킷(Webkit) V8
Firefox 게코(Gecko) 스파이더몽키(SpiderMonkey)
Internet Explorer 트라이덴트(Trident) 차크라(Chakra)
Safari 웹킷(Webkit) 자바스크립트코어(JavascriptCore)
Opera 블링크(Blink) V8
5교시 (14:30-15:20)
- hello.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
Hello HTML !!!!
<br>
test
<br>
<a href="http://www.google.com">google</a>
</body>
</html>- html401.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML 4.01</title>
</head>
<body>
HTML 4.01에는 태그 갯수가 약 84개 정도가 있다고 한다.
<hr>
<a href = "http://www.w3.org/TR/html4/loose.dtd"> HTML 4.01 태그</a>
</body>
</html>- html5.html
<!DOCTYPE html> <!-- 독타입이라고 부른다, HTML5를 사용했다고 인지한다. -->>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
HTML5에서 태그 갯수는 약 102개 정도 있다고 한다.
<hr>
<a href = "http://html.spec.whatwg.org"> HTML5 문서</a>
</body>
</html>6교시 (15:30-16:20)
- html5_1
<!DOCTYPE html>
<!--
웹 문서의 유형 document type을 지정하는 선언ㄴ문
웹 문서의 첫 부분에 작성한다.
-->
<html lang="en">
<!-- html
웹 문서의 시작과 끝을 알리는 태그
lang 속성 : 문서에서 사용할 언어 지정
ko : korea
en : english
검색 사이트에서 특정 언어로 제한해 검색할 때 사용
-->
<head>
<!-- head
<title> 사이트 제목 태그
<meta> 문서정보 태그
<script> 자바스크립트 태그
<style> 스타일 태그
-->
<meta charset="UTF-8">
<!-- meta
문자 세트를 비롯해 문서 정보가 들어있는 태그
메타 정보 : 데이터에 관한 데이터라고 한다.
웹 브라우저에는 보이지 않지만 웹 문서와 관련된 정보를 지정할 때 사용
웹 브라우저에 글자를 표시할 때 사용할 인코딩을 지정
웹 서버는 영어가 기본이며 meta 태그에 인코딩을
명시하지 않으면 웹 브라우저에서 자동으로 인코딩을 처리한다.
-->
<meta name="keywords" content="html의 구조">
<!-- 웹 문서의 키워드 -->
<meta name="description" content="html의 구조를 알아봅시다">
<!-- 웹 문서의 설명 -->
<meta name="author" content ="Kyunghee Ko">
<!-- 웹 문서의 소유자나 제작자 -->
<title> 문서 제목</title>
<!-- title
문서 제목을 나타내는 태그
즐겨찾기 등록 시 즐겨찾기 제목
검색 엔진의 결과 제목
웹 브라우저의 제목 표시줄에 표시
-->
</head>
<body>
<!-- body
웹 브라우저에 내용을 표시하는 태그
문서 유형을 정의하고 문서 정보를 입력하면
<body></body> 사이에 실제 웹 브라우저에
표시할 내용을 입력한다.
-->
웹 브라우저에 내용을 표시하는 태그 <br>
문서 유형을 정의하고 문서 정보를 입력하면<br>
<body> </body> 사이에 실제 웹 브라우저에<br>
표시할 내용을 입력한다. <br>
<strong>body 태그 부분이 document이다.<strong>
</body>
</html>- html 연습하기
- HTML 태그 정리하기
-----------------------
https://www.w3schools.com/
---------------------------------------
<h1> ~ <h6> 제목을 나타내는 태그
<hr>
<p> 텍스트 단락 태그
<br> 줄 바꾸는 태그
<blockquote> 인용할 때 사용하는 태그 "" 대신 사용
다른 텍스트보다 약간 들여 쓴다.
<strong>, <b> 텍스트를 굵게 표시
strong : 경고나 주의사항등 중요내용 강조
b : 단순히 글자만 굵게 표시
<em>, <i> 기울인 텍스트
em : 이탤릭체 강조 emphasis
i : 이탤릭체 italic
<ol>, <li> 순서 있는 목록
<ol type='a' start='3'>
<ul>, <li> 순서 없는 목록
<dl>, <dt>, <dd> 설명 목록
---------------------------------------
<table>, <caption>
table : 표를 만드는 태그
caption : 표의 제목 태그
<tr> 행을 만드는 태그
<td>, <th> 셀을 만드는 태그
th : 내용을 진하게 표시,
셀 안에서 중앙에 배열되므로 눈이 뜀
<thead>, <tbody>, <tfoot> 표의 구조를 지정하는 태그
thead : 제목
tbody : 본문
tfoot : 요약
rowspan, colspan 행, 열을 합치는 속성
<td rowspan="합칠 셀의 개수">행을 합침</td>
<td colspan="합칠 셀의 개수">열을 합침</td>
<img> 이미지를 삽입하는 태그
<img src="이미지 파일 경로" alt="대체용 텍스트">
------------------------------------
이미지 경로는 웹서버의 상대경로 사용해야 한다.
이미지 경로는 절대경로를 사용하면 않된다.
------------------------------------
src 이미지 파일 경로는 나타내는 속성
웹 문서와 같은 폴더에 있는 이미지 파일 경로
<img src="xxx.jpg">
웹 문서 하위 폴더에 있는 이미지 파일 경로
<imt src='images/xxx.jpg">
alt 이미지를 텍스트로 대신 설명하는 속성
width, height 이미지 크가를 조절하는 속성
width 이미지 너비
height 이미지 높이
2개 속성을 모두 사용할 수 있고
1개만 지정해도 나머지 속성은 비율을 자동으로 계산
% 퍼센트 : 현재 웹 브라우저 창의 너비와 높이를 기준으로 이미지 크기를 결정
px 픽셀 : 이미지 너비와 높이를 해당 픽셀 크기만큼 표시
---------------------------------------
<audio>, <video> 오디오와 비디오 파일을 삽입하는 태그
<audio src="오디오 파일 경로"></audio>
<video src="비디오 파일 경로"></video>
controls 플레이어 화면에 컨트롤 바를 표시
autoplay 오디오나 비디오 자동으로 실행
loop 오디오나 비디오를 반복 재생
muted 오디오나 비디오의 소리 제거
preload 페이지를 불러올 때 어떻게 로딩할 것인지 지정
사용할 값 : auto, metadata, none
preload="auto"
width, height 비디오 플레이어의 너비와 높이 지정
poster="파일 이름" 비디오 태그 속성,
비디오가 재생되기 전까지 화면에 표시할 포스터 이미지
<object>, <embed> 다양한 멀티미디어 파일을 삽입하는 태그
<object width="너비" height="높이" data="파일"></object>
<embed src="파일 경로" width="너비" height="높이">
---------------------------------------
<a>, href 링크를 삽입하는 태그 및 속성
<a href="링크할 주소>텍스트 또는 이미지</a>
<a> href="주소><img src="">텍스트</a>
<form> 폼 태그
-------------------------
<form [속성="속성값"]>폼 요소</form>
form 태그 속성
name 자바스크립트로 폼을 제어할 때 사용하는 폼 이름 지정
id 자바스크립트로 폼을 제어할 때 사용하는 폼 이름 지정
method 폼 요소 내용을 서버쪽 프로그램에 넘겨주는 방식 지정
get 256 ~ 4096byte 서버로 전송 가능
웹 브라우저 주소 표시줄에 사용자가 입력한 내용이 표시 됨
post 입력한 내용의 길이에 제한을 받지 않음
웹 브라우저 주소 표시줄에 내용 표시 않됨
action form 태그 안의 내용을 처리해 줄 서버 프로그램을 지정
<filedset>, <legend> 폼 요소를 그룹으로 묶음
<filedset><legend>그룹 이름</legend></filedset>
<label> 폼 요소에 레이블을 붙이는 태그
<input> 사용자 입력을 위한 태그
input 태그의 type 속성
-------------------------
텍스트와 비밀번호 type="text", type="password"
size 화면에 보여지는 글자 제한 size="5"
value 텍스트필드 요소가 화면에 표시될 때 텍스트 필드에 보여주는 내용
maxlength 최대 문자 수 지정
체크 박스와 라디오 type="checkbox", type="submit"
value 선택한 체크 박스나 라디오 버튼을 서버에게 알려 줄 때
넘겨줄 값을 지정, 필수 속성
checked 기본으로 선택하는 항목에 사용, default 는 체크하지 않음
전송, 리셋 버튼 type="submit", type="reset"
submit 폼에 입력한 정보를
form 태크의 action 속성에서 지정한
서버 프로그램으로 전송한다.
reset input 요소에 입력된 내용을 모두 지운다.
value 버튼에 표시할 내용
<input type="submit | reset" value="버튼에 표시할 내용">
이미지 버튼 type="image"
<input type="image" src="이미지 경로" alt="대체 텍스트">
기본 버튼 type="button"
button 타입을 submit 이나 reset 버튼 과 같은 기능은 없고
오직 버튼 형태만 삽입 된다.
버튼을 클릭해서 자바스크립트를 실행할 때 사용한다.
<input type="button" value="버튼에 표시할 내용">
<input type="button" value="공지창열기" onclick="window.open('notice.html')">
파일을 첨부하는 type="file"
폼에서 사진이나 문서를 첨부할 때 사용
file 타입을 사용하면 웹 브라우저 화면에 파일선택, 찾아보기 버튼이 표시되면
이 버튼을 클릭하고 파일을 선택하면 파일이 첨부 된다.
히든 필드 type="hidden"
히든 필드는 화면의 폼에는 보이지 않지만
사용자가 입력을 하면 폼과 함께 서버로 전송되는 요소이다.
사용자에게 굳이 보여 줄 필요는 없지만
관리자가 알아야 하는 정보는 히든 필드로 입력한다.
<input type="hidden" name="이름" value="서버로 넘길 값">
input 태그의 주요 속성
--------------------------
autofocus 속성
페이지 로딩시 폼에서 원하는 요소에 마우스 포인터를 표시
placehoder 속성
사용자가 텍스트를 입력할 때 입력란에 적당한 힌트 내용을 표시
readonly 속성
사용자가 입력하지 못하게 하고 읽게만 하는 읽기 전용 필드
readonly
readonly="true"
required 속성
필수 입력 필드
내용을 폼에 입력 후 submit 할 때 필드 내용이 채워졌는지 체크
폼에서 사용하는 태그 들
---------------------------
<textarea> 태그
텍스트를 여러 줄 입력하는 태그
cols 가로 너비를 문자 단위로 지정
rows 세로 길이를 줄 단위로 표시,
지정한 숫자보다 줄 개수가 많으면 스크롤 생김
<select>, <option> 태그
사용자가 내용을 직접 입력하지 않고 옵션 중에서
선택하게 하는 드롭다운 목록이나 데이터 목록
옵션 태그 value 속성을 이용해 서버로 넘겨주는 값 지정
select 속성
size 화면에 표시할 드롭다운 항목의 개수 지정
multiple 드롭다운 목록에서 둘 이상의 항목을 선개할 때 사용
option 속성
value 해당 항목을 선택할 때 서버로 넘겨줄 값을 지정
selected 드롭다운 메뉴를 삽입할 때 기본적으로 선택해서 보여 줄 항목 지정
<button> 태그
ipupt 태그의 button 타입과 같은 기능
button 태그의 type 속성은 submit, reset, button이 있는데
지정하지 않으면 submit 속성을 선택한 것으로 한다.
button 속성
submit input type="submit" 같은 기능
reset input type="reset" 같은 기능
button input type="button" 같은 기능
CSS 기본
======================================
스타일 스타일 시트
------------------
스타일 형식
-------------
선택자 { 속성1: 속성값1; 속성2: 속성값2; }
<p> 태그에 스타일 적용하기
/*
CSS 주석
*/
p {
text-align: center; /* 한 줄 주석 */
color: blue;
}
p : 선택자
{} : 블럭
text-align : 텍스트 정렬 속성
: 구분자
center : 텍스트 정렬 속성
; 문장 종결
color : 글자색 속성
: 구분자
blue : 값 : 글자색 속성
; 문장 종결
스타일 시트
---------------
스타일 시트
브라우저 기본 스타일
사용자 스타일
인라인 스타일
내부 스타일 시트
외부 스타일 시트
브라우저 기본 스타일
웹 브라우저에 웹 문서를 표시할 때 브라우저에서 기본으로 사용하는 스타일
인라인 스타일
style 속성을 사용해 필요한 요소에 스타일을 직접 지정
내부 스타일 시트
문서 앞부분에서 문서에서 사용하는 스타일을 모아서 함께 정의
외부 시트일 시트
문서에서 사용하는 스타일을 모아서 따로 파
일로 저장한 후 연결해서 사용
CSS 기본 선택자
-----------------------------
전체 선택자 universal selector
문서의 모든 요소에 스타일 적용
* { 스타일 규칙 }
* { margin: 0;}
타입 선택자 type selector
특정 태그를 사용한 모든 요소에서 스타일을 적용
태그 { 스타일 규칙 }
p { font-style: italic; }
클래스 선택자 clss selector
특정 부분만 선택해서 문서 안에 여러 번 적용, 도트연산자(.)를 붙여서 사용
.클래스명 { 스타일 규칙 }
.bg { background-color: #ddd; }
<h1 class="bg">레드향</h1>
id 선택자 id selector
특정 부분만 선택해서 문서 안에서 한 번만 사용, ?#)을 붙여서 사용
#아이디명 { 스타일 규칙 }
#container { width: 500px; }
<div id="container"></div>
그룹 선택자
여러 요소에 같은 스타일을 적용
선택자1, 선택자2 { 스타일 규칙 }
h1, h2 { text-align: center; }
7교시 (16:30-17:20)
- html5_2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>웹 문서 만들기</h1>
<h2>웹 문서 만들기</h2>
<h3>웹 문서 만들기</h3>
<h4>웹 문서 만들기</h4>
<h5>웹 문서 만들기</h5>
<h6>웹 문서 만들기</h6>
</body>
</html>- html5_3
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
<style>
table, th, td {
border:1px solid #ccc;
border-collapse: collapse;
}
th, td { padding:10px 20px; }
</style>
</head>
<body>
<img src="/firstWeb/images/link.png" alt="레드향">
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
<p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해<br> <strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>
<hr>
<h2>레드향 샐러드 레시피</h2>
<p><b>재료 : </b>레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
<p><b>드레싱 : </b>올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>
<ol>
<li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li>
<li>레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.</li>
<li>드레싱 재료를 믹서에 갈아줍니다.</li>
<li>볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
</ol>
<img src="/firstWeb/images/salad.jpg" width="320">
<hr>
<h2>상품 구성</h2>
<table>
<caption>선물용과 가정용 상품 구성</caption>
<tr>
<th>용도</th>
<th>중량</th>
<th>갯수</th>
<th>가격</th>
</tr>
<tr>
<td>선물용</td>
<td>3kg</td>
<td>11~16과</td>
<td>35,000원</td>
</tr>
<tr>
<td>선물용</td>
<td>5kg</td>
<td>18~26과</td>
<td>52,000원</td>
</tr>
<tr>
<td>가정용</td>
<td>3kg</td>
<td>11~16과</td>
<td>30,000원</td>
</tr>
<tr>
<td>가정용</td>
<td>5kg</td>
<td>18~26과</td>
<td>47,000원</td>
</tr>
</table>
</body>
</html>8교시 (17:30-18:30)
- html5_4
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
<style>
table, th, td {
border:1px solid #ccc;
border-collapse: collapse;
}
th, td { padding:10px 20px }
</style>
</head>
<body>
<img src="/firstWeb/images/tangerines.jpg" alt="레드향">
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
<p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로 <br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해 <br> <strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>
<hr>
<h2>레드향 샐러드 레시피</h2>
<p><b>재료 : </b>레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
<p><b>드레싱 : </b>올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>
<ol>
<li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li>
<li>레드향과 아보카도, 토마토를 먹기 좋은 크기로 썰어둡니다.</li>
<li>드레싱 재료를 믹서에 갈아줍니다.</li>
<li>볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
</ol>
<img src="/firstWeb/images/salad.jpg" width="320">
<hr>
<h2>상품 구성</h2>
<table>
<caption>선물용과 가정용 상품 구성</caption>
<colgroup>
<col style="background-color:#eee;"
<col span="2" style="width:150px">
</colgroup>
<thread>
<th>용도</th>
<th>중량</th>
<th>갯수</th>
<th>가격</th>
</thread>
<tbody>
<tr>
<td rowspan="2">선물용</td>
<td>3kg</td>
<td>11~16과</td>
<td>35,000원</td>
</tr>
<tr>
<td>5kg</td>
<td>18~26과</td>
<td>52,000원</td>
</tr>
<tr>
<td rowspan="2">가정용</td>
<td>3kg</td>
<td>11~16과</td>
<td>30,000원</td>
</tr>
<tr>
<td>5kg</td>
<td>18~26과</td>
<td>47,000원</td>
</tr>
</tbody>
</table>
</body>
</html>- 공부방법 추천
- 비전공자의 코딩 이야기 : App Store 스토리
Notes
- url, uri 공부
- 브라우저는 어떻게 작동하는가 문서 작성
- 어떻게 돌아가는지 파악
728x90
'국비지원교육 (22.01-22.07) > 강의노트' 카테고리의 다른 글
| 22-03-24(목) 039일차 [HTML, JavaScript] (0) | 2022.05.14 |
|---|---|
| 22-03-23(수) 038일차 [HTML, JSP, CSS] HTML과 폼 태그, JSP, CSS 활용법 (0) | 2022.05.12 |
| 22-03-21(월) 036일차 [HTML, JSP] Tomcat 다운로드 및 플러그인, HTML (0) | 2022.05.12 |
| 22-03-18(금) 035일차 [Java, Oracle, Network] 웹이란 (0) | 2022.05.11 |
| 22-03-17(목) 034일차 [Java] RFP, 회원 ISUD 구현하기 (0) | 2022.05.11 |