IT 개발노트
HTML5 개요 본문
1. HTML5 개요
1.1 웹의 역사
- 월드 와이드 웹(World Wide Web : WWW)
: 웹은 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간으로 1991년에 등장
인터넷은 통신망이고 웹은 그 위에서 작동하는 서비스
- 인터넷의 시작
: ARPA(Advanced Research projects Agency)가 1969년에 웹의 모태가 되는 ARPANET 개발
시간이 지나며 군사용과 민간용으로 구분되었고 미간에서 사용되던 네트워크가 현재의 인터넷이 된다.
- 웹의 시작
: 1989년 유럽 공동 원자핵 연구소(CERN)의 팀 버너리스가 하이퍼링크를 포함하는 문서의 개념을 제안
1991년에 월드 와이드 웹을 개발해 배포
1993년 웹 표준 단체 W3C 창설
- 웹 특징
: HTTP(Hyper Text Transfer Protocol) 사용
HTML(Hyper Text Markup Language)로 작성된 문서연결
텍스트, 그래픽, 오디오, 비디오, 프로그램 파일 등 멀티미디어 서비스제공
- 반응형 웹
: 웹 서버에서 제공되는 정보가 다양한 기기에 맞춰 제공되는 환경
- 웹 처리과정
1.2 HTML이란 ?
- 웹에서 정보를 표현할 목적으로 만든 마크업 언어
- 웹 페이지를 작성하기 위해 사용되는 언어로 웹 브라우저에게 보일 문자열과 이를 감싸는 일종의 해석 기호인 태그들로 이루어진다.
- 마크업(태그) : 문서의 논리적인 구조를 정의하고, 출력장치에 어떠한 형태로 보여질것인지를 지시하는 역할
- 마크업 언어 : 마크업(태그)의 형식과 규칙을 정의한 언어
1.3 HTML5 란?
- W3C와 WHATWG의 두 단체가 협동으로 제안한 새로운 HTML 표준규격
- Web Application 1.0을 의미한다.
1.4 HTML5 특징
- 구조적 설계 지원(시멘틱)
- 그래픽 및 멀티미디어 기능 강화
- CSS3 / JavaScript 지원
- 다양한 API제공
- 모바일 웹 지원 / 장치접근가능(배터리 정보, 카메라, GPS 등)
- 웹 브라우저가 서버와 양방향 통신 가능
- 인터넷이 연결되지 않은 상태에서도 애플리케이션 동작
1.5 HTML 구성요소
구성요소 |
내용 |
태그(Tag) |
'<' 와 '>'로 묶인 명령어 |
요소 (Element) |
시작태그와 종료태그로 이루어진 모든 명령어 |
속성 (Attribute) |
요소의 시작태그에만 사용 / 명령어 구체화 역할 |
변수 / 속성값 (Argument) |
속성이 가지는 값, 값 입력시 " "를 이용 |
1.6 HTML 주의사항
- 태그는 대소문자를 구분하지 않음, 소문자 권장
- 시작태그로 시작하면 반드시 종료태그로 종료
- 파일 확장자는 반드시 html, htm으로 설정할 것
- 문자의 공백은 한개만 인식한다 공백을 추가하기 위해서는 특수기호를 이용해야 함 ( )
1.7 HTML 기본 구조
- <!doctype> : 문서의 형식을 알려주는 태그
- html 5 : <!doctype html>
- html4 & xhtml
엄격모드 : 표준문법 엄하게 준수
html4 : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN“
“http://www.w3.org/TR/html4/strict.dtd">
xhtml : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
호환모드 : 표준문법 조금 벗어나도 허용
html4 : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
“http://www.w3.org/TR/html4/loose.dtd">
xhtml : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
프레임세트모드 : 호환모드에서 프레임셋 허용
html4 : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
“http://www.w3.org/TR/html4/frameset.dtd">
xhtml : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
- <html></html>
: html문서 시작, 끝을 표시
lang 속성은 이 페이지가 어느 나라 언어로 되어있는지 표시를 의미
* 검색엔진이 페이지 검색 시에 참고, 검색 사이트에서 특정언어 제외할땐 사용
속성 : lang
ex) <html lang="ko">
속성값 : "설정언어"
코드 |
de |
en |
fr |
ja |
ko |
zh |
언어 |
독일어 |
영어 |
프랑스어 |
일본어 |
한국어 |
중국어 |
- <!-- --> 주석
: 코드 작성내용에 대해 설명하는 곳에 사용하여 브라우저가 이 부분은 해석하지 않고 넘어간다.
1.8 HTML5 추가 기능
- 멀티미디어 : 플래시와 같은 별도의 플러그인 없이 음악과 동영상을 재생할 수 있음
- 그래픽 : 하드웨어 가속을 받아 2차원 그래픽과 3차원 그래픽을 구현할 수 있음
- 통신 : 기존에는 요청과 응답 기반의 단 방향 통신이었으나, 웹 브라우저가 서버와 양 방향 통신이 가능해짐
- 장치 접근 : 장치와 관련된 정보(배터리 정보, CPU 사용량)는 물론 장치에 직접적으로 접근해서 카메라와 GPS, 진동 벨을 사용할 수 있음
- 오프라인 및 저장소 : 인터넷이 연결되지 않은 상태에서도 애플리케이션이 동작
- 시멘틱 태그 : 시멘틱(Semantic)웹을 구현, 시멘틱 웹은 검색 엔진과 같은 프로그램이 정보의 의미를 분석하고 자료를 검색 및 처리하여 제공하는 지능형 웹을 의미
- CSS3 스타일시트 : CSS3 스타일시트를 완벽하게 지원
- 성능 및 통합 : HTML5는 기존의 웹 표준보다 빠르다, 추가 기능을 사용해 웹의 성능을 극대화
1.9 HTML5를 공부해야 하는 이유
- 웹 애플리케이션 : 모바일과 태블릿 PC, 스마트 TV에 다양한 운영체제가 등장
모두 각각의 프로그래밍 언어를 사용해서 개발
- 안드로이드 - 자바, iOS - ObjectiveC 등등
HTML5를 사용하면 모든 운영체제에서 동작하는 애플리케이션을 한번에 제작할 수 있음
1.10 구글 크롬 개발자 도구
- 크롬은 가장 많은 HTML5 특징을 제공하는 웹 브라우저이다.
- 개발자 도구란 웹 페이지를 개발하는데 유용한 기능을 제공하는 도구
- 개발자 도구는 구글 크롬을 실행하고 F12 또는 마우스 오른쪽 버튼을 누르고 요소 검사를 선택하면된다.
- 태그가 차지하는 영역과 속성 확인 가능
'기초튼튼 > HTML' 카테고리의 다른 글
| 페이지구조 / 시멘틱 (0) | 2019.02.21 |
|---|---|
| HEAD 태그 (0) | 2019.02.20 |
| HTML5 태그 기본 (0) | 2019.02.20 |
