[HTML] 001. HTML 의 개요 , Eclipse 설정 Export-Import 로 기존 설정 가져오기

*파트에 들어가기 전 당부사항*
개략적 파트들을 다룰 예정으로, 개인적인 공부가 많이 필요함
- 이후 WebServer 파트를 다루기 위해 다루는 것
1. 프레젠테이션으로 개략적 개념 다룸
2. 서버와 관련된 부분 관련 코드레벨에서 보게 된다.
3. JSPServelet 다룰 때 넘어간 부분들을 보게된다.

---

HTML

■■■ HTML ■■■

○ HTML 개요

HTML 이란 Hyper Text Markup Language 의 약어로,
웹 페이지를 기술하기 위한 언어이다.
▶
마크업 언어(Markup Language)는 텍스트에 태그(ex) <title>)를 붙여서
텍스가 문서의 어디에 해당하는지를 기술한 것이다.
기본적으로 시작 태그가 있으면 종료 태그가 있다는 것을 알아두자
(ex) <title>문서의 제목</titile>)
//(ex) <name>dhngifhao</name> 이렇게 보면 안의 문자를 읽을 수 없어도 이름인 것을 알 수 있음)

○ HTML 의 변천사

최초의 HTML 은 ▶팀 버너스리 라는 CREN(유럽 원자핵 공동 연구소)의 물리학자가 만들었다.
이후 ▶W3C(World Wide Web Consortium)이 창립되어 
팀 버너스리의 주도 아래 HTML 에 대한 표준을 관장하고 있다.

- 1989년
  HTML 의 시작은 CERN 의 팀 버너스리가 인콰이어를 제안하면서 시작되었다.
  인콰이어는 CERN 의 연구원들이 문서를 이용 / 공유하기 위한 체계였다.
  1989년 팀 버너스리는 CERN 측에 자금 지원을 요청했지만
  인콰이어 프로젝트느 CERN 으로부터 정식으로 채택받지 못했다고 한다.

- 1991년
  비공식적인 CERN 의 문서를 보면 1991년 말 팀 버너스리가 HTML 태그를 대중에게 언급했다고 한다.
  HTML 기본서에서 제일 먼저 언급되는 HTML 태그가 1991년에 처음으로 공개된 것이다.
  이 때 만들어진 태그 중 일부가 HTML 4 버전에도 여전히 존재한다.

- 1992년
  1992년 7월 HTML DTD 1.0 의 첫 번째 비공식 초안이 나왔으며
  11월 HTML DTD 1.1 비공식 초안이 발표되었다.

▶※ DTD(Document Type Declaration)
     DOCTYPE 이라고 불린다.
     DTD는 HTML 이나 XML 문서에서 사용이 허가되는 요소나 속성을 정의한 것이다.
     즉, HTML 이나 XML 이 특정 형식 정의를 따르고 있다는 것을
     웹 브라우저에게 알려주는 것을 말한다.
     간단히 말하자면, "이러이러한 형식으로 문서가 작성되었습니다."
     라고 선언하는 것이다.

- (중략...)

- 1999년 ~ 2000년
▶1999년 12월 HTML 4.01 이 발표되었다.
  새로운 Style Sheet 추가, Short Table 추가 등의 수정 사항이 있었다.
  2000년 1월에는 W3C 에서 XHTML 1.0 권고안이 발표되고
  이를 표준으로 집중시키려 하게 된다.

▶※ XML(eXtensible Markup Language)
     W3C 에서 마크업 언어를 만드는 용도에서 권장되는 다목적 마크업 언어이다.
     XML 은 주로 다른 시스템, 특히 인터넷이 연결된 시스템끼리
     데이터를 쉽게 주고받을 수 있게 하여 HTML 의 한계를 극복할 목적으로 만들어졌다.
     ------------------------ (데이터 교환)
// XML 은 정확한 문법을 지키지 않으면 데이터가 깨짐
// XML (보수) + HTML (자유분방) -> 표준화를 위해서 XHTML 을 만들게 됨
// 즉 웹브라우저 Vendor들이 자정을 위해서, XHTML 은 HTML 을 보수적으로 만들기 위해서 만들게 된 규제

- 2001년
▶2001년 5월 W3C 에서는 XHTML 1.1 권고안을 발표하였다.
  XHTML 1.1 은 모듈 기반의 XHTML 이다.

- 2002년 ~ 2006년
  2002년 8월 부터 2006년 7월 까지 총 8번의 XHTML 2.0 초안을 W3C에서 발표한다.
  하지만, 하위 호환성 문제와 HTML5에 의해서 XHTML 2.0 은 2009년에 개발이 중단된다.

- 2007년 ~ 2014년
  2007년 Web Application 1.0 이 XHTML 2.0 을 앞서면서(호환성 문제)
  W3C 는 Web Application 1.0 을 기초로 HTML Working Group 을 출범시키고,
  이 표준안의 명칭을 HTML5 로 변경하였다.
  드디어 HTML5 가 이름을 얻는 순간이다.
  HTML5는 다양하고 새로운 기능들과 함께 HTML4, XHTML1, DOM Level 2 HTML 을 포함한다.
  (호환성을 갖고 있다는 의미)

  2008년 1월 HTML 명세에 대한 '첫 번째 공개 작업 초안'이 공표된다.
  그리고 현재 HTML5 는 2014년 10월 28일 기준 표준 권고한으로 확정되었다.

▶1989년 부터 HTML 은 등장 이후
▶1999년에 4.01 , 2014년에 HTML5 까지 나오게 된다.

○ HTML 과 웹 브라우저

우리가 보는 웹 페이지는 사실 HTML 문서이다.
텍스트 기반으로 작성한 문서를 웹 브라우저가 시각적으로 향상된 형태로
해석해서 우리에게 보여주게 되는 것이다.
웹 브라우저마다 여러가지 장단점이 있다.
// 웹브라우저 전쟁에 의하면,
// 웹브라우저 1차 대전 : netscape  VS. ms의 internet explorer 
// 원래는 netscape 가 점유율이 굉장히 높았는데 ms의 공정 거래 위반으로
// ms가 윈도우 팔면서 internet explorer 를 끼워 팔아서 점유율이 뒤바뀌게 되면서 netscape 가 망함
// 해당시기에 굉장히 많은 HTML 문법이 훼손되었다고 함
우리나라 같은 경우는 ActiveX 를 사용하는 웹 페이지가 많았기 때문에
//                   └> 익스플로러에서 지원하는 모듈이어서
인터넷 익스플로러를 많이 사용하고 있지만,
HTML5 를 가장 잘 지원하는 브라우저는 크롬이다. (2022년 3월 30일 기준)
현재 HTML5 관련 테스트 결과 : 크롬, 엣지, 익스플로러 모두 같음 (2023년 5월 2일 기준)

※ HTML5 호환 정보 확인 → http://html5test.com

○ HTML 표준 기술과 API

1. 웹 페이지의 내용은 HTML 로 작성한다.		(구조)
2. 웹 페이지의 스타일은 CSS 로 작성한다.		(표현)_// 미적감각은 여기서 표현하세요
3. 웹 페이지의 상호작용은 Javascript 로 작성한다.	(기능)_// 동작하는 것

※ 구조와 표현과 기능을 분리한다 check!!! → 웹 표준의 핵심

오래전부터 이와 같은 개발방식을 사용하고는 있었지만
HTML5 부터 웹 표준 기술로 확립되었다.
이와 같이 작업하면 웹 프로그래머와 웹 디자이너라는 업무 영역을
나눌 수 있기 때문에 효율적인 개발이 가능하다.

※ HTML4.01 에서 HTML5 로 넘어오면서 바뀐 점은
   『https://ko.wikipedia.org/wiki/HTML5』
      해당 URL 의 Document 에서 빠진 항목을 보충하자면
   - 오프라인으로 웹 애플리케이션 실행 가능
   - 드래그 앤 드롭
   - 웹 스토리지
   - 위치정보 제공
   - 웹 SQL 데이터베이스
   - 파일 업로드와 관리 기능 제공
   - 웹 소켓 API
   등이 있다.

※ 웹브라우저 전쟁에 관한 책을 읽어보는 것을 권장

해당 문서의 한 면을 웹 페이지라고 한다

---

• 프레젠테이션 내용

<PART1>

---

01) 인터넷과 웹
 - 인터넷 ≠ 웹 (인터넷의 일부분이 웹)
 - 팀 버너스 리, W3C

---

02) 웹 브라우저 전쟁과 웹 표준
 - 브라우저 기업들 간의 (익스플로러 제외)
    WHATWG(왓워킹그룹/웹하이퍼텍스트애플리케이션테크놀로지워킹그룹)

---

03) 웹 동작
 - 웹 : 요청과 응답 과정 (해당부분을 반복)
 - 서버 주소 문서 ~ 했던 부분을 합친 것이 url

▶ 자바와 자바스크립트는 아무런 관련이 없다 :-p

---

04) 웹 표준 기술과 HTML5 주요기능 
- 웹 표준 기술 : 웹 표준 기술을 총칭 : HTML5(구조) + CSS(표현) + 자바스트립트(행위)
- xxx.html -> 특정 운영체제에서 html 네자리 확장자의 표현이 불가능해서 xxx.htm 으로도 표현 가능하게 함 

- CSS (Cascading Style Sheets)
            ------------- 아래로 물려주어 영향을 미치는 형태 (계층구조)

- 자바스크립트의 표준 명칭 ECMAScript 


- HTML5의 주요기능 
  ▷ 시맨틱(semantic) : 의미를 부여했다는 뜻
   - 태그만 보고도 문서를 쉽게 이해할 수 있도록 의미를 가지는 태그

<PART2>

---

01) HTML5 기본용어
- <h1> (여는 태그) </h1> (닫는 태그) 로 쌍으로 구성되어있는데
- <img>, <br>, <hr> 은 혼자서 이루는 단독태그로 구성

- 속성 : 태그에 추가 정보 부여할 때 사용
 (a) <h1 title="header"> HELLO HTML5 </h1>

- HTML 의 주석 : (한 줄 주석은 별도로 없음)  <!--(여는것)   주석  (닫는것)--> 

---

02) HTML5 페이지 구조와 작성방법
    - HTML 은 대소문자 구분을 안하나, 태그들은 소문자로 구성하기가 권장된다
<!DOCTYPE html>
<html>
<head>
      <title></title>  -- 탭 이름
</head>
<body>
            -- 실제로 사용자에게 보여지는 내용들
</body>
</html>

<script> </script> : 해당 사이의 내용은 html의 영역안에 위치는 하고 있으나 Script 의 영역이다.
                               주석처리 :  //  (자바스크립트의 주석) 

---

03) 오류와 검증

- 웹 브라우저 검사를 통한 디버그 : 크롬열고 [F12]

<PART3>

---

01) 글자 태그
- 페이지에서는 글자 태그의 비중이 크다 
- (코드레벨에서 확인하겠지만)제목 태그 :  h1 ~ h6 (큰 글자 → 작은 글자) , h는 Heading 을 의미
   현재 웹 표준에서 본다면 위반인 부분 : 시각적인 표현(css 의 영역)을 위해 해당 태그를 사용하는 것은 오류
                                                                  다만, 의미를 가지고 사용하는 것은 ok

의미를 담아서 사용하면 ok

 - css 에서 스타일 제어를 통해 모든 태그들의 크기를 동일하게 하거나 하는 것은 전혀 문제가 없다
 - b 태그(굵은글씨)나 i 태그(기울어진글자)를 스타일로 사용하면 위와 동일한 이유로 잘못된 사용이다

- a 태그(Anchor) : 다른 웹 페이지나 웹 페이지 내부의 특정 위치로 이동 
   (// 하이퍼링크 이동 기능을 가지고 있음)
<a href="http://www.naver.com"> : 다른 페이지로 이동도 가능 

---

 02) 목록태그
- 순서가 있는 목록 ex) 1, 2, 3, 4
- 순서가 없는 목록 ex) · · · 

---

03) 테이블 태그
- 테이블 태그 : 문서안에 표를 만드는 태그 (유행 타는 태그)
  따라서 , div 태그와 테이블 태그 둘 다 사용할 줄 알아야 한다
- 테이블 태그 병합 등을 통해서 편하게 꾸밀 수 있음

---

04) 미디어 태그
- 오디오, 이미지 등 가져올 수 있는 태그

<PART4>

---

01) 입력양식 개요
- 입력박스, 셀렉트박스 등
- <form></from> 태그 : (영역 생성) 클라이언트 쪽에서 서버로 옮길 수 있는 유일한 태그 
                                        body 태그 안에 form 태그를 통해서 작성하지 않으면 데이터 전달이 불가능
- GET 방식    : 주소에 데이터 입력해서 전달 // (엽서 : 바깥에 주소를 쓴다)
- POST 방식  : 주소 변경 없이 비밀스럽게 데이터 전달 // (편지 : 편지봉투 안 내용을 볼 수 없다)

- 입력양식태그

---

 02) HTML5 문서 구조화
- 공간 분할 태그 :  <div>, <span> 
- 시맨틱 태그

<PART5>

---

01) HTML5의 특징
- W3C 의 HTML 관련기술 문서 ( https://html.spec.whatwg.org/multipage/ ) 를 참고하여,
  정확하게 문법을 이해하고 최신정보를 얻을 수 있다. 

---

Eclipse 설정 바꾸기

 

기존 워크스페이스 접속

기존 설정 내보내기

다운로드 폴더에 새 폴더 생성 후 넣기

워크스페이스 변경해서 연다!

Export 한 걸 불러오기

브라우즈 클릭해서 아까 만든 epf 파일 가져오기

import all 체크 확인 Finish >>> restart 해서 폴더 webstudy 로 변경하여 접속한다

HTML 실습환경 조성

제대로 설정했는가 확인하기

새 Dynamic Web Project 생성

WebContent 파일에 직접 만들어야 함 / 하위폴더 XXXXX

NEXT >>> HTML5 방식으로 되어있는지 확인하고 생성!

이렇게 웹 콘텐트 하위파일로!

EUC-KR 방식으로 나오는데 이제부터 설정 바꿀거라 과감히 DELETE 해주기

UTF-8 로 변경해주고 apply and close 하기

다시 html 파일 생성

UTF-8로 만들어졌는지 확인 후 필기하세용

하단에 server 확인