JAVA개념&실습

WEB : 01. HTML 문법01

u_SZero 2023. 5. 25. 11:27

! 현재 배워가고 있는 주인장이 쓴 글이니 정보의 정확성에 유의하시기 바랍니다 !

WebApp01

HTML

Test001.html  : div

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

<!-- 문단 구성 -->
<p>항상 그래왔던 것 처럼...</p>

<!-- 개행 테스트 -->
우리는 익숙해지기 위한 길목에서<br><Br>

첫 번재 모퉁이를 돌기 위해<BR>
노력하고 있습니다.<br/>

후회 없도록 열심히 합시다.<br><br><br><br>

<div>
	첫 번째 div 영역<br>
	<h1>h1~h6 는 제목을 표현할 때 사용한다.</h1>
	<h2>숫자가 늘어갈수록 더 작은 개념의 제목을 표현하기 위해 사용된다.</h2>
	<h3>더 작은 제목이라 함은 보여지는 크기도 포함하고 있지만</h3>
	<h4>실무적으로 웹 표준을 근거로 사용할 때에는 의미를 담아 사용해야 한다.</h4>
	<h5>여섯 단계로 나뉘며</h5>
	<h6>그 외의 단계는 존재하지 않는다.</h6>
	<!-- <h23> 존재하지 않는 h... -->
</div>
<br><br>

<div>
	두 번째 div 영역<br>
	hr 태그(엘리먼트)는 개행을 할 때 사용한다. <br>
	<p>p 태그(엘리먼트)는 문단을 지정하고자 할 때 사용한다.
	문장 여러 개를 감싸서 단락을 표현할 때 주로 사용하게 된다.</p>	
</div>
<br><br>


<div>
	세 번째 div 영역<br>
	<p>span 태그(엘리먼트)는 문장의 일부 단어나 문장을 특별한 형태로 처리할 때 사용한다.<br>
	일반적으로 <span style = "font-size: 20pt; font-weight: bold; color: red">CSS</span>와 같이 표현된다.</p>
</div>
<br><br>

</body>
</html>

 

 

Test002.html  : 목록

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test002.html</title>
</head>
<body>
	
<div>
	<h1>목록 관련 태그</h1>
	<hr>
</div>
	
<div>
<!-- ※ 관찰 → 앞에 띄어쓰거나 들여쓰기를 하지 않은 상황 -->
<ol>
<li>텍스트 관련 태그 </li>
<li>목록 관련 태그 </li>
<li>다른 여러가지 태그</li>
</ol>

	<!-- 순서 있는 목록 -->
	<ol>
		<li>텍스트 관련 태그</li>
		<li>목록 관련 태그</li>
		<li>다른 여러가지 태그</li>
	</ol>

	<!-- 순서 없는 목록 -->
	<ul>
		<li>텍스트 관련 태그</li>
		<li>목록 관련 태그</li>
		<li>다른 여러가지 태그</li>
	</ul>
	
	<!-- ※ 관찰 → 이들 사이에는 개행 태그(br)을 넣지 않았음 -->
	
	<dl> <!-- 설명목록(이름(name)과 값(value)형태로 된 목록 -->
		<dt>HTML 태그의 종류(중간 제목)</dt>
		<dd>텍스트 관련 태그</dd>
		<dd>목록 관련 태그</dd>
		<dd>다른 여러가지 태그</dd>
	</dl>
	
</div>

 

 

Test003.html  : body태그

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test003.html</title>
</head>
<body text = "white" background = "images/bgImage2.jpg" leftmargin = "50" topmargin = "100"> <!-- bgcolor = "black" -->

<div>
	<h1>body 태그에 관한 속성 살펴보기</h1>
	<hr><!-- 단독 태그, 수평선 -->
</div>

<div>
	본문 내용<br>
	각자 배경색과 배경 그림도 바꾸어보고...<br>
	본문에서 사용하는 글자색과 여백도 설정해보자.<br>	
</div>

</body>
</html>

 

Test004.html  : 데이터 입력 관련 태그 form

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

<div>
	<h1>데이터 입력 관련 태그</h1>
	<hr>
</div>

<div>
	<!-- check~!!!! -->
	<form>
		이름 <input type = "text"><br>
		국어 <input type = "text"><br>
		영어 <input type = "text"><br>
		수학 <input type = "text"><br>
		<br>
		
		<input type = "button" value = "결과">
		<input type = "reset" value = "취소">
		<br>
		
		총점 <input type = "text"> 평균 <input type = "text">
		<br>
	</form>
</div>

</body>
</html>

 

 

Test005.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test005.html</title>

<style type = "text/css">
	*
	{
		font-size: 20pt;
		font-weight: bold;
		font-family: 맑은 고딕;
		color: #334433;
	}
</style>

</head>
<body>

<div>
	<h1>데이터 입력 관련 태그</h1>
	<hr>
</div>

<div>
	<!-- check~!!!! -->
	<form>
		이름 <input type = "text"><br>
		국어 <input type = "text"><br>
		영어 <input type = "text"><br>
		수학 <input type = "text"><br>
		<br>
		
		<input type = "button" value = "결과">
		<input type = "reset" value = "취소">
		<br>
		
		총점 <input type = "text"> 평균 <input type = "text">
		<br>
	</form>
</div>

</body>
</html>

 

 

 

 

 

 

 

 

JavaScript

 

Test006.html  : html+javascript

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test006.html</title>

<style type = "text/css">
	*
	{
		font-size: 20pt;
		font-weight: bold;
		font-family: 맑은 고딕;
		color: #334433;
	}
</style>

<script type = "text/javascript">
	
	// 자바스크립트 함수 정의
	function actionPerformed()
	{
		// 테스트
		//alert("함수 호출 확인~!!!");
		
		var vKor = document.getElementById("kor").value;
		var vEng = document.getElementById("eng").value;
		var vMat = document.getElementById("mat").value;
		var vTot = 0;
		var vAvg = 0;
		
		vTot = vKor + vEng + vMat;
		//      90     80     70       → "908070"
		// Integer.parseInt("1212");   → 1212
		
		//vTot = parseInt(vKor + vEng + vMat);	--(Ⅹ)
		vTot = parseInt(vKor) + parseInt(vEng) + parseInt(vMat);
		vAvg = Math.round(vTot/3);
		
		// 테스트
		//alert(vTot);
		
		document.getElementById("tot").value = vTot;
		document.getElementById("avg").value = vAvg;
		
	}

</script>

</head>
<body>

<div>
	<h1>데이터 입력 관련 태그</h1>
	<hr>
</div>

<div>
	<!-- check~!!!! -->
	<form>
		이름 <input type = "text" id = "name"><br>
		국어 <input type = "text" id = "kor"><br>
		영어 <input type = "text" id = "eng"><br>
		수학 <input type = "text" id = "mat"><br>
		<br>
		
		<!-- 결과 버튼에 클릭 이벤트가 발생했을 때 『on』 + 『click』 → 『onclick』 -->
		<!-- 『actionPerformed()』 라는 자바스크립트 함수 호출 -->
		<input type = "button" value = "결과" onclick = "actionPerformed()">
		<input type = "reset" value = "취소">
		<br><br>
		
		총점 <input type = "text" id = "tot"> 평균 <input type = "text" id = "avg">
		<br>
	</form>
</div>

</body>
</html>

 

Test007.html  : 수평선(hr) / html에서 하지 말아야할 디자인 설정

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

<div>
	<h1> 수평선 넣기 / 공백넣기</h1>
	<hr>
</div>

<div>
	수평선을 사용해보자
	<hr size = "20" color = "red">
	<br><br>
	
	음영선이 없는 수평선 <!-- 음영 정도는 html에서 지정해줄 수 있다. -->
	<hr size = "2" noshade = "noshade">
	<br><br>
	
	수평선의 수평 길이 설정
	<hr size = "5" width = "400" align = "right">
	<hr size = "5" width = "200" align = "right">
	<br><br>
	
	수평선의 정렬
	<hr size = "5" width = "50%" align = "left">
	<hr size = "7" width = "50%" align = "right">
	<hr size = "9" width = "50%" align = "center">
	<hr size = "9" width = "50%">	
</div>
<br><br>

<div>
	공백 발생<br>
	공백						공백<br>
	공백&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;공백<br>
</div>

<!-- check~!!! -->
<!-- 쓰지말아라~!!! -->
<div>
	<font size = "1">B강의장 식구들 화이팅</font><br>		<!-- html에서 폰트조절Ⅹ CSS에서 하자 -->
	<font size = "2">B강의장 식구들 화이팅</font><br>
	<font size = "3">B강의장 식구들 화이팅</font><br>
	<font size = "4">B강의장 식구들 화이팅</font><br>
	<font size = "5">B강의장 식구들 화이팅</font><br>
	<font size = "6">B강의장 식구들 화이팅</font><br>
	<font size = "7">B강의장 식구들 화이팅</font><br> 
	<font size = "8">B강의장 식구들 화이팅</font><br> <!-- check~!!! -->
	<font size = "9">B강의장 식구들 화이팅</font><br> <!-- check~!!! -->
	<font size = "10">B강의장 식구들 화이팅</font><br> <!-- check~!!! -->
	
	<font size = "5" color = "green"> B강의장 식구들 화이팅</font><br>
	<font size = "5" color = "#00ff00"> B강의장 식구들 화이팅</font><br>
	<font size = "5" color = "red" face = "궁서체"> B강의장 식구들 화이팅</font><br>
	<!-- 이렇게 사용하지 않는 것이 좋다고 하면서 왜 없애진 않나요? -->ㄴ
	<!-- 기존에 지원되었던 내용을 이용해서 어플리케이션이 만들어져있는데 없어진다면 큰일... -->
	
</div>
</body>
</html>

 

Test008.html  : html에서 사용하지 말아야하는 디자인

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

<div>
	<h1>기타 글꼴 꾸미기 태그</h1>
	<hr>
</div>

<!-- check~!!! -->
<!-- 쓰지 말아라~!!! -->
<div>
	기본 텍스트<br><br>
	<b>글자를 굵게(진하게) 설정하기</b><br><br>
	<i>이텔릭체(기울여)로 설정하기</i><br><br>
	<u>밑줄 긋기</u><br><br>
	<tt>타이프체로 설정하기</tt><br><br>
	<small>현재 글자 크기보다 한 단계 줄이기</small><br><br>
	<big>현재 글자 크기보다 한 단계 키우기</big><br><br>
	<strong>글자 강조하기</strong><br><br>
	<s>취소선 넣기</s><br><br>
	<em>강조하기, 글자 비스듬히 출력</em><br><br>
	
	<!-- 쓰지 말아라는 아님 ↓ -->
	아래 첨자 테스트하기<sub>아래첨자</sub><br><br>
	위 첨자 테스트하기<sup>위첨자</sup><br><br>
</div>


</body>
</html>

 

Test009.html  : pre / xmp

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

<div>
	<h1>pre 태그 / xmp 태그</h1>
	<hr>
</div>

<div>

	나 보기가							역겨워 가실 때에는
	
	말 없이 고이 보내드리오리다.
	
	<br><br>
	
	<pre>
	
	<font color = "blue">나 보기가							역겨워 가실 때에는</font>
	<!-- 실제 태그처럼 사용이 가능 -->
	말 없이 고이 보내드리오리다.
	
	</pre>
	<br><br>
	
	<xmp> <!-- 정식적으로 구성된 태그는 아님 하지만 보여줘야 할 때가 있을 때 요긴하게 쓰임 -->
	<font color = "red"> 나 보기가							역겨워 가실 때에는</font>
	<!-- 태그 역시 문자열로 인식 -->
	말 없이 고이 보내드리오리다.
	</xmp>
	<br><br>
	
	
</div>


</body>
</html>

 

Test010.html  : 이미지 다루기

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

<div>
	<h1>이미지 다루기</h1>
	<hr>
</div>

<div>
	<h2>이미지 정렬을 확인해 보도록 하자</h2>
	<img src="images/img_02.gif">
	<img src="images/img_02.gif" width = "100">
	<img src="images/img_02.gif" height = "50">
	<img src="images/img_02.gif" width="200" height="100"> <!-- 원본이미지의 종횡비가 망가짐 -->
	<br><br>
	
	<!-- 검은 테두리 생성 -->
	<img src = "images/img_02.gif" width = "100" border="10"  
	vspace = "200" hspace = "100" align = "bottom"> 위 아래 정렬 실습
	
</div>

</body>
</html>

 

 

Test011.html & Test011_1.html  : 하이퍼링크 실습

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

<div>
	<h1>하이퍼링크 이동 실습</h1>
	<hr>
</div>

<div>
	링크 이동 페이지~!!!
</div>

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

<div>
	<h1>하이퍼링크 실습</h1>
	<hr>
</div>

<div> <!-- 실제 html이 실행되는 파일의 물리적 저장 공간...? -->
	<a href = "C:\WebStudy\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\WebApp01\Test011.html">절대경로 지정 방식</a>
	<br><br>
	
	<a href = "./Test011.html">상대경로 지정 방식</a>
	<br><br>
	
	<a href = "Test011.html">상대경로 지정 방식</a>
	<br><br>
	
	<a href = "http://localhost:8090/WebApp01/Test011.html">웹 상의 주소 지정 방식</a>
	<!-- <a href = "http://www.test.com/Test011.html">웹 상의 주소 지정 방식</a>  -->
	<br><br>
	
	<a name = "top">책갈피 위치</a>
	
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	
	<a href="#top">책갈피 위치로 이동하기</a>
</div>

</body>
</html>

 

! 현재 배워가고 있는 주인장이 쓴 글이니 정보의 정확성에 유의하시기 바랍니다 !

'JAVA개념&실습' 카테고리의 다른 글

WEB : [0525] 로그인 세션(Session) 실습  (0) 2023.05.25
WEB : [0525] 쿠키(Cookie) & 세션(Session) 개념  (0) 2023.05.25
JDBC : 08. CallableStatement - SQL 구문 전송 실습  (0) 2023.05.24
JDBC : 07. ScoreDTO/ScoreDAO/PreparedStatement/성적처리 실습  (0) 2023.05.24
JDBC : 05. MemberDTO/MemberDAO/Statement/직원관리 실습  (0) 2023.05.23

'JAVA개념&실습'의 다른글

  • 현재글WEB : 01. HTML 문법01

관련글

티스토리툴바