D:
Java
lib
workspace
Web
lib
workspace
HTML
클라이언트( HTML / CSS / JavaScript / AJax / jQuery)는 서비스를 요청하고
서버(Servlet / JSP / PHP)가 응답해서 서비스를 처리한다.
데이터가 발생하면 데이터베이스에 데이터를 저장하게 된다.
Tomcat(서버용 프로그램) - Servlet, JSP을 담아주는 컨테이너 역할
Component(도구)
- 연필, 샤프(글씨 쓰려할 때)
- 망치, 못
Container
- 필통
- 공구함
NodeJS(간단하게 클라이언트용 프로그램 처리할 때) - Servlet, JSP할 때 안 됨.
1. apache-tomcat-9.0.93.exe 다운로드
Apache Tomcat® - Welcome!
The Apache Tomcat® software is an open source implementation of the Jakarta Servlet, Jakarta Pages, Jakarta Expression Language, Jakarta WebSocket, Jakarta Annotations and Jakarta Authentication specifications. These specifications are part of the Jakarta
tomcat.apache.org
2. apache-tomcat-9.0.93.exe 설치
3. 서비스
오라클 톰캣
실행 중지
자동 수동
4. 확인
C:\Tomcat 9.0
C:
Tomcat 9.0
bin
Tomcat9.exe
Tomcat9w.exe
5. 실행
URL
http://localhost:8080/index.jsp
C:
Tomcat 9.0
bin
Tomcat9.exe
Tomcat9w.exe
webapps
ROOT (Context) ----> 이클립스에서 Project와 같은 의미
<html>
<head>
<meta charset = "UTF-8">
</head>
<body>
Hello 수민 !!
</body>
</html>
파일명은 대소문자 구별함.
hello.html
C:
Tomcat 9.0
bin
Tomcat9.exe
Tomcat9w.exe
webapps
ROOT (Context) ----> 이클립스에서 Project와 같은 의미
hello.html
http://localhost:8080/hello.html
이클립스
1. Tomcat 연결
2. 모든 한글 => UTF-8로 맞춰야한다. (euc-kr로 가지고 있다.)
전부 다 UTF-8로 바꾸면 된다.
Dynamic Web Project :
Folder : webapp
html
exam01.html
html5
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML 연습</title>
</head>
<body>
<!-- font 태그 사용법 -->
<div><!-- 화면 1줄 영역 -->
<font size="1">크기=1</font><br/>
<font size="3" color="#ff6600">크기=3 색상=오렌지</font><br/>
<font size="5" face="맑은고딕">크기=5 글꼴=맑은고딕</font><br/>
<font size="7" color="#0000ff" face="궁서">크기=7, 색상=파랑, 글꼴=궁서</font><br/>
</div>
</body>
</html>
<font>
글꼴 속성(attribute)
태그마다 속성이 다르다. 사이즈, 컬러, 글꼴
br태그 - 다음 줄로 내려가게 함.
*영역<div> - 화면의 한 줄 영역을 차지함.<p> - 줄바꿈 → width, height 속성 있음.<span>
→ width, height 속성 없음.
*css의 특징변수 : 값; (세미콜론으로 마무리)JSON과 똑같지만 다른 점은 { 변수 : 값, 변수 : 값;}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML 연습</title>
</head>
<body>
<!-- font 태그 사용법 -->
<div style="border: 3px solid blue;"><!-- 화면 1줄 영역 -->
<font size="1">크기=1</font><br/>
<font size="3" color="#ff6600">크기=3, 색상=오렌지</font><br/>
<font size="5" face="맑은고딕">크기=5, 글꼴=맑은고딕</font><br/>
<font size="7" color="#0000ff" face="궁서">크기=7, 색상=파랑, 글꼴=궁서</font><br/>
</div>
</body>
</html>
[ font 태그 사용법 ]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML 연습</title>
</head>
<body>
<!-- font 태그 사용법 -->
<div style="border: 3px dotted blue;"><!-- 화면 1줄 영역 -->
<font size="1">크기=1</font><br/>
<font size="3" color="#ff6600">크기=3, 색상=오렌지</font><br/>
<font size="5" face="맑은고딕">크기=5, 글꼴=맑은고딕</font><br/>
<font size="7" color="#0000ff" face="궁서">크기=7, 색상=파랑, 글꼴=궁서</font><br/>
</div>
</body>
</html>
[ font 태그 중첩 사용 ]
<!-- font 태그 중첩 사용 -->
<div>
<font size="3" color="#003300" face = "굴림">
폰트태그는
<font size="5" color="#ff0000" face="궁서">중첩사용</font>
도 가능합니다.
</font>
</div>
[ 글자의 모양 ]
<!-- 글자의 모양 -->
<div>
<strong>글자를 굵게 표시합니다.</strong>
<br/>
<u>글자에 밑줄을 표시합니다.</u>
<br/>
<i>글자를 기울임 표시합니다.</i>
<br/>
<strong><u><i>글자의 모양을 의미하는 태그 역시 중첩이 가능합니다.</i></u></strong>
</div>
[ 단어나 문장의 영역 지정 ]
<!-- 단어나 문장의 영역 지정 -->
<div>
<span style="border: 1px solid magenta">SPAN</span>태그는
<span>문장 단위로 텍스트 영역을 지정하는 것</span>인데,
그 자체로는 아무 역할도 하지 않고,
문장의 특정 구역에 <span>CSS스타일</span>을 지정할 때 사용합니다.
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML 연습</title>
<style type="text/css">
div {
border: 1px solid red;
}
</style>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML 연습</title>
<style type="text/css">
div {
border: 1px solid red;
}
span {
border: 1px dotted blue;
font-weight: bold;
color: 000000; /*검정색*/
font-style: italic;
text-decoration: underline;
}
</style>
</head>
<body>
[ 이미지 삽입 ]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 이미지 태그 사용법 -->
<div>
<img src="http://localhost:8080/HTML5/image/img1.gif" alt="망상토끼"/>
</div>
</body>
</html>
<!--
URL
http://localhost:8080/Context명/폴더명/파일명
절대번지
http://localhost:8080/HTML5/image/img1.gif
-->
이건 절대번지 방법
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 이미지 태그 사용법 -->
<div>
<img src="http://localhost:8080/HTML5/image/img1.gif" alt="망상토끼" />
</div>
<!-- 이미지 크기 지정 -->
<div>
<img src="../image/img1.gif" width="200" height="200" alt="망상토끼" />
</div>
</body>
</html>
<!--
URL
http://localhost:8080/Context명/폴더명/파일명
절대번지
http://localhost:8080/HTML5/image/img1.gif
상대번지
../image/img1.gif
-->
상대번지 방법 추가한 거 확인하기 / 크기 조정
<!-- 링크 - 이미지를 클릭하면 네이버로 이동 -->
<div>
<a href="https://www.naver.com">
<img src="../image/img1.gif" width="200" height="200" alt="망상토끼" />
</a>
</div><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
border:2px solid red
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
p {
border:2px solid red
}
</style>
</head>
<body>
<!-- 이미지 태그 사용법 -->
<p>
<img src="http://localhost:8080/HTML5/image/img1.gif" alt="망상토끼" />
</p>
<!-- 이미지 크기 지정 -->
<p>
<img src="../image/img1.gif" width="200" height="200" alt="망상토끼" />
</p>
<!-- 링크 - 이미지를 클릭하면 네이버로 이동 -->
<p>
<a href="https://www.naver.com">
<img src="../image/img1.gif" width="200" height="200" alt="망상토끼" />
</a>
</p>
</body>
</html>
<!--
URL
http://localhost:8080/Context명/폴더명/파일명
절대번지
http://localhost:8080/HTML5/image/img1.gif
상대번지
../image/img1.gif
-->
(1) <ul> 비순차적 목록
- Unordered List 의 약자. 세부리스트항목은 <li>태그로 사용
- <li>에는 <br>태그 속성이 포함된다.
<ul type="disc/circle/square">
<li type="disc/circle/square">
</li>
</ul>
(2) <ol> 순차적 목록
- Ordered List의 약자. 순서를 표현하는 방식을 지정할 수 있다.
<ol type="A/a/I/i/1" start="적용할 시작순서">
<li type="A/a/I/i/1" value="적용할 시작순서">
</ol>
--------------------------------
<a target=""></a>
- 새로운 웹페이지를 열 때 사용 된다
- target 에는 _blank, _self, _parent, _top 4가지가 있다.
① _blank
새 윈도우 창을 열어서, 웹페이지가 열린다. 기존의 창은 그대로 남겨져 있다.
② _self
현재 윈도우창에 그대로, 링크된 웹페이지가 열린다. (현재의 프레임)
③ _parent
현재 프레임의 부모 프레임에서 새 웹페이지가 열린다.
만약 어떤 창 A에서 창 B를 새로 열었다.
그런데 창 B에서 _parent로 창을 열면 창 A에서 열리게 된다.
④ _top
최상위 프레임에서 열린다.
_parent와 비슷하지만 _parent는 바로 이전 창(부모창)에서 열리고
_top은 최상위(가장 최고 부모)창에서 열린다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#blank {
height: 1000px;
}
</style>
</head>
<body>
<h1>링크의 기본 사용 방법</h1> <!-- <h1> ~ <h6> 글자크기, 굵게, 줄바꿈 -->
<ul id="menu">
<li type="square"><a href="./exam02-img.html">현재 사이트의 특정 파일로 링크</a></li>
<li><a href="https://www.naver.com" target="_blank">다른 사이트로 링크 (새창)</a></li>
</ul>
<hr/>
<div id="blank">빈 공간</div>
<hr/>
<h1>현재 페이지에서의 링크 이동</h1>
<ul>
<li><a href="#">현재 페이지의 맨 위로 이동</a></li>
<li><a href="#menu">현재 페이지의 특정 위치로 이동</a></li>
</ul>
</body>
</html>
FORM이란?
- 정보를 입력 또는 선택하고 버튼을 클릭하며 정보를 서버에 전달하고 응답받는 양방향의 의사소통을 지원하는 입력양식이다.
- form 의 내부에는 <input>, <select>, <textarea> 등의 태그들이 포함된다.
- name 속성의 값과 유저가 입력한 값이 한 쌍이 되어 서버측에 전달된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form>
<fieldset>
<legend>내용 입력하기</legend>
<div>
<label for="id">아이디</label> <!-- for=""와 id="" 같아야 한다. -->
<input type="text" name="user_id" id="id" maxlength="5" placeholder="아이디 입력" />
</div>
<div>
<label for="user_pw">비밀번호</label>
<input type="password" name="user_pw" id="user_pw" maxlength="20" />
</div>
<div>
<label for="memo">자기소개</label>
<!-- <textarea name="memo" id="memo" maxlength="100"></textarea> -->
<textarea name="memo" id="memo" rows="5" cols="50" maxlength="100"></textarea>
</div>
<div>
<label for="data">숨겨진 항목</label>
<input type="hidden" name="data" id="data" value="숨겨진 데이터" />
</div>
</fieldset>
</form>
</body>
</html>
'HTML CSS JS' 카테고리의 다른 글
| DAY 29 - CSS - 박스 / 테두리 / Position / float / inline / inline-block (2024.08.12) (0) | 2024.08.12 |
|---|---|
| DAY 28 - CSS (2024.08.09) (0) | 2024.08.09 |
| DAY 28 - HTML 연습 (2024.08.09) (0) | 2024.08.09 |
| DAY 27 - HTML - inline / block / div / 커스텀 /video / audio (2024.08.08) (0) | 2024.08.08 |
| DAY 26 - HTML (2024.08.07) - checkbox / radio / select / datalist / file / form / result / table / a태그 (0) | 2024.08.07 |
