2024_06_13

오늘의 코딩

<<JSP 까는법>>

apache-tomcat-10.1.17설치>>
이클립스와 연결하기 위해 jsp 폴더 만들고 그 안에 jspSrc17 폴더 만들기>>Java EE로 설정
밑의 Servers창의 파란 링크 클릭
JSP에서는 Java의 package를 폴더 혹은 디렉토리라고 부름, 파일은 main의 webapp에 만듬
파일명은 소문자로 시작, 처음 만들때 html로 만드는 거라 끝에 파일명(.html()을 안붙여도 알아서 파일명이 붙음
- 만약 자바코드를 짤거면 Java resources의 src/main/java에 만듬

<<JSP 실습>>

(폴더: WebStandard01)

01/basic 03
- Window>Web Browser>chrome로 맞추기
- preference의 css,HTML,JSP 다 UTF-8로 맞추기
- <body>에 글 작성하고 제목에 run as>>run on server 누르기>>체크상자 누르고 작업표시줄의 Apache의 stop을 누른 뒤 로딩이 끝나면 finish>>이클립스의 Finish누르면 크롬창에 입력한 글이 나타남
 글을 추가로 입력하면 크롬에서 새로고침을 누르는 것으로도 추가로 입력한 것들이 나타난다
- 이미지 삽입방법: 원하는 폴더가 있는 워크스페이스에 직접(탐색기에서 만드는거 아님!) images폴더 만들고 거기에 사진 넣기!
- //h:header //옆의 숫자는 제목 글자크기
- img뒤에 alt 넣는 이유:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>첫번째 pgm</title>
</head>
<body>
	<h1>시간이란1..</h1>	//h:header //옆의 숫자는 제목 글자크기
	<h2>시간이란2..</h2>
	<h3>시간이란3..</h3>
	<h4>시간이란4..</h4>
	<h5>시간이란5..</h5>
	<h6>시간이란6..</h6>
	1234567
	<p>내일 죽을 것처럼 오늘을 살고 영원히 살 것처럼 내일을 꿈꾸어라</p>
	<img alt="시계이미지1"	src="images/watch.jpg">
	<img alt="시계이미지2"	src="images/watch2.jpg">

</body>
</html>

02/ul
- p: paragraph, 즉 문단의 약자로, 하나의 문단을 만들 때 쓰입니다
- ul: 순서를 변경해도 그 의미가 실질적으로 변경되지 않는다는 의미인UnorderedList(정렬되지 않은 목록)
 <ul> 태그로 마크업 된 목록의 항목은 불릿(•)으로 표시
- li: 목록(list)의 항목(items)을 나타내는 태그

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>관광 안내 전화</h1>
	<p>한국관광공사에서는 전국의 관광안내소와 공동으로 여러분의 여행편의를 위해 
		관광안내전화 1330 서비스를 연중무휴 실시하고 있습니다.</p>
		
		1330에는 해당 지역의 지도와 관광 가이드북, 관광안내소를 대신할 수 
		있을 정도의 다양한 정보가 있습니다. 
		원하는 관광지는 물론이며 숙박, 교통, 음식점 등의 자세한 정보를 한국어를 
		비롯한 영어, 중국어, 일어의 3개 국어로도 이용 가능합니다.
		</p>
	<ul>
		<li>일반 전화 : (국번없이) 1330</li>
		<li>휴대 전화 : 064-1330</li>
	</ul>	

</body>
</html>

02/ol

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>관광 안내 전화</h1>
	<p>한국관광공사에서는 전국의 관광안내소와 공동으로 여러분의 여행편의를 위해 
		관광안내전화 1330 서비스를 연중무휴 실시하고 있습니다.</p>
		
		1330에는 해당 지역의 지도와 관광 가이드북, 관광안내소를 대신할 수 
		있을 정도의 다양한 정보가 있습니다. 
		원하는 관광지는 물론이며 숙박, 교통, 음식점 등의 자세한 정보를 한국어를 
		비롯한 영어, 중국어, 일어의 3개 국어로도 이용 가능합니다.
		</p>
	<ul>
		<li>일반 전화 : (국번없이) 1330</li>
		<li>휴대 전화 : 064-1330</li>
	</ul>	

</body>
</html>

02/textshow
- span: 태그는 span(폭, 범위) 으로 HTML 문서 내에 자신에게 주어진 공간만을 차지하는 태그이며 이 태그 안의 글자를 꾸밀 수 있음
- mark: HTML5에서 새롭게 추가된 요소, mark 태그는 형광펜으로 칠한 것처럼 하이라이트 된 텍스트를 정의할 때 사용

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>야외 텐트를 닮은 건축물 <mark>"테쉬폰"</mark></h1>
	<p>
	아일랜드 출신 임피제 신부가 1954년 제주에 오면서 목장 숙소로 짓기 시작한 후 사료공장, 
	성당으로 활용됐습니다. 제주에서 점차 다른 지방으로 보급됐지만 현재 제주에만 건축물이 남아있으며, 
	<span style="color:orange;">국내 근현대 건축사의 한 페이지를 보여주는 가치를 지닌다</span>고 전문가들은 평가합니다.
	</p>
	


</body>
</html>

02/table01
- ctrl+shift+space:주석처리
- 태그
  - tr (table row) : 행
  - th (table heading) : 행, 열의 제목
  - td (table data) : 행의 내용
  - caption : 표 제목
  - col / colgroup : 스타일 지정을 위한 열(그룹)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- 여러 줄로
		주석
	가능해요 -->
	
	<table border="3">
		<tr>
			<th>제목 셀 </th>
			<td>1행 2열 </td>
			<td>1행 3열</td>
		</tr>
		<tr>
			<th>제목 셀 </th>
			<td>2행 2열 </td>
			<td>2행 3열</td>
		</tr>
	
	</table>
	
</body>
</html>

02/table02
- padding: 셀 테두리와 글자 사이의 간격
- scope="col" / scope="row" 열 또는 행의 제목
- colspan="2" : 2칸 열병합
- rowspan="3" : 3칸 행병합
- span="3" : colgroup의 열의 갯수

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	th,td	{
		padding:10px;
		}
</style>
</head>
<body>
	<h1>개인연락처</h1>
	<table border="1">
		<colgroup>
			<col style="width:100px">
			<col style="width:300px">
			<col style="width:100px">
			<col style="width:300px">
		</colgroup>
		<tr>
			<th>이름</th>
			<td></td>
			<th>연락처</th>
			<td></td>	
		</tr>
		<tr>
			<th>주소</th>
			<td colspan="3"></td>
		</tr>
		<tr>
			<th>주소</th>
			<td colspan="3"></td>
		</tr>	
	</table>

</body>
</html>

02/table03

<!DOCTYPE html>		
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	th,td	{
		padding:10px;
		}
</style>
</head>
<body>
<h3>Modern Browser</h3>
	<table border="1">
		<caption>		<!-- 테이블에 대한 설명을 적은 글을 쓸 때 사용 -->
			<Strong>Modern Browser</Strong>
			<p>국내에서 자주 사용하는 모던 브라우저</p>
		</caption>
		<tr>
			<th>브라우저</th>
			<td>제조업체</td>
			<td>다운로드</td>
		</tr>
		<tr>
			<th>크롬(chrome)</th>
			<td>Google</td>
			<td>https://www.google.com/chrome</td>
		</tr>	
		<tr>
			<th>파이어폭스(Firefox)</th>
			<td>Mozilla</td>
				<td>https://www.mozilla.org/ko/firefox</td>
		</tr>
		<tr>
			<th>엣지(Edge)</th>
			<td>Microsoft</td>
			<td>https://www.microsoft.com/ko-kr/sindows/microsoft-edge</td>
		</tr>
	</table>
</body>
</html>

02/table06
- thead : 머리글
- tfoot : 꼬리말
- tbody : 본문

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>표만들기</title>
	<style type="text/css">
		th, td {
			width:80px;		/* 셀의 넓이 */
			padding:10px;	/* 셀 테두리와 내용 사이의 간격(padding) */	
		}
		thead, tfoot {
			background : gray;	/* thead와 tfoot의 배경색 */
		}
	</style>
	
</head>
	<table border="1">
		<caption>제주특별자치도 학교현황(2015.4.1 기준)</caption>
		<thead>
			<tr>
				<th>구분</th>
				<td>학교수</td>
				<td>학급수</td>
				<td>학생수</td>
				<td>교원수</td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>유치원</th>
				<td>117</td>
				<td>252</td>
				<td>5,547</td>
				<td>474</td>
			</tr>
			<tr>
				<th>초등학교</th>
				<td>111</td>
				<td>1,720</td>
				<td>37,686</td>
				<td>2,632</td>
			</tr>
			<tr>
				<th>중학교</th>
				<td>44</td>
				<td>699</td>
				<td>21,274</td>
				<td>1,412</td>
			</tr>
			<tr>
				<th>고등학교</th>
				<td>29</td>
				<td>676</td>
				<td>22,019</td>
				<td>1,433</td>
			</tr>
			<tr>
				<th>특수학교</th>
				<td>3</td>
				<td>90</td>
				<td>428</td>
				<td>160</td>
			</tr>
		</tbody>
		<tfoot>	
			<tr>
				<th>합계</th>
					<td>300</td>
				<td>3,437</td>
				<td>86,954</td>
				<td>6,111</td>
			</tr>
		</tfoot>	
	</table>
</body>
</html>

02/ Academic
- border: solid: 굵은 선
- border: solid: 점선
- border-collapse: collapse; /* 중복되는 테두리를 한 줄로 표시 */

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<style type="text/css">
		table, th , td {
			border: 1px solid blue;
			border-collapse: collapse;	/* 중복되는 테두리를 한 줄로 표시 */
		}
		
		th, td {
			padding: 15px;
		}	
		thead, tfoot {
			background : #FAED7D;
		}
	</style>
</head>
<body>
	<h2>Academic</h2>
	<table>
		<caption>학력 사항</caption>
		<thead>
			<tr>
				<th>출신학교</th>
				<th>전공</th>
				<th>기간</th>
				<th>졸업구분</th>
			<tr>
		</thead>
		<tbody>	
				<td>ㅇㅇㅇ고등학교</td>
				<td>(해당사항 없음)</td>
				<td>2001.3 ~ 2004.2</td>
				<td>졸업</td>
			</tr>
			<tr>
				<td>ㅁㅁ대학교</td> 
				<td>컴퓨터공학</td>
				<td>2004.3 ~ 2008.2</td> 
				<td>졸업</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td>학교총계</td>
				<td>전공총계</td>
				<td>기간총계</td>
				<td>졸업총계</td>
			</tr>		
		</tfoot>
	</table>
</body>
</html>

02/ resume
-  : 한 줄 띄어쓰기 할 때 사용

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
	<h1>Kyunghee Ko</h1>
	<p>이메일 : funcom@gmail.com</p>
	<h2>Who am I?</h2>
	<p>
	프런트엔드 웹 기술(Front-end Web Tech.)에 관심을 가지고 있습니다.
	현재 마이크로소프트 공인 최고기술전문가(Most Valuable Professional)로 활동 중이며,
	<br>
	제주의 한 시골 마을에서 코딩 중입니다.
	</p>
	<hr>
	<h2>Skills</h2>
	<ul>
		<li>
			사용 언어
			<ul>
				<li><mark>HTML</mark></li>
				<li><mark>CSS</mark></li>
				<li>Javascript</li>
				<li>AngularJS</li>
			</ul>
		</li>
		<li>
			사용 툴
			<ul>		
				<li>Photoshop(12years)</li>
				<li>Dreamweaver(19years)</li>
				<li><b>Visual Studio(5years)</b></li>
			</ul>		
		</li>
	</ul>		
	<h2>Academic</h2>
	<table>
		<caption>학력 사항</caption>	
		<thead>
			<tr>
				<th>출신학교</th>
				<th>전공</th>
				<th>기간</th>
				<th>졸업구분</th>
			</tr>
		</thead>		
		<tbody>	
			<tr>
				<td>ㅇㅇㅇ고등학교</td>
				<td>(해당사항 없음)</td> 
				<td>2001.3 ~ 2004.2</td>
				<td>졸업</td>
			</tr>
			<tr>
				<td>ㅁㅁ대학교</td>
				<td>컴퓨터공학</td>
				<td>2004.3 ~ 2008.2</td>
				<td>졸업</td>
			</tr>
		</tbody>
				<tfoot>
			<tr>
				<td>학교총계</td>
				<td>전공총계</td>
				<td>기간총계</td>
				<td>졸업총계</td>
			</tr>
				</tfoot>
		</table>
</body>
</html>

수업교재

01-1) HTML이란 무엇인가?:
컴퓨터에서 사용하는 모든 파일에는 각각 고유의 형식이 있으며, 웹에서는 웹에 맞는 형식인 *.html(*.htm)으로 문서를 저장해야함. 텍스트뿐만 아니라 이미지, 링크 등 여러 요소들을 다루고 표시할 수 있어야 하는데 웹에서 자유롭게 오갈 수 있는 웹 문서를 만들는 언어가 HTML

01- 2) 웹표준이란 무엇인가?

웹 사이트를 만들 때 지켜야 하는 약속들을 정리한 것
웹 표준을 지켜 사이트를 제작하면 장소나 브라우저와 상관없이 쉽게 웹 사이트를 볼 수 있음
웹 표준으로 문서 하나를 만들면 어떤 기기에서나 볼 수 있기 떄문에 웹 개발자와 디자이너의 시간 절약
HTML5로 문서를 만드는 것 = 웹 표준을 지킨 문서를 만드는 것

01- 3) HTML5과 CSS3을 공부하는 이유

최신 엡 표준에 맞는 웹 사이트를 제작: HTML5와 CSS를 사용하면 사용자가 접속한 기기에 따라 사이트 레이아웃을 다양하게 바꿀 수 있음
웹 호면을 디자인하기 위한 기초: HTML5의 API를 사용해 ‘웹앱’을 만들 수도 있고, 앱 화면은 HTML5과 CSS3를 사용해 디자인함
인터렉티브한 사이트 제작: 플러그인을 제작할 줄 몰라도 HTML5와 함께 CSS3를 이용하면 인터렉티브한 사이트 제작 가능
사이트와 블로그 수정이 쉬움: HTML5를 공부하면 사이트나 블로그 소스를 이해할 수 있고 사이트를 원하는 모습으로 바꿀 수 있음

01- 4) 편집기 종류

텍스트편집기: 적절한 프로그램은 아니지만 HTML 태그에 익숙하다면 윈도우의 메모장이나 매킨토시의 텍스트 편집기를 이용해서도 웹문서를 작성할 수 있음. 하지만 사용자가 태그를 일일이 직접 입력해야 하기 때문에 HTML 태그와 속성을 알고 있어야 하고 입력할 때 오류가 발생하기 쉬움
ex)메모장
웹편집기: 자주 권장되는 편집기로 웹을 위한 전용 편집기 입니다. 태그와 속성, 일반 텍스트 등을 서로 다른 색으로 표시해주므로 소스를 읽기 쉽고 편집기에 따라 태그나 속성의 일부만 입력하더라도 전체를 완성해주기 때문에 오타로 인한 문제를 줄일 수 있다. 윈도우용 편집기로는 노트패드++나 에디트 플러스 등이 있고, Mac용 편집기로는 텍스트 메이트나 코다 등이 있으며 드림위버나 비주얼 스튜디오 코드 같은 편집기는 윈도우와 맥에서 모두 사용 가능함
ex)노트패드, 에디트플러스, 텍스트메이트, 코다, 드림위버, 비주얼 스튜디오 코드
통합개발환경(IDE): 웹을 개발할 때 대부분 단순히 HTML만 사용하는 것이 아니라 자바스크립트나 여러 언어들을 함께 사용한다. 웹 IDE는 웹 편집기의 편리함과 사용자에게 필요한 개발 환경을 한꺼번에 구축하고 사용할 수 있게 해준다.
ex)비주얼 스튜디오 2015, 웹스톤, 서브라인
웹 기반 코드 편집기: 웹 기반 코드 편집기는 웹 상에서 소스 코드를 입력하고 결과를 바로 확인할 수 있는 편집기이다. 웹 코딩을 위한 시스템 환경을 만들거나 별도의 편집기 프로그램을 이용하여 브라우저 화면에 코드를 입력하고 결과를 볼 수 있다는 장점이 있다. 또한 팀 작업에서 여러 팀원들과 소스를 공유하는 데도 유용하고 초보자의 코딩 연습용으로도 좋다
ex) Codepen, JSFiddle, Plunker

01- 6) HTML 기본 문서 구조

태그는 소문자로 쓴다

<img src="maltese.jpg">

여는 태그와 닫는 태그를 정확히 입력한다, 닫는 태그가 없는 태그도 있다, 단독 태그도 존재한다
적당하게 들여쓴다
태그는 속성과 함께 사용한다

<img src="maltese.jpg"> width="150" height="160">

인코딩 방식은 utf-8로 한다

<meta charset="utf-8">

01- 7) HTML 문서 기본 구조 살펴보기

<!doctype html>: 현재 문서가 HTML5 언어로 작성된 웹 문서라는 뜻입니다
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
: HTML 4.01 transitional로 작성된 웹 문서라는 뜻

01-8) HTML 태그: 웹 문서 시작을 알리는 태그

실제 문서 정보와 내용이 시작되고 끝나는 것을 표시하는 태그
lang이라는 속성을 사용해 문서에서 사용할 언어 지정 가능
- lang: 요소 콘텐츠와 텍스트가 포함된 모든 요소 속성에 대한 기본 언어(language)를 지정합니다.
  이 속성을 사용하면 스크린 리더나 브라우저, 검색 엔진 등에 사용해야 하는 언어 정보를 제공
문서 정보를 지정하는 <head> 부분과 실제 화면에 보이는 문서 내용을 입력하는 <body>부분

02-1) 텍스트를 묶어주는 태그

<hn> 태그
- (headline) 주로 본문에 큰 글씨로 제목을 나타낼때에 사용이 되는 태그
- 기본형: <hn>제목 <hn>
- 각 웹 콘텐츠 영역에서 제목을 표시할 떄 사용하는 태그
- h1>h2>h3>h4>h5h6
 태그
- 텍스트에서 줄을 바꾼다는 목적의 줄바꿈(line break)을 나타내는 태그
- 일반적으로 다음 텍스트를 새 줄로 시작함으로써 시, 주소, 코드 등에 표현할 때 유용
- 줄을 바꿀 위치에 태그를 사용, 닫는 태그는 없음
<hr>태그
- 문단 수준 요소 사이의 주제 구분(예를 들어 장면 전환, 참고서의 섹션 내 다른 주제로의 이동 등)을 나타내는 태그
- 대부분의 브라우저에서 가로로 구분선(horizontal rule)이 표시됨
태그
- 문단(paragraph)을 나타내는 태그
- 블록을 구성하는 블록 레벨 태그이며, 자신의 닫는 태그 이전에 다른 블록 레벨 태그가 분석되면 자동으로 닫힘
<blockquote>태그
- 다른 출처에서 인용한 블록 형식으로 표시되는 여러 줄로 된 인용문 부분을 나타
<pre>태그
- 미리 정의된 형식(preformatted)의 텍스트를 정의할 때 사용함

오늘의 숙제

resume 내용 기반으로 다시 짜기
table,th,td --> 1픽셀짜리 테두리, 중복되는 테두리를 한 줄로 표시
th,td -->셀 테두리와 내용 사이의 여백
thead , tfoot-->색상

<<내가 한 것(인데 아카데미인줄알고 아카데미로 함;;)>>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<style type="text/css">
		table, th, td {
			border: 1px solid;
			border-collapse: collapse;
		}	
	
		th, td {
		padding: 15px;
		}
		thead, tfoot {
			background : #D5D3D5;
		}
	</style>
</head>
<body>
	<h2>Academic</h2>
	<table>
		<caption>학력 사항</caption>
		<thead>
			<tr>
				<th>출신학교</th>
				<th>전공</th>
				<th>기간</th>
				<th>졸업구분</th>
			<tr>
		</thead>	
		<tbody>
				<td>ㅇㅇㅇ고등학교</td>
				<td>(해당사항 없음)</td>
				<td>2001.3 ~ 2004.2</td>
				<td>졸업</td>
			</tr>
			<tr>
				<td>ㅁㅁ대학교</td> 
				<td>컴퓨터공학</td>
				<td>2004.3 ~ 2008.2</td> 
				<td>졸업</td>
			</tr>
		</tbody>	
		<tfoot>
			<tr>
				<td>학교총계</td>
				<td>전공총계</td>
				<td>기간총계</td>
				<td>졸업총계</td>
			</tr>
		</tfoot>	
	</table>
</body>
</html>

<<진짜 과제 02/ resume_Hw>>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<style type="text/css">
		table, th, td {
			border: 1px solid black;
			border-collapse: collapse;
		}	
	
		th, td {
		padding: 15px;
		}
		thead, tfoot {
			background : #D5D3D5;
		}
	</style>
</head>
<body>
	<h2>Academic</h2>
	<table>
		<caption>학력 사항</caption>
		<thead>
			<tr>
				<th>출신학교</th>
				<th>전공</th>
				<th>기간</th>
				<th>졸업구분</th>
			<tr>
		</thead>	
		<tbody>
				<td>ㅇㅇㅇ고등학교</td>
				<td>(해당사항 없음)</td>
				<td>2001.3 ~ 2004.2</td>
				<td>졸업</td>
			</tr>
			<tr>
				<td>ㅁㅁ대학교</td> 
				<td>컴퓨터공학</td>
				<td>2004.3 ~ 2008.2</td> 
				<td>졸업</td>
			</tr>
		</tbody>	
		<tfoot>
			<tr>
				<td>학교총계</td>
				<td>전공총계</td>
				<td>기간총계</td>
				<td>졸업총계</td>
			</tr>
		</tfoot>	
	</table>
</body>
</html>

'JSP > HTML' 카테고리의 다른 글

2024_06_18_화 (0)	2024.06.18
2024_06_17_월 (0)	2024.06.17
2024_06_14_금 (0)	2024.06.14

코딩일기

2024_06_13_목

오늘의 코딩

<<JSP 까는법>>

<<JSP 실습>>

(폴더: WebStandard01)

수업교재

오늘의 숙제

'JSP > HTML' 카테고리의 다른 글

티스토리툴바

2024_06_13_목

오늘의 코딩

<<JSP 까는법>>

<<JSP 실습>>

(폴더: WebStandard01)

수업교재

오늘의 숙제

'JSP > HTML' 카테고리의 다른 글

관련글

티스토리툴바