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

JSP 강의 정리 2일차

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

[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 용어 정리&기본 틀

(1) HTML

HTML : Hyper Text Markup Language의 약자

하이퍼텍스트(Hyper Text)란 문서를 서로 연결해주는 링크를 의미한다.

마크업(Markup)이란 표시한다. 라는 뜻이다.

웹 브라우저에 내용을 보여주는 텍스트, 이미지 등의 위치를 표시하는 것을 의미.

태그의 기본 형식

<태그이름>문서의 내용</태그이름>

 여는태그                        닫는태그

 

(2) HTML 기본 틀

<!DOCTYPE html> 현재 문서가 HTML5 언어로 작성한 웹 문서라는 뜻
<html> html문서의 시작
<head> 페이지의 속성과 정보를 설정
<meta charset=“UTF-8”> 페이지를 UTF-8로 인코딩 지정
<title> 타이틀 </title> (페이지 제목)
</head>
<body> 웹 브라우저에 실제로 보여질 내용
</body>
</html> html문서의 끝

 

[2-2] HTML 태그

() HTML 태그

문자 세트를 비롯해 문서정보가 들어있는 태그 흔히 메타정보라고 하면 ‘데이터에 관한 데이터'를 말한다. 책의 메타 정보로 가 격, 쪽수, 지은이 등이 있는 것처럼 웹 문서의 태그는 웹브라우저에는 보 이지 않지만 웹 문서와 관련된 정보를 지정할 때 사용한다. 태그의 가장 중요한 역할은 화면에 글자를 표시할 때 어떤 인코딩을 사용 할지 지정하는 것이다. 웹 서버는 영어가 기본이므로 화면에 한글로 된 내용을 표 시할 때에는 UTF-8 이라는 문자세트를 사용한다고 알려줘야 한다.

 

(1) <h1>~<h6 > 태그

<body>
<br/> 줄개행
<h1></h1> 제목태그 h1태그가 가장 글자크기가 크고 h6가 가장 작다
<a href=“#”></a>
페이지 링크를 걸려면 a태그를 사용한다.
a태그의 href속성을 사용하여 연결할 페이지의 주소를 적는다.
<hr/> 구분선을 만드는 태그
</body>

 

html 코드 예제)

ex01.html

<!-- HTML 주석 -->

<!DOCTYPE html> <!-- 현재 문서가 HTML5로 작성한 웹문서 -->
<html> <!-- HTML 시작 -->
<head> <!-- 페이지 속성과 정보를 설정 -->
<meta charset="UTF-8"> <!--  페이지를 UTF-8 인코딩 지정 -->
<title>Hello JSP!</title><!-- 웹 페이지의 제목을 나타낸다. -->
<!-- 웹 페이지의 본문에는 보이지 않으며, 브라우저의 탭 등에서 확인할 수 있다. -->
</head>
<body> <!-- 웹 브라우저에 실제로 보여질 내용 -->
	
	<!-- h1 ~ h6 태그는 제목을 나타낼때 사용한다. -->
	<h1>제목1</h1>
	<h2>제목2</h2>
	<h3>제목3</h3>
	<h4>제목4</h4>
	<h5>제목5</h5>
	<h6>제목6</h6>
	
</body>
</html><!-- HTML 끝 -->

 

(2) html 코드 예제<p> 태그, <pre> 태그 기타 태그 

<body>
<P>내용</p>
<p>와</p>태그 사이에 텍스트를 입력하면 텍스트 앞뒤로
빈 줄이 생기면서 텍스트 단락이 만들어진다.
<br/>태그를 두 번 사용하면 텍스트 단락이 나뉜 것처럼 표시할 수 있다.
하지만 실제로는 단락이 만들어진게 아니므로 CSS를 사용해 텍스트
단락 스타일을 적용할 때 문제가 생긴다.
</body>

html 코드 예제)

ex02.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h2>문단 태그 p태그</h2>
	
	<!-- p태그는 하나의 문단을 의미한다. -->
	
	<p> p태그 입니다. </p>
	<!-- HTML은 스페이스와 엔터를 여러번 입력해도
	하나의 공백으로 인식한다. -->
	<p> p태그는 단락을
	
		나누는			문단태그
		
		입니다.
	</p>

	<p>안녕<br />하세요</p> <!-- br태그는 줄바꿈 태그 -->
	
	<p>
		&lt;br&gt;
		치킨 &amp; 족발은 먹어도 질리지 않는다.
		이것은 &nbsp;&nbsp;&nbsp;&nbsp; 공백 문자이다.
	</p>
	
	<!-- 
		&lt; 는 특수문자 < 표현
		&gt; 는 특수문자 >표현
		&amp; 는 특수문자 & 표현
		&nbsp; 는 한칸의 공백을 표현
	-->
	
	<pre>
	입력한 그대로			보여주는
	 		pre 태그
	입니다.
	</pre>
	
	<!--
	pre 태그는 이미 정의된 형식의 텍스트를 정의할 때 사용하는 태그
	텍스트에 사용된 여백과 줄바꿈이 모두 그대로 웹브라이저 화면에 나타난다.
	-->
	
</body>
</html>

 

(3-1) strong 태그, b 태그, em 태그, i 태그

<body>
<strong>굵게 강조할 텍스트<strong>
<b>굵게 표시할 텍스트</b>
<strong> 태그와 <b> 태그는 글씨를 굵게 표시할때 사용한다.
두 태그의 차이점은 낭독기가 <strong> 태그를 사용한 부분을
강조하여 읽어준다.
</body>

 

html 코드 예제)

ex03.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h2>b태그와 strong 태그</h2>
	<!-- 굵게 표시할 텍스트는 strong / b 태그를 사용한다. -->
	<b>b태그 입니다.</b><br>
	<strong>strong 태그 입니다.</strong>
	
</body>
</html>

 

(3-2) em 태그, i 태그, small 태그, del 태그, ins 태그

<body>
<em>이탤릭체로 강조할 텍스트</em>
<i>이탤릭체로 표시할 텍스트</i>
<em> 태그와 <i> 태그는 텍스트를 기울여 표시할 때 사용한다.
</body>

 

html 코드 예제)

ex03-2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>i태그와 em태그</h2>
	<!-- 이텔릭체로 표시할 텍스트는 i / em 태그를 사용한다. -->
	<i>i 태그 입니다.</i><br>
	<em> em 태그 입니다.</em><br>
	
	<hr>
	<h2>mark, small, del, ins 태그</h2>
	
	<mark>mark태그 입니다.</mark><br>
	
	<small>small태그 입니다.</small><br>
	
	<del>del 태그 입니다.</del><br>
	
	<ins>ins 태그 입니다.</ins><br>
</body>
</html>

 

(4) ol 태그, li 태그

<body>
<ol> 순서있는 목록(ordered list)을 나열할 때 사용한다.
<li>항목 1</li> li 는 list의 줄임말이다.
<li>항목 2</li>
</ol>
</body>

 

html 코드 예제)

ex04.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h2>순서없는 목록</h2>
	<ul>
		<li>자바</li>
		<li>JSP</li>
		<li>HTML</li>
	</ul>

	<h2>순서있는 목록</h2>
	<ol>
		<li>자바</li>
		<li>JSP</li>
		<li>HTML</li>
	</ol>

</body>
</html>

 

(5) table 태그, caption 태그, tr 태그,td 태그

<body>
<table> table태그는 표를 작성하는 태그
<caption>표 제목</caption> 표의 제목을 붙이는 태그
<tr> table태그의 <tr>은 표의 행을 나타낸다.
<td></td> <tr>의 td는 한 행에 들어갈 열들을 나타낸다.
<td></td>
</tr>
</table>
</body>

 

html 코드 예제)

ex05.html

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

	<h2>테이블 태그 - table</h2>

	<!-- 
		<태그이름 속성="속성값" >
	 -->

	<table border="1">
	
		<caption>프로필</caption>
		
		<tr>
			<th>no.</th>
			<!-- 제목 헤드 -->
			<th>name</th>
			<th>email</th>
			<th>tel</th>
		</tr>
		
		<tr>
			<td>1</td>
			<td>홍길동</td>
			<td>hong@naver.com</td>
			<td>010-1111-2222</td>
		</tr>
		
		<tr>
			<td>2</td>
			<td>성춘향</td>
			<td colspan="2">sung@gmail.com, 010-2222-3333</td>
			<!-- 열 합치기 -->
		</tr>

		<tr>
			<td rowspan="2">3</td>
			<td>이순신</td>
			<td>lee@naver.com</td>
			<td>010-3333-5555</td>
		</tr>

		<tr>
			<td>이몽룡</td>
			<td>mong@naver.com</td>
			<td>010-6666-7777</td>
		</tr>

	</table>
</body>
</html>

 

 

(6) 인라인 속성, 블록 속성

ex06.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	
	<!-- 
		인라인 속성은 개행하지 않고 한 줄에 다른 요소들과 함께 있으려는 속성
		블록 속성은 하나의 태그가 그 자체로 한줄을 완전히 차지하는 속성
		인라인 속성의 태그들은 너비, 높이, 마진 들의 CSS 속성이 정상적으로 작동하지 않는다.
		블록 속성의 태그들은 CSS 값들이 정상적으로 적용이 된다.
		태그 속성을 둘로 나누면 크게 인라인 속성과 태그 속성이 있다.
	 -->
	 
	 <h2>인라인 태그 - span</h2>
	 
	 <span>Hello</span> <span>JSP</span>
	 
	 <hr>
	 
	 <h2> 블록 태그 - div </h2>
	 
	 <div>Hello</div> <div>JSP</div>
	 
</body>
</html>

(7) a href 태그

<body>
<a href="링크할 주소“ target=“_blank”>텍스트 또는 이미지</a>
링크를 삽입하는 <a>태그
</body>
텍스트를 사용하면 텍스트 링크가 되고 이미지를 사용하면 이미지 링크가 된다.
텍스트나 이미지 링크를 클릭하면 현재 열려있는 웹 브라우저 창에서 새로운 문서
나 나타난다. 이러한 번거로움을 줄이기 위해 target 속성에 _blank 를 지정하면 링
크를 클릭했을 때 연결된 문서가 새 탭에서 열린다.

 

html 코드 예제)

ex07.html

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

	<h2>링크 - a 태그</h2>

	<!-- a 태그는 하나의 페이지에서 다른 페이지를 연결할 때 사용한다. -->
	<!-- href 태그는 문서를 연결할때 쓰는 태그 -->
	<a href="https://www.naver.com">네이버로 이동</a><br>
	
	<!-- a태그를 사용해서 구글과 다음 사이트로 이동하여 보자 -->
	<a href="https://www.google.com" target="_blank">구글로 이동</a><br>
	<a href="https://www.daum.net">다음으로 이동</a>


</body>
</html>

 

(8) img 태그

<body>
페이지 내부에 이미지 삽입은 img태그를 사용한다.
img태그의 src속성에 이미지파일의 경로를 지정한다.
<img src=“이미지 파일 경로” alt=“대체용 텍스트”/>
절대경로 : D:\img\Pororo.jpg
상대경로 : 현재 위치에서 하위폴더로 가는 경우 : 폴더이름/Pororo.jpg
현재 위치에서 상위폴더로 가는 경우 : ../Pororo.jpg
</body>
<body>
<img src=“Pororo.jpg” alt=“뽀로로” width=“300” height=“250” />
이미지 크기를 조절하고 싶으면 width, height 속성을 사용한다.
</body>

 

html 코드 예제)

ex08.html

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

	<!-- 절대 경로와 상대 경로
	절대 경로 : 루트에서 부터
	상대 경로 : 내 위치에서 부터 찾아가는거
	 -->
	
	<h2>이미지 - img 태그</h2>
	
	<!-- 
		절대 경로 : / 를 붙이고 ContextPath(프로젝트명)를 표기해야 한다.
	 -->	

	<img alt="선셋" src="/JSP01/img/sunset.jpg" width="500" height="450">

	<!--  상대경로 : 현재 내 위치부터 찾아간다. -->

	<img alt="선셋" src="../img/sunset.jpg" width="300" height="450">

</body>
</html>

 

[] 트러블 슈팅

런타임에서 Apache Tomcat이 체크가 안되어있어서 오류 발생 Apache Tomcat를 체크해주었다.

반응형

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

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

관련글

티스토리툴바