Study Web Development

12월 8일

이전으로

설치

https://tomcat.apache.org/download-90.cgi

  1. Tomcat 9에서 Core의 zip 다운로드하고 C:\javaWork\apps로 이동 후 압축 해제
  2. C:\javaWork\workspace_jsp 폴더 생성
  3. 이클립스에서 File-Switch Workspace-Other... 선택하고 경로를 C:\javaWork\workspace_jsp로 변경 후 Launch
  4. Create a Dynamic Web project 선택하고 프로젝트명에 HTML 입력
  5. New Runtime...-Apache Tomcat v9.0 선택하고 Next
  6. Browse... 선택하고 경로를 C:\javaWork\apps\apache-tomcat-9.0.55로 지정 후 Finish-Finish
  7. src/main/webapp 폴더 오른쪽 클릭하고 New-HTML File 선택 후 index.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>welcome</title>
</head>
<body>
Hello HTML!!
</body>
</html>
  1. 오른쪽 클릭 후 Run As-Run on Server 선택 후 Finish
  2. Window-Preferences-General-Workspace 선택 후 Text file encoding을 UTF-8로 변경
  3. Window-Preferences-Web에서 CSS Files, HTML Files, JSP Files의 Encoding을 모두 ISO 10646/Unicode(UTF-8)로 변경
  4. Window-Web Browser-Microsoft Edge 선택

HTML5

1. HTML 개요

1-1 웹의 역사

1-2 HTML 정의

1-3 태그의 구성 요소

  1. 복합 태그
    • <태그명>내용</태그명>
<div>안녕</div>
  1. 속성을 가지는 태그
    • <태그명 속성명=값>내용</태그명>
<p align="center">안녕</p>
  1. 단독 태그
    • <태그명>
<img src="blue.jpg">

1-4 태그 사용 규칙

  1. <태그명></태그명>처럼 여는 태그와 닫는 태그를 쌍으로 사용
  2. 태그명과 속성명, 속성명과 속성명 사이는 한 칸씩 띄어 쓰고 그 외에는 공백을 두지 않음
  3. 속성명과 값은 = 부호를 사용하여 표시하고 값은 "" 안에 작성
<img src="blue.jpg"> <!-- 기본 -->
<img src='blue.jpg'>
<img src=blue.jpg>

1-5 주석

<!-- HTML 주석 -->

2. HTML의 기본 구조

<!DOCTYPE html>
<html lang="ko">
	<head>
		<title>브라우저의 탭에 표시될 내용</title>
	</head>
	<body>
		화면에 보여질 내용
	</body>
</html>

2-1 태그의 사용

  1. webapp 폴더 오른쪽 클릭하고 새 폴더 ch01-basic 생성 후 새 HTML 파일 s01_basic.html 생성
    • Run As-Run on Server로 브라우저에 페이지를 열었다면, 이후로는 HTML 파일 저장 후 브라우저에서 새로고침하여 변경된 파일 확인 가능
<!-- HTML 주석 -->
<!-- 
DOCTYPE : 현재 문서의 유형을 정의
 -->
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- 
meta : 웹 브라우저와 관련된 정보 지정
속성
charset : 문자셋 지정
 -->
<meta charset="UTF-8">
<title>첫 번째 페이지</title>
</head>
<body>
<!-- 
HTML : HyperText Markup Language
	웹 문서를 만들 때 사용하는 태그 중심의 언어

HTML 문서 작성시 주의사항
1) 대소문자를 구분하지 않음
	<body>, <BODY>는 모두 같은 의미
	일반적으로 소문자로 표시
2) 2칸 이상의 공백은 모두 1칸으로 취급
3) 줄바꿈하기 위해서는 <br> 태그를 명시해야 함
 -->
Hello          World!
<br>
오늘은 수요일!!
</body>
</html>

2-2 글자 태그

  1. 새 HTML 파일 s02_character.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글자</title>
</head>
<body>
안녕하세요.
<br>
줄바꿈을 할 때는 br 태그를 사용해야 함<br>
<b>굵은 글씨1</b>
<br>
<strong>굵은 글씨2</strong>
<br>
<ins>밑줄</ins>
<br>
<del>2,000원</del> <!-- 취소선 -->
<br>
<i>이탤릭체</i>
<br>
이제는 <em>반응형 웹</em>이 대세이다.<br> <!-- 이탤릭체2 -->
<br>
<b>태그는 <ins>중첩</ins> 사용이 가능하다</b>

<!-- 수평선 -->
<hr size="1" noshade="noshade" width="80%"> <!-- size 속성은 수평선의 굵기를 지정하며, noshade 속성을 지정하지 않으면 입체감 있는 박스로 그려지고, width 속성은 % 생략시 절대값(픽셀 단위), % 포함시 상대값으로 수평선의 길이를 지정 -->

<!-- 제목 표시 -->
<h1>제목1</h1> <!-- 제목 태그는 한 줄을 영역으로 삼기 때문에 별도의 <br> 태그 필요 없고 정렬 가능 -->
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5 align="center">제목5</h5> <!-- 가운데 정렬 -->
<h6 align="right">제목6</h6> <!-- 오른쪽 정렬 -->

<!-- span 태그 : 줄바꿈 없이 영역으로 묶기; CSS로 글자에 스타일 지정시 사용 -->
<span>내용</span>
<br>

<!-- mark 태그 : 형광펜 효과 내기-->
<mark>텍스트</mark>
<br>

<!-- 텍스트에 링크 -->
<a href="https://www.naver.com" title="네이버 보기">네이버</a> <!-- 현재 탭에서 이동, hover시 title 속성의 값을 보여줌 -->
<br>
<a href="https://www.naver.com" target="_blank">네이버</a> <!-- 새 탭을 열면서 이동 -->

<!-- 단락 만들기 -->
<p align="left">단락1</p> <!-- 단락 태그는 한 줄을 영역으로 삼기 때문에 별도의 <br> 태그 필요 없고 정렬 가능 -->
<p align="center">단락2</p>
<p align="right">단락3</p>

<!-- div : 텍스트(또는 이미지)를 넣어서 영역을 만들 때 사용; 제목, 단락 태그와 마찬가지로 한 줄을 영역으로 삼지만, 제목, 단락 태그와 달리 영역 끝에 빈 줄을 넣지 않음; CSS나 자바스크립트 등에서 범용적으로 활용하는 영역 태그 -->
<div>텍스트 또는 이미지 표시</div>
<div>텍스트 또는 이미지 표시2</div>
<div>텍스트 또는 이미지 표시3</div>
</body>
</html>

다음으로