요청(html)하는 쪽 - (web) Client
*브라우저
=> url을 통해 요청
---------네트워크(www:인터넷)
응답(html)하는 쪽 - (web) Server
*웹서버프로그램 1.Apache3
2.Nginx
3.iis
<= HTML파일 전송
[Web Server]
1. jsp => Apache-Tomcat 웹서버
tomcat.apache.org
1) apache-tomcat을 다운 받은 후 zip파일 풀기
2) 압축파일 푼 경로를 복사해 cmd 에 cd명령어로 이동하기
> cd C:\html\apache-tomcat-9.0.78\bin
3) bin 파일 안에 있는 catalina.bat을 run 하기
C:\html\apache-tomcat-9.0.78\bin> catalina.bat run
[ URL ]
http://localhost:8080/ 들어가서 웹서버 구동 확인
http - protocol(전송규약)
hyper text(html) transfer protocol
localhost - 도메인: 원격 컴퓨터 주소 (127.0.0.1)
8080 -> 포트(프로그램별 주소)
디폴트 포트 생략가능
http:80
https:443
https://www.daum.net:443/ -> https는 보안이 되어있는 url
https://search.daum.net/search?w=tot&DA=YZR&t__nil_searchbox=btn&sug=&sugo=&sq=&o=&q=rha (검색을 했을 때의 url) search가 붙으면서 검색을 하기 위한 모드로 변경된다.
http://127.0.0.1:8080/ex01.html --> 로컬호스트 톰켓으로 생성한 html
네트워크 카드: 2개 ip
1) localhost(127.0.0.1) - 루프백
2) 외부 제공되는 아이피 (cmd에서 ipconfig로 네트워크상의 개인 아이피 확인가능)
- 네트워크를 공용으로 사용 시 아파치 톰켓에 의해서 다른 네트워크 ip의 html내용을 알 수 있다.
- 문서 내용의 공개를 위해서 사용함
http://192.168.0.24:8080/html/ex01.html
-> root 디렉토리 안에 html디렉토리 만들고 html파일을 생성한 후 url을 변경하면 해당 경로에 있는 html이 등장하게 된다..!
2. jdk (선수조건)
Window 환경설정
JAVA_HOME
C:\Program Files\Java\jdk-17 --> 해당 경로에 jdk가 설치되어 있음을 알려줘야 한다. (환경 변수 편집 - 시스템 환경변수)
cmd 다시 열어서 환경변수 옳게 편집되었는지 확인
> echo %JAVA_HOME%
html/css/javascript =>인터넷에서 논문(퍼블리싱)에 대한 공유
[html문법]
https://www.w3schools.com/
- HTML stands for Hyper Text Markup Language
- HTML is the standard markup language for creating Web pages
- HTML describes the structure of a Web page
- HTML elements tell the browser how to display the content
태그 모음
<html>
<head>
<title>
<meta>
<body>
<br />
<h1> ~ <h6>
<p>, <div>, <span>
<blockquote>, <pre>
<b>, <i>, <sub>, <sup>
<ul>, <ol>, <li>, <dl>, <dt>, <dd>
<table>, <tr>, <th>, <td>
<hr />
1. 색이름 - red, blue
2. rgb값( RED, GREEN ,BLUE ) - 16진수
Red: 0-255Green: 0-255Blue: 0-255#FFFFFF
*표 모양과 색 적용
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body bgcolor="#c5493d"> <!--backgroundcolor-->
<!--table
cellpadding: 표 박스 안의 내용에 상하좌우로 마진이 생김
cellspacing: 표 박스 밖에 상하좌우로 마진이 생김
cellspacing을 0으로 주면 표 모양이 나옴
-->
<table border="1" cellpadding ="20" cellspacing ="0" bgcolor="#00ff00">
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
<td>1행 3열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
<td>2행 3열</td>
</tr>
<tr>
<td>3행 1열</td>
<td>3행 2열</td>
<td>3행 3열</td>
</tr>
</table>
</body>
</html>
*열/행 병합
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<!--table-->
<table border="1" width="800" height ="300">
<tr>
<td >1행 1열</td>
<td>1행 2열</td>
<td>1행 3열</td>
</tr>
<tr>
<td colspan="2">2행 1열</td> <!--colspan을 주어 열 병합이 가능하다 (병합되는 열은 지우기)-->
<td>2행 3열</td>
</tr>
<tr>
<td colspan="3">3행 1열</td>
</tr>
</table>
<table border="1" width="800" height ="300">
<tr>
<td rowspan="2">1행 1열</td>
<td>1행 2열</td>
<td rowspan="3">1행 3열</td>
</tr>
<tr>
<!--rowspan을 주어 행 병합이 가능하다 (병합되는 행을 지우기..지울 위치중요..) -->
<td>2행 2열</td>
</tr>
<tr>
<td>3행 1열</td>
<td>3행 2열</td>
</tr>
</table>
</body>
</html>
[IMAGE]
- jpg: 사진류
- gif: 일러스트레이터
- png: jpg, gif의 특성을 합침(현재 인터넷에서 많이 쓰임)
- 절대경로 : 드라이브에 이미지를 저장했을 시, 저장된 드라이브명을 사용하여 이미지 경로를 지정해줌 -> C:\html\test.png (근데 잘 안씀 ㅎ)
- 상대경로 : html파일부터 (..(부모)/.(현재)) ->.\images\test.png
- 웹경로: url -> http://localhost:8080/images/test.png
*경로 지정을 통한 이미지 불러오기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<!--<body background="http://localhost:8080/html/images/bg.PNG" >--> <!--웹경로-->
<!-- 웹 페이지에 이미지 붙이기
이미지 사이즈가 작으면 반복
-->
<body>
<table border="1" cellpadding ="20" cellspacing ="0" width="400" > <!--상대경로로 호출함-->
<tr >
<td background="http://localhost:8080/html/images/bg.PNG">1행 1열</td>
<td>1행 2열</td>
<td>1행 3열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
<td>2행 3열</td>
</tr>
<tr>
<td>3행 1열</td>
<td>3행 2열</td>
<td>3행 3열</td>
</tr>
</table>
</body>
</html>
1. background 배경 - 디자인 (background 속성 사용)
2. image - 데이터 (<img> 태그 사용)
ex) <img src="경로">
웹페이지 이름 옆 아이콘 = 파비콘 .ico
<caption> - 테이블 위 아래로 제목글을 작성할 수 있음
*링크 통해서 이미지 불러온 후 속성값 설정
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<img src="./images/DAUM.png" />
<br />
<hr/>
<img src="./images/DAUM.png" width="360" height="188"/> <!--이미지 속성값으로 정해줌-->
<img src="./images/DAUM.png" height="188"/> <!--하나만 정해도 자동으로 맞춰줌-->
<img src="./images/DAUM.png" width="360" />
<img src="./images/DAUM.png" width="180" height="188"/>
<hr/>
<img src="./images/DAU1M.png" alt="새로운 이미지"/> <br /> <!--이미지에 대한 알림글-->
</body>
</html>
html
hyper text -링크(문서간의 연결법)
markup language
*그 외의 다양한 속성들
1.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<!--상대 경로-->
<a href="./ex02.html">ex02 바로가기</a> <br /> <br />
<!--웹 경로-->
<hr />
<hr />
<!--브라우저 알 수 있는 파일형식 - 뷰어 -->
<a href="http://localhost:8080/html/images/DAUM.png"><img src ="./images/DAUM.png" width="100"/><img</a>
<hr />
<!-- 다운로드의 원리 -->
<a href="./images/images.7z"><img src ="./images/DAUM.png" width="100"/> </a>
<hr />
<hr />
</body>
</html>
2.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<!--
프레임 생성
iframe
-->
머리글 <br />
<!-- <iframe src="./ex03.html" width="500" height="200" frameborder="0"></iframe> <br />-->
꼬리글 <br />
</body>
</html>
3.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<!--
즐겨찾기와 다음 페이지를 로드할 수 있도록 함
-->
<table border="1" width="1500" cellspacing="0">
<tr>
<td width="150" valign="top">
<ul>
<li><a href="https://www.etnews.com" target="_blank" >전자신문</a></li> <!--target을 통해 지정 프레임에 화면이 나타나도록 설정할 수 있음-->
</ul>
</td>
<td>
</td>
</tr>
</table>
</body>
</html>
4.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<!--
입력값을 처리하기 위한 폼
-->
<form>
<!--한줄입력 input-->
<input /> <br /><br />
<input type="text"/> <br /><br />
<input type="text" size="50"/> <br /><br />
<input type="text" size="50" maxlength="10"/> <br /><br />
<input type="text" size="50" maxlength="10" value="초기값" readonly/> <br /><br /> <!--readonly:초기값을 바꾸지 못하게 함-->
<input type="text" size="50" maxlength="10" placeholder="값입력"/> <br /><br /> <!--placeholder:힌트기능제공-->
<input type="password"/> <br /><br /> <!--입력 값을 눈에 보이지 않도록 함-->
<!--여러 줄 입력-->
<textarea rows="5" cols="50"></textarea> <br /><br />
<textarea rows="5" cols="50" placeholder="값입력"></textarea><br /><br />
</form>
</body>
</html>
5.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<!--
특수입력
-->
<form> <!--체크박스 다중선택-->
<input type="checkbox"> 사과<br />
<input type="checkbox"> 참외<br />
<input type="checkbox" checked> 수박<br /> <!--디폴트값 지정 가능-->
<input type="checkbox"> 딸기<br />
<br />
<!--체크박스 단일선택-->
<input type="radio" name="radio"> 사과<br /> <!--name을 같게 지정해주면 하나의 그룹으로 판단하여 다중선택이 안되게 된다.-->
<input type="radio" name="radio"> 참외<br />
<input type="radio" name="radio"> 수박<br />
<input type="radio" name="radio" checked> 딸기<br />
<br /> <br /> <br />
<!--select, combo-->
<select>
<option>사과</option>
<option>참외</option>
<option selected>수박</option> <!--디폴트로 선택되어있는 값을 지정할 수 있다-->
<option>딸기</option>
</select>
<br /> <br />
<!--파일 선택: 특정파일을 선택하게 되면 경로이름이 뜨게 된다.-->
<input type="file" /> <br /> <br />
<!--색 선택-->
<input type="color" value="#ff00ff"/><br /> <br />
<!--날짜 선택-->
<input type="date" value="2023-08-04"/><br /> <br />
<!--숫자 선택-->
<input type="number" value="23" min="10" max="30" step="3"/> <br /> <br />
<!--범위 지정-->
<input type="range" min="0" max="100"/> <br /> <br />
</form>
</body>
</html>
6.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<!--
특수입력
-->
<form> <!--입력 목록을 나타내준다.-->
<input type="text" list="browser"/>
<datalist id="browser">
<option value="internet Explorer"></option>
<option value="firefox"></option>
<option value="chrome"></option>
<option value="safari"></option>
</datalist>
</form>
</body>
</html>
7.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<!--
특수입력
-->
<form>
<fieldset>
<legend>회원가입</legend>
<ul>
<li>
<label for="name">이름 </label>
<input type="text" id="name"/> <!--라벨을 지정-->
</li>
</ul>
<ul>
<li>
<label for="email">이메일</label>
<input type="text" id="email"/> <!--라벨을 지정-->
</li>
</ul>
</fieldset>
</form>
</body>
</html>
[Link]
절대경로(X)
상대경로
웹경로
< a href= "연결경로"> 연결 문자열 </a>
*검색결과 화면을 따로 지정해서 링크를 거는 법
- 다음의 경우 작성방법
https://search.daum.net/search? - 처리경로
q=daum
- 코로나 검색 창
https://search.daum.net/search?q=코로나
- 네이버의 경우 작성방법
https://search.naver.com/search.naver? -처리경로
query=대한민국
입력값을 처리하기 위한 폼
<form>입력내용 처리 </form>
내용 전송
http://localhost:8080/html/ex01.html? -->요청 페이지
data1=%E3%85%8E%E3%85%8E -->구분자,값
내용전송 2개일 때
http://localhost:8080/html/ex01.html?
data1=value1&data2=value2 -->구분자1, 값1&구분자2,값2 (쿼리스트링)
다음(Daum) 예제에서의 q=daum 와 같은 맥락이다.
*서치값을 넘기고 결과를 나타내는 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<!--
특수입력
-->
<form action="./ex01.html">
데이터1 <input type="text" name="data1"/> <br /><br />
데이터2 <input type="text" name="data2"/> <br /><br />
<input type="submit" value="전송하기"/> <!--내용 전송-->
</form>
<br />
다음 검색<br />
검색어 <input type="text" name="q" /> <!--위에서 data1을 보낸거와 같이 Daum의 형식에 맞게 q로 설정한다.-->
<input type="submit" value="다음검색" />
</form>
<br /> <br />
네이버 검색<br />
검색어 <input type="text" name="query" />
<input type="submit" value="네이버검색" />
</form>
</body>
</html> <!--넘겨주고 싶은 값이 있으면 폼 안에 작성 박스 여러개 만들고 submit버튼 하나 만들면 박스 안의 내용이 넘어가게 된다.-->
*svg => html안에 그래픽을 표현 (chart)
https://www.w3schools.com/html/html5_svg.asp ->관련내용
<!DOCTYPE html>
<html>
<body> <!--rect, circle-->
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<br /> <br />
<svg width="400" height="100">
<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
<br /> <br />
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
<br /> <br />
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
<br /> <br />
<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
</svg>
<br /> <br />
<svg height="100" width="200">
<rect x="10" y="10" width="400" height="100"
style="fill:aqua; stroke: blue;stroke-width:3;" />
</svg>
</body>
</html>
