(65)[Web]1일차: ■ HTML ■ / 이클립스 WebStudy 환경셋팅 / Test001~003

1. 23.11.27(월)

■■■ HTML ■■■

○ 개요

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

○ HTML 의 변천사

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

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

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

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

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

    - (중략...)

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

        ※ XML(eXtensible Markup Language)
            W3C 에서 마크업 언어를 만드는 용도에서 권장되는 다목적 마크업 언어이다.
            XML 은 주로 다른 시스템, 특히 인터넷이 연결된 시스템끼리
            데이터를 쉽게 주고받을 수 있게 하여 XML 의 한계를 극복할 목적으로 만들어졌다.

    - 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 는 2004년 10월 28일 기준 표준 권고안으로 확정되었다.

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

○ HTML 과 웹 브라우저

    우리가 보는 웹 페이지는 사실 HTML 문서이다.
    텍스트 기반으로 작성한 문서를 웹 브라우저가 시각적으로 향상된 형태로 해석해서 우리에게 보여주게 된다는 것이다.
    웹 브라우저마다 여러가지 장단점이 있다.
    우리나라 같은 경우는 ActiveX등 여러 이슈로 인해 인스플로러를 많이 사용하게 되었지만,
    HTML5 를 가장 잘 지원하는 브라우저는 크롬이며,
    지금에 와서는 브라우저마다 큰 차이가 없게 되었다.
    (2023년 11월 27일 기준)

    ※ HTML5 호환성 정보 확인 -> http://html5test.consortium

○ HTML5 웹 표준 기술과 API

/* **1~3 중요** */
    1. 웹 페이지의 내용은 HTML로 작성한다.                      (구조)
    2. 웹 페이지의 스타일은 CSS 로 작성한다.                    (표현)
    3. 웹 페이지의 상호작용(동작, 행위)은 JavaScript로 작성한다. (기능)

    ※ 구조와 표현과 기능을 분리한다.check~!!!

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

    ※ HTML4.01 에서 HTML5로 넘어오면서 바뀐 점은
    <https://ko.wikipedia.org/wiki/HTML5>
    를 참조하여 확인할 수 있도록 한다.

    해당 URL의 Document에서 빠진 항목을 보충하자면
    - 오프라인으로 웹 애플리케이션 실행 가능
    - 드래그 앤 드롭
    - 웹 스토리지
    - 위치 정보 제공
    - 웹 SQL 데이터베이스
    - 파일 업로드와 관리 기능 제공
    - 웹 소캣 ApI
    등이 있다.

이클립스 WebStudy 환경셋팅

- 웹 서버를 구축해 웹 서비스를 할 수 있게 만들 것

왼쪽 Project Explorer 탭 > Servers > Tomcat v8.5.. > server.xml > Source

기타_ 배치기술서(web.xml)

- 단축키-> 라인 화면 밖으로 안 넘어가게 하는 단축키 ctrl + shift + f

1. 새로운 WebApp04 만들 때

배치기술서 체크 안했을 경우!

새로 만들지 말고, 아래와 같이 수정

F_WebApp00

F_WebApp01

ㄴ C:\WebStudy\WebApp01\WebContent

ㄴㄴFirstHTML.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서의 제목이 들어간다.</title>
</head>
<body>
	문서의 내용이 들어간다.(osk)
<!-- 	
	http://localhost:3306/WebApp01/FirstHTML.html
	---- 프로토콜▶통신규약
		   -------------- 로컬호스트:포트번호▶지역적인 호스트, [생략가능] 웹서버를 통신하는 포트번호 '80'
		   				---------- 프로젝트
		   						  ---------------- 문서
		   						  
	도메인 등록(주소를 하나 사는 것), 웹 호스팅 서비스 가입
 -->
</body>
</html>

ㄴㄴTest001.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test001.html</title>
</head>
<body>
	**
	- 주석		: ctrl + shift + /
	- 주석 해제 : ctrl + shift + \
	**
	
	<!-- 본인이름 -->
	
	<!-- 짝꿍이름 -->
	짝짜꿍
	**
	- html 상에서 띄어쓰기는 한줄로 처리됨(띄어쓰기 코드가 따로 있음)
	- 엔터도 코드가 아니면 인식되지 않음
	**
	
	<br>
	<br>  **br태그: 단독태그. br의 개수만큼 줄바꿈**

	<!-- 문단 구성 -->
	<p>항상 그래왔던 것 처럼...</p>

	<!-- 개행 테스트 -->
	<!-- **
	- 태그는 대소문자 구분 안하지만, 소문자로 쓰는 것을 원칙으로 함 
	** -->
	우리는 익숙해지기 위한 길목에서<br/>
	첫 번째 모퉁이를 돌기 위해<br><BR> 노력하고 있습니다.
	후회 없도록 열심히 합시다.<br><br><br>
	
	<!-- 영역 구성 -->
	<div>첫 번째 div 영역
		<h1>h1 ~ h6 는 제목을 표현할 때 사용한다.</h1>
		<h2>숫자가 늘어갈 수록 더 자은 개념의 제목을 표현하기 위해 사용된다.</h2>
		<h3>더 작은 제목이라 함은 보여지는 크기도 포함하고 있지만</h3>
		<h4>실무적으로 웹 표준을 근거로 사용할 때에는 의미를 담아 사용해야 한다.</h4>
		<h5>여섯 단계로 나뉘며</h5>
		<h6>그 이외의 단계는 존재하지 않는다.</h6>
		<h8>h8 태그: 웹페이지 상에서 표시해주지만, 의미를 갖지는 않음</h8>
	</div>
	
	<div>
		두 번째 div 영역<br>
		br 태그(엘리먼트)는 개행을 할 때 사용한다.<br>
	    <p>p 태그(엘리먼트)는 문단을 지정하고자 할 때 사용한다.
	    문장 여러 개를 감싸서 단락을 표현할 때 주로 사용하게 된다.</p>
	</div>
	
	<div>
    	세 번째 div 영역<br>
	    <p>span 태그(엘리먼트)는 문장의 일부 단어나 문장을 특별한 형태로 처리할 때 사용한다.<br>
	    일반적으로 <span style="font-size: 20pt; font-weight: bold; color: red;">CSS</span>와 같이 표현된다.</p>
	    style=""안의 ;는 종결자가 아닌 구분자!
	</div>
	
	
	
</body>
</html>

ㄴㄴTest002.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test002.html</title>
</head>
<body>
<div>
	<h1>목록 관련 태그</h1>
	<hr>
</div>

<div>

<!-- ※ 관찰 -> 앞에 띄어쓰기나 들여쓰기를 하지 않은 상황 -->
<div>
	<!-- 순서 있는 목록 -->
	<ol>
		<li>텍스트 관련 태그</li>
		<li>목록 관련 태그</li>
		<li>다른 여러가지 태그</li>
	</ol>
	<!-- ※ 관찰 -> 각 아이템들(항목들) 사이에는 개행 태그(br)를 넣지 않았음 -->
	<!-- ※ 관찰 -> 각 아이템들(항목들) 사이에는 개행 태그(br)를 넣지 않았음 -->
	
	<!-- 순서 없는 목록 -->
	<ul>
		<li>텍스트 관련 태그</li>
		<li>목록 관련 태그</li>
		<li>다른 여러가지 태그</li>
	</ul>
	<!-- ※ 관찰 -> 각 아이템들(항목들) 사이에는 개행 태그(br)를 넣지 않았음 -->
	
	
</div>

</div>

</body>
</html>

ㄴㄴTest003.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test003.html</title>
</head>
<body bgcolor="blue" text="white" background="images/img_02" leftmargin="100" topmargin="100">
<!-- **bgcolor 라는 속성으로 부여한 것. 쓰지 않는 것을 권장** -->

<!-- **권장하지 않는데, 왜 사용할 수 있는 것일까?
	ㄴ 이유: 과거의 사이트는 해당 속성을 사용했기 때문에, 해당 방법을 아예 못쓰는 것을 강제하지는 못함**
 -->
 
<!-- 여백의 두가지 
	margin: 안쪽여백
	padding: 바깥여백
 -->
<div>
	<h1>body 태그에 관한 속성 살펴보기</h1>
	<hr>
</div>

<div>
	본문 내용<br>
	각자 배경색과 배경 그림도 바꾸어보고...<br>
	본문에서 사용하는 글자색과 여백도 설정해보자.<br>
</div>


</body>
</html>

'📝 배우고 익히기 + > Web' 카테고리의 다른 글

(68)[Web]3일차: ■ Javascript 개요 및 기본문법 ■ / F_WebApp03>Test001~Test014 (0)	2023.11.29
(68)[Web]3일차: ((CSS)) F_WebApp02>Test005~020 (4)	2023.11.29
(66)[Web]2일차: CSS 개요 / ■ CSS ■ / F_WebApp02>Test001~004 (0)	2023.11.28
(66)[Web]2일차: ((HTML)) F_WebApp01>Test005~023 (1)	2023.11.28
(65)[Web]1일차: 웹 개요 (3)	2023.11.28

🍀보통 기록합니다💭

(65)[Web]1일차: ■ HTML ■ / 이클립스 WebStudy 환경셋팅 / Test001~003

1. 23.11.27(월)

■■■ HTML ■■■

○ 개요

○ HTML 의 변천사

○ HTML 과 웹 브라우저

○ HTML5 웹 표준 기술과 API

이클립스 WebStudy 환경셋팅

기타_ 배치기술서(web.xml)

배치기술서 체크 안했을 경우!

F_WebApp00

F_WebApp01

ㄴ C:\WebStudy\WebApp01\WebContent

ㄴㄴFirstHTML.html

ㄴㄴTest001.html

ㄴㄴTest002.html

ㄴㄴTest003.html

'📝 배우고 익히기 + > Web' 카테고리의 다른 글

티스토리툴바

(65)[Web]1일차: ■ HTML ■ / 이클립스 WebStudy 환경셋팅 / Test001~003

1. 23.11.27(월)

■■■ HTML ■■■

○ 개요

○ HTML 의 변천사

○ HTML 과 웹 브라우저

○ HTML5 웹 표준 기술과 API

이클립스 WebStudy 환경셋팅

기타_ 배치기술서(web.xml)

배치기술서 체크 안했을 경우!

F_WebApp00

F_WebApp01

ㄴ C:\WebStudy\WebApp01\WebContent

ㄴㄴFirstHTML.html

ㄴㄴTest001.html

ㄴㄴTest002.html

ㄴㄴTest003.html

'📝 배우고 익히기 + > Web' 카테고리의 다른 글

관련글

티스토리툴바