<이공계전문기술연수> 2. HTML 웹의 역사 / tag / 이클립스(Eclipse)(1)

웹의 역사

 

웹의 역사에 대해 간단하게 알아보면, 월드 와이드 웹(World Wide Web , WWW) 이란 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간을 말한다.

1991년에 처음등장을 했고, 한국에서는 1982년 구미 한국전자기술연구소와 서울대학교 컴퓨터 공학과를 연결한 것이 처음의 역사이다. 2019년 기준으로 39년이 되었다.

 

미국의 ARPA(Advanced Research Projects Agency)에서 1969년에  ARPANET을 개발한다. 

ARPANET은 전쟁의 핵과 같은 공격에 대비하여 데이터를 안전하게 보관 및 전송 할 수 있는 시스템이다.

초기에 ARPNET은 미국 국방성과 대학교를 연결했고, 시간이 지나면서 ARPANET은 민간 연구용과 군사용  MILNET으로 나누어진다. 여기서 민간연구용의 ARPANET이 현재 전 세계의 모든 컴퓨터를 연결하고 있는 인터넷으로 발전하게 된다.

 

1991년 팀 버너스리는 월드 와이드 웹(World Wide Web)을 개발해 배포하고, 사용 인구가 폭발적으로 증가하면서
1993년 소스코드를 모든 사람이 이용 할 수 있게 공개한다.

 

1994년에는 팀 버너스리는 웹 표준을 지정하는 기관이며 HTML 표준을 제정하는 단체인 W3C(World Wide Web COnsortium) 재단을 창설한다.

 

버전	발표 연도
HTML1	1991년 10월
HTML2	1995년 11월
HTML3	1997년 1월
HTML4	1997년 12월
HTML5	2014년 10월

 

역사에 대해 알아보면 NCSA, 모자이크,  넷스케이프, 모질라, 마이크로소프트, IE 등 더 알아봐야되지만,
HTML의 버전과 발표연도, 표준을 지정하는 단체 정도만 알아보고 태그에 대해서 알아보자.

 

 

왜 HTML5를 배워야 할까?

 

2012년 전후로 어도비(Adobe)의 폰갭(PhoneGap)을 사용해서 HTML5로 모바일 어플리케이션을 만드는 시도가 다양하게 이루어 졌는데, 폰갭은 몇 가지 성능적인 이슈를 가지고 있었다.

 

페이스북은 폰갭의 성능에 만족하지 못했고, 그래서 새로운 엔진을 만들었는데 그 엔진이 바로 리액트 네이티브
(React Native)이다.

 

리엑트 네이티브를 사용하면 HTML5로 개발을 했을 때, 안드로이드와 아이폰에 맞는 네이티브 코드로 변환이 되서 그 이슈를 해결했다.

 

2019년 기준으로 살펴보면 페이스북, 인스타그램, 스카이프, 우버 등 굉장히 유명한 애플리케이션들이 리액트 네이티브로 개발되었다.

 

결론은 HTML5를 알면, 안드로이드 애플리케이션 개발을 위해 자바(Java) 또는 코틀린(Kotlin)을 따로 배우지 않아도 되며, 아이폰 애플리케이션 개발을 위해 오브젝티브-C(Obective-C) 또는 스위프트(Swift)를 따로 배우지 않아도 된다.

 

 

시작해보자

 

설치한 브라켓(Brakets) 과 이클립스를 연동하기 위해 이클립스에서 먼저 설정을 해보자.

 

 

1. eclipse에서 preferences에 들어가 사진과 똑같이 설정한다. other를 UTF-8로 설정하면 된다.

2.

3.

4.

5.

 

6.

 

 

7.

 

 

8.

 

9.

 

10.

 

 

<수업내용>

 

@ Web Version

- Web 1.0 : 정적인 검색 서비스 제공
-> 동적인 검색서비스까지 가능(현재 가장 많이 사용되는 기본 서비스 버전)

- Web 2.0 : 지능형 웹서비스(사용자 패턴을 분석하여 개인별 맞춤정보를 제공)
-> 페이스북, 유투브 , 인스타그램 등...


@ HTML(Hyper Text Markup Language)

Hyper Text : Hyper Link를 통해서 구성된 다른 정보로 쉽게 연결시켜주는 구조화된 문서

Markup Language : 태그 등을 이용하여 문서나 데이터의 구조를 정의하는 언어


브라우저 : 
모자이크 브라우저(최초의 GUI 브라우저)
-> 넷스케이프

MS에서 익스플로러 개발
MS -> 윈도우에 IE를 설치해서 판매

1998년도에 넷스케이프가 타회사에 인수

넷스케이프 -> 웹표준을 따름(W3C)
익스플로러 -> 웹표준을 따르지 않음

플러그인 
-> 어도비 플래시, 엑티브 엑스

2004년에 W3C 회의 엑티브 엑스를 없애자라는 HTML 표준을 다시 제작
-> 오페라, 파이어폭스, 크롬
-> 웹 혁명 지향점 위반
-> WHATWG(Web HyperText Application Technoloygy Working)
-> 웹 표준기관을 따로 설립

-> HTML5 표준을 제안 -> 플러그인 설치 필요없음 -> 브라우저가 가벼워지면서
사람들도 사용하기 시작

-> IE, 나머지 브라우저 코드가 있음


@HTML5 특징

-> 구조적 설계 지원(시멘틱)
시멘틱 : 이름만 보고도 역할을 짐작 할 수 있는것
-> 그래픽 및 멀티미디어 기능 강화
-> CSS / JAVASCRIPT 지원
-> 다양한 API 제공
-> 모바일 웹 지원 / 여러 장치 접근 가능(카메라,GPS 등)


@ www.naver.com 

1. client 가 브라우저에 www.naver.com 을 입력
2. DNS (Domain Name Service)서버에 질의
-> www.naver.com 의 ip주소를 반환
3. 반환받은 IP주소를 바탕으로 접속

 

ex)
kt DNS : 168.126.63.1
google : 8.8.8.8

 

@ HTML 구성 요소 

 

 : 시작태그
align : 속성
'center' : 속성 값(가운데)
HTML/CSS : 내부문자 -> 화면에 출력할 텍스트

 : 종료태그

태그(Tag) : '<' , '>' 로 묶인 명령어
: 시작태그(<태그>) , 종료태그(</태그>) 한쌍으로 사용
: 단, 종료태그가 없는 태그도 존재하긴 함 ( 기본적으로는 무조건함)

속성 : 시작태그에만 사용이 가능 / 여러개의 속성을 사용 할 수 있음
-> 구분기준은 공백 
속성 값 : 속성이 가지는 값, 값 입력시 " " , ' ' 를 이용

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

하나의 HTML 은 요소들의 집합

@ HTML 주의사항
-> 태그는 대소문자를 구분하지 않는다. (소문자 사용을 권장)
-> 시작태그로 시작하면 반드시 종료태그로 종료(단, 종료태그가 없는경우 제외)

-> 파일 확장자는 반드시 html , htm 으로 설정
-> 문자의 공백은 한 개만 인식함, 공백을 추가하기 위해서는 특수기호를 이용해야 함( )

 

@글자 태그
 
# h 태그   (heading)
<h?> 

-> 제목을 입력 할 때 사용하는 태그, 폰트크기가 태그에 따라 정해져 있음
(h뒤의 숫자로 크기를 구분)
1 ~ 6 1이 가장크고 6으로 갈수록 작아짐

# p 태그 (Paragraph)

 

-> 한 개의 단락을 만들 때 사용
-> 자동으로 개행처리


# br 태그 (Line Break)

-> 문장의 줄을 바꿀때 사용(개행)

# hr 태그 (Horizontal Rules)

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

# pre 태그 (preformatted)

-> 입력한 그대로 출력 할 때 사용
-> 띄어쓰기, 들여쓰기, 줄바꿈이 입력된 그대로 출력



# strong 태그 / b(bold) 태그

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


#em(emphasized text)  태그 또는 i(italic) 태그

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


# blockquote 태그

 

-> 다른 블로그나 사이트의 글을 인용할 경우 사용
-> 자동 개행과 들여쓰기가 되어 다른텍스트와 구별이 가능


# q 태그 (short quotation)

 

 인용 

-> 다른 블로그나 사이트의 글을 인용 할 경우 사용
-> 인용문구에 " " 표시


# mark 태그

 강조 

-> 배경부분이 노란색이 됨 -> 형광펜 효과



## 그 외
 : (underline) 해당 범위에만 밑줄을 그어주는 효과

 

 : 원 글씨보다 작은 글씨로 표시. 부가정보 표현시
 (subscript) : 아래첨자
 (Superscript): 위 첨자
 (Strikethrough) : 취소선

 

 (Citation): 웹 문서나 포스트에서 참고 할 때 사용
-> 기울임과 큰 차이는 없음(나중에 참조사이트를 명시했는지 찾아볼수있음)


@목록 태그
#ul 태그   (unordered list)
-> 순서가 필요하지 않은 목록을 만들때 사용
-> 리스트 앞에 특정 모양이 출력(default 모양은·)
-> CSS에서 모양이 수정이 가능

• 내용1

 

• 내용2

 

• 내용3

#ol 태그 (ordered list)

-> 순서가 있는 목록을 만들때 사용

속성

type : 순서 형식(a,A,1,i,l)
start : 시작문자지정

1. 목록1

 

1. 목록1

 

1. 목록1

# dl 태그 (Definition List)

-> 용어나 문장에 대한 정의 리스트 작성시 사용
-> 들여쓰기가 자동으로 됨

정의 제목

(definition title)

정의 내용

(definition data)

@ 테이블 태그
-> 웹 문서에서 자료를 정리 할 때 자주 사용
-> 행과 열로 이루어져 있고, 행과 열이 만나는 지점을 셀이라고 함

(tr은 행이 생기는 것) (td) 각 행의 원소

내용1

내용2

내용3

rowspan : td태그의 속성으로 지정한 행만큼 행을 병합

colspan : td태그의 속성으로 지정한 열만큼 열을 병합