36일차 수업 정리(Web Programming 환경설정, XHTML)
**Eclipse에서 Web Programming을 하기 위한 환경 설정
=> 브라우저 설치
=> WAS(Web Application Server) 설치 : apache tomcat
1. Apache Tomcat 설치
1) 다운로드
=> http://tomcat.apache.org/
=> Apache : Web Server명(외부에서 URL을 이용하여 접속 할 수 있도록 해주는 기능)
=> Tomcat : Web Application Server 이름(서버 프로그래밍 언어로 만들어진 내용을 html로 변환)
=> Windows는 설치버전과 비설치 버전이 있음
=> Tomcat은 java로 만들어져 있어 tomcat 사용시 jre가 설치되어 있어야 함(9.0.35버전)
2. Eclipse에서 Web Programmin 실행
1) 환경 설정( [Windows] - [preferences]에서 수행)
=>워크스페이스의 파인 인코딩을 utf-8로 변경 : [General] - [Workspace]탭의 오른쪽의 file Encoding을 변경
=> 실행되는 브라우저 변경 - Web 표준을 준수하는 브라우저에서 확인하기 위해
- Google Chrome에서 많이 테스트
- [General] - [Web browser] 탭에서 오른 쪽 창에서 설정
=> css와 html, jsp 파일을 utf-8로 생성하도록 설정을 추가 : [Web]탭에서 수행
2) Java를 사용할 수 있는 WebProject 생성
=> Dynamic Web Project로 생성
- 이 프로젝트가 없으면 일반 JavaApplication만 만들수 있는 Eclipse로 설치한 것
(Eclipse EE 버전으로 재설치해야함)
3) Dynamic Web Project 구조
=> Java Resources -> src : 컴파일 하는 파일의 디렉토리, java파일은 여기에 만들어야 사용가능한 class로 변환됨
=> Web Content : java 파일을 제외한 콘텐츠가 위치해야 하는 디렉토리
=> Web Content -> WEB-INF : web.xml 파일이 위치해야 하는 디렉토리
(spring을 이용전에는 타 종류 파일이 위치하면 안됨)
=> Web Content -> META-INF : context.xml 파일이 위치해야 하는 디렉토리
(spring을 이용전에는 타 종류 파일이 위치하면 안됨)
=> html, css, javascript, 기타자원들은 WebContent 디렉토리에 존재해야 함
- WebContent에 새로운 디렉토리를 만들어서 배치하는 것은 가능
4) WebContent 디렉토리에 index.html 파일을 추가
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>처음 만드는 페이지</h1>
<p>처음 만들어보는 HTML 페이지</p>
</body>
</html>
5) 실행
=> 프로젝트를 선택하고 마우스 오른 쪽을 눌러서 [Run As] - [Run on Server] 실행
- 처음 실행할 때 사용할 WAS 디렉토리를 선택해 주어야 함
- 실행이 안되고 8080포트 관련 에러가 발생 : 컴퓨터에 Oracle이 설치되어 있고, 실행중이어서 포트 충돌 발생
- 톰캣의 포트 변경 : eclipse를 보면 Servers 디렉토리에 가서 server.xml 파일을 열어서 수정
=> html이나 jsp 파일을 선택하고 실행하는 것도 가능(공부할 때만)
- index.html이 아닌 파일 실행시 파일명은 대소문자를 구분
=> index.html 파일이 아니면 실행을 하고, 브라우저에 실행하고자 하는 파일명을 입력해도 됨
6) 실행 한 경우의 URL(http://localhost:포트번호/프로젝트명/파일경로
=> index.html은 파일경로를 생략해도 됨
=> 배포가 되면 localhost 자리에 ip를 입력하면 다른 컴퓨터에서도 접속이 가능
- 0528_webfrontedn이 프로젝트 명인 경우 : http://localhost:9000/0528_webfrontend/index.html
=> 서버를 중지하지 않았으면 새로운 파일을 만들고 접속 할 때 브라우저에서 파일명만 고치면 됨
- 현재 파일을 수정했은 때는 저장하고 브라우저에서는 새로고침만 하면 됨
**XHTML
=> Web Browser에 보여지는 문서의 구조를 만드는 마크 업 언어
1. 요소의 구성 : <태그 속성 = 속성의 값> 내용 </태그>
=> 태그 : 문서의 구조를 의미하는 명령어
- 내용이 없는 태그는 <태그/>로 표현하기도 함
=> 내용 : 태그가 화면에 출력하는 내용
=> 속성 : 태그의 성격을 설정하기 위한 데이터
2. XHTML의 서식
=> 태그를 만들 때 종료 부분 생략 불가능
=> 태그 이름과 속성의 값은 소문자로 작성
=> 속성 사용시 속성의 값을 생략하면 안되고, 속성의 값은 "값"의 형태로 작성
=> 잘못된 중첩 사용 불가
=> 태그에서 사용하는 >, <, &는 < > &로 작성
3. 주석 : <!--주석-->
4. 문서의 유효성 검사와 DTD
1) DTD
=> 문서의 포맷을 나타내는 태그로 최상단에 기재를 하고 이를 이용해서 문서의 유효성을 검사
=> <!DOCTYPE html> 가 HTML5의 DTD
2) 유효성 검사
=> 기본 서식에 얼마나 충실하게 작성했는지 검사
=> http://validator.w3.org 에서 가능
5. 문서의 기본 구조
<!doctype html>
<html>
<head>
문서에 대한 설정
</head>
<body>
문서가 출력되는 부분
</body>
</html>
6. 태그 종류
1) block 요소 : 하나를 배치하면 좌우에 다른 요소가 배치될수 없는 요소(한줄에 하나만 배치되는 요소)
2) inline 요소 : 좌우에 다른 요소가 배치 될수 있는 요소
7. meta
=> 문서의 정보를 나타내는 요소
=> head에 작성
1) 인코딩 설정 : <meta charset="인코딩방식">
=> 이 설정이 없으면 브라우저의 기본 인코딩을 적용(한글 깨짐)
2) 검색엔진의 키워드를 설정 : <meta name="keywords"content="키워드, 키워드...">
3) 캐싱 여부 : <meta http-equiv="pragma" content="no-cache">
=> no-cache를 설정하면 캐싱되지 않고 이 태그를 생략하면 캐싱됨
4) 자동으로 리다이렉트 시키기
=> 다른 페이지로 이동 : <meta http-equiv="refresh" content="시간 url=이동할 경로">
=> 공지사항을 첫화면에 보여주고 메인 페이지로 이동하거나 미러사이트를 만들어서 처음 접속시 미러사이트로 보내버리는 용도로 사용
8. title
=> head 태그 안에 작성
=> 문서의 제목을 나타내는 태그
=> 탭 브라우저 탭의 나타나는 문자열이고, 즐겨찾기(bookmark를 하고자 할 때 보이는 문자열
=> <title>제목</title>
=> 메인페이지에서는 꼭 입력
9. <link>, <style>, <script>, <base>
=> head에 설정하는 것으로 link와 style은 스타일 시트 사용을 위한 태그
=> script는 스크립트 코드를 작성하기 위한 태그
=> base는 문서의 기본 위치를 나타내기 위한 태그
10. 제목 태그
=> <h1> ~ <h6>
=> 숫자가 작을 수록 글자가 큼
=> 블록태그 : 좌우에 다른 요소가 배치되지 않음
=> h1 태그는 문서에 한번만 나오는 것을 권장
=> 제목은 순서대로 배치 (ex- h2태그 다음에 h4태그가 오는 것은 바람직하지 않음)
- 사람의 눈으로 보기에 이 부분은 중요하지 않을수 있으나 로봇이 문서를 읽는 경우 구조가 중요한 문제가 됨
11. 텍스트 관련 태그
1) p 태그 : <p> 내용 </p>
=> 블럭요소
=> 하나의 문단을 만들 때 사용
2) br 태그 : <br/>
=> 빈태그(강제로 줄바꿈을 하고자 할 때 사용)
3) 물리적인 글꼴 태그
=> <b> : 굵게
=> <i> : 기울임
=> <s> : 취소선
=> <u> : 밑줄
=> <big> : 크게
=> <small> : 작게
=> <sup> : 위첨자
=> <sub> : 아래첨자
=> <tt> : 타이핑체
4) 논리적인 글꼴 : 화면에 보여지는 것은 그대로지만 로봇이 읽을 때 달라지는 것
=> <abbr> : 약어나 머리글자
=> <cite> : 인용구
=> <dfn> : 단어가 처음 등장했거나 단어의 정의가 별도로 존재
=> <code>, <var>, <samp>, <kdb> : 프로그래밍 요소
5) 블럭에서 수평 맞춤
=> 수평 가운데 맞춤 : <블록태그 align="center">
=> 수평 왼쪽 맞춤: left / 오른쪽 맞춤 : right
6) address
=> 웹문서 최하단에 작성하여 작성자나 작성자 이메일 및 주소 등을 표현하는데 이용
12. 구분선 : <hr/>
=> 빈태그(수평선을 그어 구분)
=> 속성
- width : 너비를 설정. 픽셀단위, 백분율을 입력가능. 정수 입력시 픽셀 단위, x%로 입력시 백분율 표기
- size : 두께. 설정 방법은 width와 동일
- align : 수평 맞춤. 기본값은 center
- noshade : 입체감을 없애줌
=> 입력은 상대단위, 출력은 절대단위
13. 하이퍼링크 : a
=> 다른 문서 나 문서 내의 특정한 위치로 이동할 수 있도록 해주는 태그
=> 인라인 태그라서 주위에 다른 태그가 배치될 수 있음
=> 속성
- href : 이동할 문서의 경로 또는 책갈피
=> 문서의 경로
- 절대경로 : 전체 경로
- 상대경로 : 현재 위치를 기준으로 설정하는 경로(현재위치는 파일의 경로가 아니라 URL(브라우저창의 주소))기준
( ./ : 현재위치(나), ../ : 부모 디렉토리, / : 루트 디렉토리)
=> 책갈피
- 문서의 내용이 길 때, 문서 중간에 이름을 붙여두는 것으로 id속성을 설정하고 href에 설정시 #id를 작성하면 됨
- 문서의 내용이 세로로 길 때, 하단에 가장 상단으로 이동할 수 있는 링크를 만들어두는 것이 좋음
=> target 속성
- 링크된 문서를 어떻게 열것인지를 결정하는 속성
- _self : 현재창에 열기(기본값)
- _blank : 새로운 창으로 열기
=> 이메일 주소나, 전화번호도 링크 가능(모바일의 경우 바로 진행 가능)
- 이메일 주소 : matilto:이메일주소
- 전화번호 : tel:전화번호
14. 목록 태그
1) 순서 없는 목록 : ul
<ul type="disc | circle | square">
<li>내용</li> ... <li>내용</li>
</ul>
2) 순서 있는 목록 : ol
<ol type="1 | A | a | 로마숫자">
<li>내용</li> ... <li>내용</li>
</ol>
=> css 를 이용하면 조금 더 다양한 타입을 사용할 수 있고, 이미지도 사용 가능
3) 정의형 목록 : dl
<dl>
<dt>정의할 제목</dt>
<dd>내용</dd>
</dl>
=> 내용이 들여쓰기가 되서 작성됨
Tip
1. Web Application, Web Service를 만드는 것(!= HomePage)
2. 반응형, 웹표준, 웹 접근성
3. 문서의 내용이 세로로 길때, '위로가기'를 만들어 두는 것이 좋음