[KOSTA]Springベースのクラウドサービス開発者研修コース34日目-HTMLトレーニング


📃 h 1からh 6ラベル、pラベル、リストラベルの使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	
	
	
</style>
</head>
<body>
	<h1>수습 국원 모집</h1>
	
	<h2>방송에 관심 있는 새내기 여러분 환영합니다.</h2>
	<p>교내 방송국에서 신입생을 대상으로 수습 국원을 모집합니다. 학부나 전공에 상관없습니다 <br>평소 방송에 관심 있었던 여러 학우들의 지원바랍니다.</p>
		
	<ul>
		<li><b>모집 기간 : </b>3월 2일 ~ 3월 11일</li>
		<li><b>모집 분야 : </b>아나운서, pd, 엔지니어</li>
		<li><b>지원 방법 : </b>양식 작성 후 이메일 접수</li>
		<li style="display: inline; font-style: italic;">지원서 양식은 교내 방송국 홈페이지 공지 게시판에 있습니다.</li>
	</ul>
	
	<h3>혜택</h3>	
	<ol type="a">
		<li>수습기간 활동 중 소정의 활동비 지급</li>
		<li>정기자로 진급하면 장학금 지급</li>
	</ol>
	
</body>
</html>
📃tableラベルとプロパティの使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<table width="450" border="1">
		<thead>
			<tr height="50" align="center">
				<th rowspan="2">날짜</th>
				<th colspan="3">메뉴</th>
				<th rowspan="2">비고</th>
			</tr>
			<tr height="50" align="center">
				<td>아침</td>
				<td>점심</td>
				<td>저녁</td>
			</tr>
		</thead>
		<tbody>
			<tr height="50" align="center">
				<td>21일</td>
				<td>미역국</td>
				<td>제육볶음</td>
				<td>돼지갈비</td>
				<td></td>
			</tr>
			<tr height="50" align="center">
				<td>22일</td>
				<td>된장국</td>
				<td>오징어볶음</td>
				<td>삼겹살</td>
				<td></td>
			</tr>
		
		</tbody>
		
	
	</table>
</body>
</html>
📃 formラベルの使用
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>연습문제 2</title>
    <style>
			#container { 
				width:520px;
				border:1px solid black;
				padding:20px 40px;
				margin:0 auto;
			}
      fieldset { margin-bottom:15px; }
      legend { font-weight:bold; }
			ul {list-style-type: none;}
			li { line-height:30px;}
    </style>
  </head>
  <body>
		<div id="container">
			<h1>프런트엔드 개발자 지원서 </h1>
			<p>HTML, CSS, Javascript에 대한 기술적 이해와 경험이 있는 분을 찾습니다.</p>
			<hr>
			<form>
				<h3>개인정보</h3>
				<ul>
					<li>
						<label>이름</label>
						<input type="text" placeholder="공백없이 입력하세요.">
					</li>
					<li>
						<label>연락처</label>
						<input type="text">
					</li>
				</ul>
				
				<h3>지원 분야</h3>
				<ul>
					<li>
						
						<input type="radio" name="job" value="publishing"> 웹 퍼블리싱<br>
						<input type="radio" name="job" value="developer"> 웹 어플리케이션 개발<br>
						<input type="radio" name="job" value="update"> 개발 환경 개선
					</li>
				</ul>
				
				<h3>지원동기</h3>
				<textarea rows="5" cols="60" placeholder="본서 지원 동기를 간략히 써주세요"></textarea> <br>
				
				<input type="submit" value="접수하기"><input type="reset" value="다시 쓰기">
				

			</form>
		</div>
  </body>
</html>
📃 今日勉強した内容をHTMLにまとめる
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	p{
		font-size: 20px;
	}
	
	tr{
		text-align: center;
	}
	
	#b1{
		font-size: 20px;
		color: red;
	}
	#container{
		padding-left : 900px;
		margin:0 auto;
	}
</style>
</head>
<body>
<div id="container">
	<h1>HTML 1일차</h1>
	
	<h2>환경설정 (Eclipse, Tomcat 연동)</h2>
	<ol>
		<li>
			<p>공유 폴더에 apache-tomcat-9.0.6 다운로드</p>
		</li>
		<li>
			<p>내PC - 속성 - 고급 시스템 설정 - 환경변수에서 변수 설정</p>
			<img alt="설정2" src="../images/설정2.png"><br><br><br>
		</li>
		<li>
			<p>Eclipse 에서 Window - Preferences 클릭</p>
			<img alt="설정1" src="../images/설정1.png"><br><br><br>
		</li>
		<li>
			<p>Server - Add - Apach.Tomcat.9.0 선택 후 Finish</p>
			<img alt="설정3" src="../images/설정3.PNG"><br><br><br>
		</li>
		<li>
			<p>Servers 탭 - 마우스 우클릭 - New - Server - Finish</p>
			<img alt="설정4" src="../images/설정4.PNG"><br><br><br>
		</li>
		<li>
			<p>등록한 서버 더블 클릭 - HTTP 포트 8080 에서 8081로 변경</p>
			<img alt="설정5" src="../images/설정5.PNG"><br><br><br>
			<b id="b1">변경 이유 : Oracle에서 8080포트를 사용하기 때문에 추후 에러상황 회피 위함</b>
		</li>
	</ol>
	<br><br><br>
	
	<h2>프로젝트 및 html 생성</h2>
	<ol>
		<li>
			<p>New - Project - Web - Dynamic Web Project 클릭</p>
			<img alt="프로젝트1" src="../images/프로젝트1.PNG">
		</li>
		<li>
			<p>WebContent 폴더 밑에서 html file 생성</p>
			<img alt="프로젝트2" src="../images/프로젝트2.png">
		</li>
	</ol>
	<br><br><br>
	
	<h2>오늘 배운 html태그</h2>
		<table border="1" width="800">
			<thead>
				<tr>
					<th width="150">태그명</th>
					<th>내용</th>
					<th width="150">비고</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><p>doctype</p></td>
					<td>문서 형식</td>
					<td></td>
				</tr>
				<tr>
					<td><p>html</p></td>
					<td>웹 페이지의 시작과 끝</td>
					<td></td>
				</tr>
				<tr>
					<td><p>meta</p></td>
					<td>문자 인코딩 및 문서 키워드, 요약정보</td>
					<td></td>
				</tr>
				<tr>
					<td><p>title</p></td>
					<td>웹 페이지 제목</td>
					<td></td>
				</tr>
				<tr>
					<td><p>body</p></td>
					<td>브라우저에 실제 표시되는 내용</td>
					<td></td>
				</tr>
				<tr>
					<td><p>h1 ~ h6</p></td>
					<td>문서에서 제목을 정의</td>
					<td>block 요소</td>
				</tr>
				<tr>
					<td><p>div</p></td>
					<td>특정 영역, 그룹화 할 때 쓰임 = layout</td>
					<td>block 요소</td>
				</tr>
				<tr>
					<td><p>p</p></td>
					<td>단락</td>
					<td>block 요소</td>
				</tr>
				<tr>
					<td><p>a</p></td>
					<td>하나의 페이지에서 다른 페이지를 연결, 하이퍼링크를 정의할 때 사용</td>
					<td>p태그와 혼동X<br>
						inline 요소</td>
				</tr>
				<tr>
					<td><p>br</p></td>
					<td>줄바꿈</td>
					<td></td>
				</tr>
				<tr>
					<td><p>ul</p></td>
					<td>순서가 없는 list</td>
					<td>디폴트로 ● 붙음</td>
				</tr>
				<tr>
					<td><p>ol</p></td>
					<td>순서가 있는 list</td>
					<td>디폴트로 숫자 1부터 속성 값으로 알파벳, 원하는 숫자부터 가능</td>
				</tr>
				<tr>
					<td><p>li</p></td>
					<td>ul 과 ol 안에서 각 항목을 나열할때 쓰임</td>
					<td>block 요소</td>
				</tr>
				<tr>
					<td><p>table</p></td>
					<td>셀들의 행과 열로 구성된 2차원 테이블을 정의</td>
					<td></td>
				</tr>
				<tr>
					<td><p>thead</p></td>
					<td>테이블에서 헤더 컨텐츠들을 하나의 그룹으로 묶을때 사용</td>
					<td></td>
				</tr>
				<tr>
					<td><p>tbody</p></td>
					<td>테이블에서 내용 컨텐츠들을 하나의 그룹을 묶을때 사용</td>
					<td></td>
				</tr>
				<tr>
					<td><p>tr</p></td>
					<td>테이블에서 셀들로 이루어진 하나의 행</td>
					<td></td>
				</tr>
				<tr>
					<td><p>th</p></td>
					<td>테이블에서 제목이 되는 헤더 셀</td>
					<td>thead태그 내부에서 사용</td>
				</tr>
				<tr>
					<td><p>td</p></td>
					<td>테이블에서 하나의 데이터 셀</td>
					<td>tbody태그 내부에서 사용</td>
				</tr>
				<tr>
					<td><p>input</p></td>
					<td>사용자로부터 입력을 받을 수 있는 입력 필드</td>
					<td>form태그 내부에서 사용됨</td>
				</tr>
				<tr>
					<td><p>form</p></td>
					<td>사용자로부터 입력을 받을 수 있는 HTML 입력 폼</td>
					<td>HTML에서 유일하게 기능역할 하는 태그</td>
				</tr>
				
			</tbody>
		</table>
		
		<h3>태그의 속성</h3>
		<table border="1" width="800">
			<thead>
				<tr>
					<th width="150">태그명</th>
					<th width="325">속성</th>
					<th>속성값</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td rowspan="7"><p>input</p></td>
					<td><p>type</p></td>
					<td>text, email, date, checkbox, radio, file, submit, reset ...등등</td>
				</tr>
				<tr>
					<td><p>name</p></td>
					<td>사용자 정의</td>
				</tr>
				<tr>
					<td><p>id</p></td>
					<td>사용자 정의</td>
				</tr>
				<tr>
					<td><p>autofocus</p></td>
					<td>autofocus</td>
				</tr>
				<tr>
					<td><p>placeholder</p></td>
					<td>사용자 정의</td>
				</tr>
				<tr>
					<td><p>required</p></td>
					<td>required</td>
				</tr>
				<tr>
					<td><p>value</p></td>
					<td>사용자 정의</td>
				</tr>
				<tr>
					<td rowspan="2">form</td>
					<td><p>action</p></td>
					<td>사용자 정의</td>
				</tr>
				<tr>
					<td><p>method</p></td>
					<td>get, post</td>
				</tr>
			</tbody>
		</table><br><br><br>
		
		<h2>오늘 미션 복습</h2>
			<ul>
				<li>
					<label style="font-size: 20px; font-style: oblique;">태그, p태그, 목록 태그 이용하기</label>
					<h3>수습 국원 모집</h3>
					
					<h4>방송에 관심 있는 새내기 여러분 환영합니다.</h4>
					<p>교내 방송국에서 신입생을 대상으로 수습 국원을 모집합니다. 학부나 전공에 상관없습니다 <br>평소 방송에 관심 있었던 여러 학우들의 지원바랍니다.</p>
						
					<ul>
						<li><b>모집 기간 : </b>3월 2일 ~ 3월 11일</li>
						<li><b>모집 분야 : </b>아나운서, pd, 엔지니어</li>
						<li><b>지원 방법 : </b>양식 작성 후 이메일 접수</li>
						<li style="display: inline; font-style: italic;">지원서 양식은 교내 방송국 홈페이지 공지 게시판에 있습니다.</li>
					</ul>
					
					<h3>혜택</h3>	
					<ol type="a">
						<li>수습기간 활동 중 소정의 활동비 지급</li>
						<li>정기자로 진급하면 장학금 지급</li>
					</ol>
				</li>
				<br><br><br>
				<li>
					<label style="font-size: 20px; font-style: oblique;">table태그 및 속성 이용하기</label>
					<table width="450" border="1">
						<thead>
							<tr height="50" align="center">
								<th rowspan="2">날짜</th>
								<th colspan="3">메뉴</th>
								<th rowspan="2">비고</th>
							</tr>
							<tr height="50" align="center">
								<td>아침</td>
								<td>점심</td>
								<td>저녁</td>
							</tr>
						</thead>
						<tbody>
							<tr height="50" align="center">
								<td>21일</td>
								<td>미역국</td>
								<td>제육볶음</td>
								<td>돼지갈비</td>
								<td></td>
							</tr>
							<tr height="50" align="center">
								<td>22일</td>
								<td>된장국</td>
								<td>오징어볶음</td>
								<td>삼겹살</td>
								<td></td>
							</tr>
						</tbody>
					</table>
				</li>
				<br><br><br>
				<li>
					<label style="font-size: 20px; font-style: oblique;">form 태그 이용하기</label>
						<form>
							<h3>개인정보</h3>
							<ul>
								<li>
									<label>이름</label>
									<input type="text" placeholder="공백없이 입력하세요.">
								</li>
								<li>
									<label>연락처</label>
									<input type="text">
								</li>
							</ul>
							
							<h3>지원 분야</h3>
							<ul>
								<li>
									
									<input type="radio" name="job" value="publishing"> 웹 퍼블리싱<br>
									<input type="radio" name="job" value="developer"> 웹 어플리케이션 개발<br>
									<input type="radio" name="job" value="update"> 개발 환경 개선
								</li>
							</ul>
							
							<h3>지원동기</h3>
							<textarea rows="5" cols="60" placeholder="본서 지원 동기를 간략히 써주세요"></textarea> <br>
							
							<input type="submit" value="접수하기"><input type="reset" value="다시 쓰기">
							
			
						</form>
						
				</li>
			</ul>
			<a href="#top">맨위로 가기</a>
</div>
</body>
</html>