[HTML/CSS] 개발환경 설정 및 HTML의 개요
programming/html-css

[HTML/CSS] 개발환경 설정 및 HTML의 개요

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이 인코딩 표준으로 되어 있다.


* 이클립스의 인코딩 설정을 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 실습예제


ch01/first.html