20180905 학원수업 HTML개요,헤드,글자태그

@ 인터넷이란?

-> 전 세계의 컴퓨터가 서로 연결되어 정보를 교환할 수 있는 하나의

거대한 컴퓨터 통신망

-> 인터넷에서는 다양한 서비스를 제공함

- Web Service, FTP Service, Mail Service 등등

-> 프로토콜을 이용하여 통신 규약을 약속하여 통신함

- Web == HTTP, Mail == SMTP, POP3, IMAP 등등

@ 웹(Web) 이란?

-> 인터넷에서 연결된 시스템의 "정보"를 한 위치에서 

"검색" 할 수 있는 서비스

-> 1989년 CERN(유럽 입자 물리 연구소)의 팀 버너스 리(Tim Berners-Lee)

에 의해 개발됨

-> Hyper text를 통해 정보를 교환하는 서비스

- Hyper Text : 하나의 웹 문서에서 제공하는 연결 주소(링크)를

통해 다른 문서로 이동 하는 것

@ Web Version

- Web 1.0 : 정적인 검색 서비스 제공 (초기 서비스 버전)

    동적인 검색 서비스 제공 (현재 가장 많이 사용되는 기본 버전)

- Web 2.0 : 지능형 웹 서비스

(사용자의 패턴을 분석하여 개인별 맞춤 정보 검색 서비스를 제공)

- 사용자에게 필요한 지식만을 자동으로 검색하여 보여줌

- facebook, youtube, instagram 등등

@ HTML

-> Hyper Text Markup Language 의 약자

-> Web Data(Web Page)를 전송하기 위해 HyperText를 구성하는

Markup Language(마크업 언어)

※ 마크업 언어 

- 태그를 이용하여 문서나 데이터의 구조를 정의하는 언어

@ HTML의 역사

1. 인터넷의 시작

- ARPANET은 미국에서 소련의 인공위성 발사 성공에 대한 위협을

느껴 새로운 기술을 연구하여 만들게 되었음 (군사목적)

- 핵과 같은 공격에 대비하여 전체 통신 시스템에서 데이터를 안전하게

보관 및 전송할 수 있는 시스템을 만들려고 하다가 

ARPANET을 만들게 되었고, 이것이 현재 인터넷의 시초가 되었음

2. 유럽 공동 원자핵(입자) 연구소의 팀버너스 리

- 팀 버너스 리의 제안으로 웹이 개발되기 시작하였음

- 추후 팀 버너스 리는 W3C라는 재단을 창설하였음

- W3C는 웹의 표준을 지정하는 기관 (HTML 표준을 제정하는 단체)

- W3C는 HTML 표준을 제정하지만 표준을 강제화 하지는 않았음

  (강제화하지 않았다는것은 변형해서 써도 된다는 의미)

- 이로 인하여 웹 브라우저 전쟁이 일어나게 됨

3. 제1차 웹 브라우저 전쟁

- 최초의 GUI 모습을 갖춘 '모자이크' 브라우저가 탄생함 

(기존에는 웹 브라우저들은 TUI형태였음)

- 모자이크는 발전하면서 모자이크 커뮤니케이션에서 넷스케이프 커뮤니

케이션으로 이름을 바뀜

-> 웹 브라우저 명칭도 모자이크에서 넷스케이프로 바뀜

- 1994년 넷스케이프는 정식 버전을 발표하고 배포를 시작함

- 이에 맞서 마이크로 소프트가 인터넷 익스플로러를 발표함

- 두 회사는 자신들의 웹 브라우저를 사용자가 쓰게 하기 위하여

W3C의 표준을 무시하고 엄청나게 많은 기능을 추가해 서로의 웹 브라우저가

최고가 되도록 노력함

- 그러나 인터넷 익스플로러가 아무리 발악을 해도 넥스케이프를 이기지

못하자 마이크로소프트 사는 윈도우 운영체제에 강제적으로 인터넷 

익스플로러를 설치하게 만들어 점유율을 높임

(사용자들은 이미 설치된 브라우저를 주로 사용하게 됨)

- 결국 넷스케이프는 인터넷 익스플로러의 점유율을 따라잡기 힘들어지고

1998년에 아메리카 온라인 사에 인수됨

4. 플러그인

- 웹 브라우저 전쟁으로 인해 웹은 엄청난 속도로 발전하기 시작함

- 하지만 정작 웹 표준을 지정하는 W3C는 빠르게 대응하지 못함

(기술력 부족)

- 이에 불만을 느낀 기업들은 플러그인을 만듦

-> 플러그인은 웹 브라우저와 연동되는 특정 프로그램을 사용자

PC에 추가적으로 설치해 웹 브라우저 기능을 확장하는 방법

- 1996년부터 현재 어도비 플래시, 액티브엑스 등은 웹을 점점 풍부한

기능을 가진 공간으로 만들어 줌

- 그로 인하여 웹 브라우저를 통하여 동영상 시청, 음악 감상 및

금융 업무 등을 볼 수 있게 됨

5. 웹 2.0 시대

- 2000년대부터 액티브엑스를 기반으로 웹 애플리케이션들이 제작되었음

- 또한 플래시를 기반으로 일반 사용자를 위한 애니메이션들이 만들어 졌음

-> 졸라맨, 우비소년, 마시마로 등등

- 플래시와 액티브 엑스는 점점 더 발전 하게 됨

-> 플래시는 지속적으로 개발되어 웹 애플리케이션을 개발할 수 있는 플렉스로 발전 됨

-> 플렉스는 웹 페이지를 쉽게 개발할 수 있는 프로그램

- 인터넷은 점점 사용자끼리 뭉쳐 새로운 컨텐츠를 개발할 수 있는 공간으로 발전하게 되고, 사용자끼리 정보 및 컨텐츠를 올려 창조할 수 있게 되는 

웹 2.0 시대를 맞이 하게 됨

-> youtube, 위키피디아, facebook 등은 사용자가 서로 정보를

공유하여 만들어진 공간

6. WHATWG의 등장

- 전 세계 최고 점유율을 가진 인터넷 익스플로러는 사실상 W3C의 

표준 웹 브라우저가 됨

- 그러다 보니 모든 웹 사이트의 액티브엑스 플러그인이 들어가게 되면서

웹 사이트는 무거워 지기 시작함

(특정 페이지를 사용하려면 액티브엑스를 설치해야 하기 때문!)

- 이를 막고자 2004년 W3C회의에서 모질라 재단과 오페라 소프트웨어는

새로운 HTML 표준 제안서를 제출함

-> 그러나 이 제안은 "웹의 혁명을 위한 기존의 지향점에 위배 된다" 라는 이유로 거절 당함

- 그리하여 인터넷 익스플로러를 제외한 웹 브라우저 제공 기업 (애플, 모질라, 오페라 소프트웨어)은 독자적으로 새로운 웹 표준 기관을 설립함

-> 이 기관을 WHATWG 라고 부름

(Web Hypertext Application Technology WorkinG)

- WHATWG는 새로운 웹 표준으로 Web Application 1.0 표준을 작성 함

- 이와 비슷한 시기에 W3C는 마이크로 소프트사와 XHTML 2.0표준을 작성

하였으나 기존의 표준과 너무 동떨어 지고 사용하기 불편하여

자연스레 개발자들은 XHTML2.0 표준을 사용하지 않게 됨

(2009년에 XHTML2.0 표준은 폐기됨)

- 결국 W3C는 새로운 웹 표준으로 WHATWG의 Web Application 1.0 을

표준으로 선택함 

- 그리고 W3C는 Web Application 1.0표준을 HTML5 표준으로 변경하여

WHATWG와 함께 HTML W/G를 결성하고 HTML5 표준을 작성함

- HTML5 표준은 2012년에 초안을 발표하고 2014년 10월에 정식 권고안을

발표하였음

7. 제2차 웹 브라우저 전쟁

- 결국 마이크로소프트사와 W3C가 함께한 XHTML2.0 표준이 붕괴되고

인터넷 익스플로러의 기능 문제가 대두 되었음

-> 다른 웹 브라우저는 모두 최신 표준을 지원하는데 인터넷

익스플로러는 오히려 최신 기술을 지원하지 못하는 현상이 발생함

- 한마디로 지금까지의 웹 브라우저 점유율을 뒤집을 수 있는 기회들이 생겨남

- 이 시기를 놓치지 않으려고 모든 웹 브라우저가 빠른 속도로 웹 브라우저들을 업데이트 함

-> 모질라의 파이어폭스는 3년에 한번 하던 버전업을 2달 단위로

하고 있음

-> 구글의 크롬은 10주 단위로 버전업이 되고 있음

- 실제 웹 브라우저 기업들은 개발외에도 여러가지 마케팅 까지 하고 있음

- 국내에서는 IE가 점유율이 높아서 마케팅을 하고 있지 않으나

옆나라 일본에서는 유명한 캐릭터들을 앞세운 다양한 광고를

하고 있음

- 심한 경우 해당 브라우저가 아니면 특정 서비스에 접근을 못하는 경우도 만들어 지고 있음

- 현재 제 2차 웹 브라우저 전쟁이 지속되고 있고, 앞으로 언제까지 진행 되고 누가 최고의 브라우저가 될지는 미지수 임

@ HTML5의 특징

 -> 구조적 설계 지원 (시맨틱)

※ 시맨틱 : 이름만 보고도 역할을 짐작할 수 있는 것

 -> 그래픽 및 멀티미디어 기능 강화

 -> CSS3 / JavaScript 지원

 -> 다양한 API지원

 -> 모바일 웹 지원 / 장치 접근 가능 (배터리 정보, 카메라, GPS 등등)

@ HTML 구성 요소

<p align='center'>HTML/CSS</p>

설명

< p : 시작 태그(태그의 시작)

align : 속성

'center' : 속성값

HTML/CSS : 내부 문자

</p> : 종료 태그

태그(Tag) : '<'와 '>'로 묶인 명령어

시작태그 와 종료태그 를 한쌍으로 이용

요소 : 시작태그와 종료태그로 이루어진 모든 명령어

하나의 HTML 문서는 요소들의 집합

속성 : 요소의 시작태그에만 사용 / 명령어 구체화 역할

여러 개의 속성을 사용할 수 있으며 속성의 구분은 공백

변수/속성값 : 속성이 가지는 값, 값 이력시 " " 혹은 ' '를 이용

메뉴를 보여주는 nav가 있다.

@ HTML 태그 사용시 주의사항

 -> 태그는 대소문자를 구분하지 않는다.(소문자 권장)

 -> 시작 태그로 시작하면 반드시 종료태그로 종료

 -> 파일 확장자는 반드시 html, htm으로 설정

 -> 문자의 공백은 한 개만 인식하기 때문에 공백을 추가 하기 위해서는 특수기호를 사용해야 함(&nbsp;)

이클립스 켜서 만들고 난후 동적인웹 만들기

WebContent는 뷰쪽이다.

@ HTML 기본 구조

<!DOCTYPE html> : 문서 유형 (현재 html 문서라는 표현)

<html> : html 태그의 시작

<head> : 문서의 각종 정보와 문서 자체에 대한 설명 및 내용을 넣는 태그

<meta charset="UTF-8"> : 사용되는 문자 셋

<title>Insert title here</title> : 해당 페이지의 타이틀 이름

</head> : head 태그의 끝

<body> : 화면에 출력해서 보여주는 정보가 담겨 있는 공간

</body> : body 태그의 끝

</html> : html 태그의 끝

추가적으로 html에서도 주석 사용이 가능함

주석 : <!-- -->

~ 타일드

- 하이픈

/ 슬러시

♡ 빈하트

=================================================================================

@ <head>

 -> 머리라는 의미로써 html에 필요한 내용들을 넣는 곳

 -> head안에서는 meta,link,title 등 다양한 태그들을 사용함

# <meta ~~>

 -> 메타 태그로써 헤더 내부에서 사용되는 태그

 -> 메타 데이터라는 뜻으로 html 문서가 가지고 있는 유용한 정보를 담아 주는 곳, 문서 정보를 검색 엔진에 전달

 -> 다양한 태그를 사용할 수 있음

문자셋 설정 : <meta charset="UTF-8">

웹 페이지에 대한 설명 : <meta name="description" content="head 설명 페이지 입니다">

페이지 작성자 : <meta name="author" content="Noh MinSoo">

30초마다 문서 새로고침 : <meta http-equiv="refresh" content="30">

# <title>

 -> 페이지의 제목을 나타내는 태그

 -> 브라우저 창 이름을 설정할 수 있음

작성법

<title> 페이지 이름 </title>

# <script> </script>

 -> 페이지에서 스크립트를 사용하기 위해 쓰여지는 태그

- head와 body 둘 다 사용 가능함

작성법

<script> 스크립트 내용 </script>

ex) <script> alert("하이하이"); </script>

# <style>

 -> 태그의 스타일을 지정해주는 태그

 -> css 속성들을 HTML 내에 직접 사용할 때 사용

작성법

<style> css 구문 </style>

# <link>

 -> 문서를 외부의 문서와 연결하기 위해 사용

---

Brackets.Release.1.8

이거 받기

GettingStarted -> 들어가서

D:\web_workspace_html\HTML\WebContent

이거 경로로 하면 된다.

그럼 test1.html이라는 파일이 추가되어있다.

그럼 얘를 누르면 코드가 나온다.

얘의 장점은 뭐냐면 우측에 번개모양이있는데 실시간 미리보기이다.

실시간으로 바로바로 반영이 된다.

윈도우키 +왼쪽오른쪽 하면절반으로 간다.

거꾸로 하기

alt+ctrl+위아래 

@ 글자 태그

## h 태그 ##

 -> 제목을 입력할 때 사용하는 태그, 폰트의 크기가 태그에 따라 정해져 있음, h 태그 뒤 숫자로 크기를 구분함

작성법

<h?> 제목내용 </h?>

h1 : 첫번째로 큰 제목

h2 : 두번째로 큰 제목

h3 : 세번째로 큰 제목

h4 : 네번째로 큰 제목

h5 : 다섯번째로 큰 제목

h6 : 여섯번째로 큰 제목

## br 태그 ##

 -> 문장을 줄 바꾸기(개행) 할 때 사용

## hr 태그 ##

 -> 페이지에 가로로 밑줄을 만들어 줄 때 사용

## p 태그 ##

 -> 한 개의 단락을 만들 때 사용

 -> 자동으로 문장 줄 개행 후 한 줄 공백을 만들어 줌

# pre 태그 ##

 -> 입력한 그대로 출력 할 때 사용

 -> 띄어쓰기, 들여쓰기 줄 바꿈이 입력된 그대로 출력 됨

# strong 태그 또는 b 태그 ##

 -> 문장에서 문자를 강조하여 굵게 표시할 경우에 사용

## em 또는 i 태그 ##

 -> 문자에 기울임을 주는 태그

## blockquote 태그 ##

-> 다른 블로그나 사이트의 글을 인용할 경우 사용

-> 자동 들여쓰기가 되어 다른 텍스트와 구별할 수 있음

## q 태그 ##

-> 다른 블로그나 사이트의 글을 인용할 경우 사용

-> 인용 문구에 " " 표시가 됨

## mark 태그 ##

-> 배경 부분이 노랑색이 되며 형광펜 표시가 된듯 출력

@ 그 외

<u></u> 밑줄 / <hr>은 페이지 전체에 수평으로 줄을 표시하지만 <u>는 해당 범위에만 수평줄을 표시

<small></small> 원 문자보다 작은 글씨로 표시부가 정보 표현시 자주 사용

 아래 첨자

 윗 첨자

<s></s> 취소선

<addr></addr> 약자표시와 함께 마우스가 문자에 있으면 출력 (ToolTip)

<code></code> 코드 로써 동작시키지 말고 텍스트로써 보여주어라 (일반적으로 pre 태그에 작성)

<kbd></kbd> 키보드 입력이나 음성명령 같은 사용자 입력내용

-> 실제로는 일반 문자열과 큰 차이는 없으나 추후 웹 접근성에 용이 함

<cite></cite> 웹 문서나 포스트에서 참고할때 사용 , 이텔릭으로 표시(브라우저마다 상이)

-> 기울임과 큰 차이는 없음 (다만 나중에 참조 사이트 명시 했는지 찾아볼 수 있음)

w3schools 여기 들어가서 공부하기

 -> 웹에 사용하는 표준을 알려주는 사이트이다.