![[HTML/CSS] 개발환경 설정 및 HTML의 개요](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F9943B8405BC96CD720)
1. 개발환경 설정 및 HTML의 개요
1.1 개발환경 설정
1.1.1 컴퓨터 초기화 : 개인 데이터 백업, IP 주소 메모
1.1.2 웹 프로그래밍 실습에 필요한 프로그램 설치
원할한 실습을 위해 디렉토리를 통일할 것을 권장함
html 실습을 위한 툴들은 다양함
Notepad, 드림위버, Visual Studio, Eclipse 등 다양한 툴로 실습이 가능하나 본 과정에서는 자바 기반의 웹 프로그래밍 실습을 위주로 진행되기에 자바 기반의 Eclipse를 활용하여 실습을 진행함('추후 Atom으로도 사용 예정)
1.1.3 크롬 브라우저 설치
1.1.4 자바 설치
Eclipse는 자바 기반의 프로그램이기 때문에 먼저 자바를 설치해야 함
현재 자바 최신 버전 jdk 10.0.1, Eclipse 최신 버전은 Photon(4.8)으로 설치하여 실습
자바에 대하여는 자바 수업 시간에 자세히 설명 예정
jdk - Java Development Kit(자바 개발 도구)
jre - Java Runtime Environment(자바 실행 환경)
주의사항 - 32비트 컴퓨터에는 32bit 버전을 설치해야 함, 64비트 컴퓨터에는 32bit와 64bit 버전을 모두 설치가능함(64bit 버전 권장)
Java SE(Standard Edition) 10 다운로드
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
기본 설치 디렉토리 변경(필수 사항은 아님)
jdk는 c:\jdk10 디렉토리로 변경하여 설치
jre는 기본 디렉토리로 설치
자바 설치 완료 후 환경변수 설정
- JAVA_HOME : c:\jdk1.8
- path 추가 : c\jdk1.8\bin
1.1.5 톰캣 설치
톰캣 다운로드 방법에 대한 자세한 사항은 여기를 클릭하세요.
9.0 zip 버전을 다운로드 받아 c:\tomcat9에 압축 해제
'''자주 참조해야 할 일이 많으니 짧게 설정해주는 것이 좋음
윈도우 시작 버튼을 누르고 cmd 실행
cmd에서 명령어 입력
cd c:\tomcat9\bin
startup
'''포트번호가 충돌날 경우(ex. 오라클) server.xml에서 포트번호를 80으로 변경
톰캣이 정상적으로 구동되면 웹 브라우저 주소창에 http://localhost:8080 입력
* HTML 템플릿 편집
Window → Preferences → Web → JSP FIles → Editor → Templates → New JSP File(html) 선택 → Edit 클릭
다운로드 받은 이클립스 압축파일의 압축을 해제한 후 d:\eclipse 디렉토리로 옮김
d:\eclipse 디렉토리의 eclipse.exe를 실행
workspace를 d:\work로 변경함
1.1.6 이클립스의 설치
Eclipse EE 설치(http://eclipse.org): Java + JSP 실습 가능한 EE 버전으로 설치
'''Elipse 설치에 대한 자세한 사항은 여기를 확인하세요.
다운로드 받은 이클립스 압축파일의 압축을 해제한 후 d:\eclipse 디렉토리로 옮김
d:\eclipse 디렉토리의 eclipse.exe를 실행
workspace를 d:\work로 변경함
'''실무에 가면 자바 웹 프로그래밍은 윈도우즈 서버에서 안돌리고 리눅스 서버에 돌린다.
1.1.7 이클립스의 환경 설정
* 한글 인코딩 방식
euc-kr(ms949) 완성형, 한글 2바이트
utf-8 조합형(초성, 중성, 종성을 1바이트씩), 한글 3바이트, 영문 1바이트
'''java에서 utf-8이 인코딩 표준으로 되어 있다.
General-Workspace-Text File encoding 속성을 UTF-8로 변경
General-Editors-Text Editors-Spelling-Encoding 속성을 UTF-8로 변경
Web-CSS FIles, Web-HTML Files, Web-JSP FIles Encoding을 UTF-8로 변경
* HTML 템플릿 편집 'photon 이전 버전 해당
Window → Preferences → Web → JSP Files → Editor → Templates → New JSP(html) 선택 후 → Edit 클릭
!DOCTYPE을 HTML 4.01에서 HTML5 형식으로 변경
변경 전
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
변경 후
<!DOCTYPE html>
1.1.8 Eclipse에서 Dynamic Web Project 생성
프로젝트 이름을 web01로 설정
* Dynamic Web Project의 디렉토리 구조
src : 자바 클래스가 저장되는 경로
WebContent : 웹컨텐츠(html, jsp, javascript, css)를 저장하는 디렉토리
WebContent/WEB-INF : 시스템 디렉토리(웹프로젝트의 환경설정)
WebContent/WEB-INF/web.xml : 웹프로젝트의 환경설정 파일
WebContent/WEB-INF/classes : 컴파일된 코드
WebContent/WEB-INF/lib : 외부라이브러리 전용 디렉토리
1.2 HTML의 개요
1.2.1 WWW(World Wide Web) : 웹, 세계를 뒤덮는 거미줄이라는 의미
1.2.2 HTML(Hyper Text Markup Language)
웹 페이지를 기술하기 위한 언어, 1990년 물리학자인 팀버너스리가 연구팀의 문서 공유를 위하여 개발함
1.2.3 XML(eXtensible Markup Language) : 확장가능한 마크업 언어
'''주로 데이터를 전달하기 위한 용도로 많이 쓰임
1.2.4 웹브라우저 : HTML 소스를 번역하여 화면에 출력시키는 프로그램
- Internet Explorer
- Google Chrome
- 파이어폭스
- 사파리
- 오페라
* 웹브라우저 사용 통계(http://gs.statcounter.com)
* W3C(World Wide Web Consortium) : 웹표준 기관
1.2.5 HTML의 버전
- 1999년 HTML 4.01
- 2000년 XHTML 1.0
- 2009년 XHTML 2.0 포기
- 2012년 HTML 5
1.2.6 웹 표준
- 웹 프로그래밍에서 지켜야 하는 표준적인 규칙, 어떤 운영체제나 웹브라우저에서도 비교적 동일한 디자인과 기능을 구현하기 위한 목적
- 우리나라의 많은 사이트가 웹표준을 어기고 인터넷 익스플로러에서만 작동되는 비표준 기술과 액티브 X 기술을 남용하여 다른 브라우저 및 모바일 기기에서 정상적으로 이용할 수 없는 문제가 많이 발생했음
1.2.7 JavaScript (자바스크립트)
- Java(jsp) : compile 언어, server에서 실행
- JavaScript : interpreter(인터프리터)언어, client에서 실행
- JavaScript는 자료형이 없음(가변 자료형)
var a = 10;
a = "hello";
a = 10.5;
- jQuery(http://jquery.com) : 자바스크립트 라이브러리
1.2.8 HTML 문서의 기본 구조
* DOCTYPE : HTML 문서의 버전을 표시함
HTML 5
<!DOCTYPE html>
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
"http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN">
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
* HTML 태그의 속성 : <태그 속성="값">
1.3 실습예제