HTML 5
- 웹 통신 기초
- HTML
웹 통신 기초
- 인터넷
전 세계의 컴퓨터들이 네트워크를 통해 연결되어 정보를 공유하는데 목적을 두며 프로토콜을 이용하여 통신
초기에는 군사용과 민간용으로 구분되었고 민간용이 지금의 인터넷이 됨
- 웹(WEB)
인터넷이 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간
인터넷의 통신망 위에서 작동하는 서비스
역사
- 팀버너스리가 하이퍼링크를 포함하는 문서의 개념 제안
- 월드 와이드 웹을 개발 및 배포
- 웹 표준 단체 W3C 창설
- 웹 처리 과정
네트워크를 통해 서로 연결된 컴퓨터들 간에 서버와 클라이언트의 역할을 나누고
HTML이라는 마크업 언어를 통해 자료를 주고 받음
- 웹 특징
HTTP(Hyper Text Transfer Protocol) 사용
HTML(Hyper Text Markup Language)로 작성된 문서 연결
텍스트, 그래픽, 오디오, 비디오, 프로그램 파일 등 멀티미디어 서비스 제공
HTML 5
웹에서 정보를 표현할 목적으로 만든 마크업 언어
웹페이지를 작성하기 위해 사용되는 언어로 웹브라우저에게 보일 문자열과
이를 감싸는 일종의 해석기호인 태그들로 이루어짐
- 마크업과 마크업 언어
마크업(태그)는 문서의 논리적인 구조를 정의하고 출력장치에 어떤 형태로 보일 것인지 지시하는 역할
마크업 언어는 마크업(태그)의 형식과 규칙을 정의한 언어
- 특징
- 구조적 설계 지원(시멘틱)
- 그래픽 및 멀티미디어 기능 강화
- CSS3 및 Javascript 지원
- 다양한 API 제공
- 모바일 웹 지원 및 장치 접근 가능(배터리 정보, 카메라, GPS 등)
- 웹 브라우저가 서버와 양방향 통신 가능
- 인터넷이 연결되지 않은 상태에서도 애플리케이션 동작
- 구성요소
구성요소 | 내용 |
태그(tag) | '<'와 '>'로 묶인 명령어 시작태그와 종료태그를 한쌍으로 이용 ex) <div></div> |
요소(Element) | 시작태그와 종료태그로 이루어진 모든 명령어 하나의 HTML 문서는 요소들의 집합 |
속성(Attribute) | 요소의 시작태그에만 사용/ 명령어 구체화 역할 여러 개의 속성을 사용할 수 있으며 속성의 구분은 공백 |
변수/속성값(Argument) | 속성이 가지는 값, 값 입력 시 "" 혹은 '' 이용 |
- 주의 사항
- 태그는 대·소문자를 구분하지 않으나 소문자를 권장
- 시작태그로 시작하면 반드시 종료태그로 종료
- 파일 확장자는 반드시 html 또는 htm으로 설정
- 문자의 공백은 몇 개를 입력하는 한개만 인식하므로 공백을 추가하기 위해서 특수기호 를 이용해야 함
- 기본 구조
<!DOCTYPE html> <!--문서 유형-->
<html lang="en"> <!-- 이 페이지가 어느 나라오 되어 있는지 의미 ex) en,ko-->
<head> <!-- 문서 시작-->
<!-- head: 문서의 각종 정보와 문서 자체에 대한 설명 내용
<title>, <link>, <style>, <scrpit> 등 사용 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- body: 화면에 출력해서 보여주는 모든 정보/ 내용
head에 들어가는 태그를 제외하고 모든 태그 사용 -->
</body>
</html> <!-- 문서 끝-->
<!-- html에서 사용하는 주석-->