Chapter1. HTML 개요

김승현·2021년 10월 25일

인터넷(Internet)

전 세계의 컴퓨터가 서로 연결되어 정보를 교환할 수 있는 하나의 거대한 컴퓨터 통신망
인터넷에서는 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	- 사용자가 자유롭게 참여하여 스스로 콘텐츠를 제작하는 서비스를 제공 - 사용자 중심의 환경 - 블로그, 위키백과, 유튜브, 트위터, 페이스북 등..
Web 3.0	- 지능형 웹 서비스 - 사용자에게 필요한 지식만을 자동으로 검색하여 보여줌 - 아직까지 W3C에서는 웹 3.0을 정의하지는 않고 명확한 서비스는 없음 (추후 인공지능이 적용된 사용자 패턴 분석 및 맞춤형 제공되는 웹)

Web의 역사

웹은 www 라고 부르며 World Wide Web의 약자
CERN(유럽의 입자물리학 연구소)에서 엄청난 양의 연구 결과 및 자료의 효율적인 공유를 목적으로 1989년 팀버너스리의 제안으로 개발되었음
1990년도에 웹이 등장하였으며 www 등장으로 인해 인터넷 또한 급속도로 발전 하였음
웹 을 이용하여 데이터를 주고 받기 위해 사용한 언어는 HTML (Hyper Text Markup Language)를 사용함

HTML(Hyper Text Markup Language)

Web Data(Web Page)를 전송하기 위해 사용되는 HyperText를 구성하는 Markup Language(마크업 언어)

구분	내용
Hyper Text	Hyper Link를 통해 구성된 다른 정보로 쉽게 연결시켜주는 구조화된 문서
Markup Language	태그 등을 이용하여 문서나 데이터의 구조를 정의하는 언어

윕 처리 과정

Client가 도메인(ex. www.naver.com)을 입력
도메인명 해석을 위해 DNS에게 질의함
DNS 서버는 도메인에 맞는 IP 주소를 알려줌
Client는 알아온 IP주소를 바탕으로 해당 Web Service를 찾아가서 HTML 파일을 요청
Server에서는 요청한 HTML 파일을 응답

HTML 구성 요소

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

구분	내용
`<p`	태그의 시작
`align`	속성
`'center'`	속성값
`HTML/CSS`	내부문자
`</p>`	태그의 끝

구분	내용
태그(Tag)	- '<'와 '>'로 묶인 명령어 - 시작태그(<태그>) 와 종료태그(</태그)를 한쌍으로 이용 - (종료 태그가 없는 경우도 있음)
요소	- 시작태그와 종료태그로 이루어진 모든 명령어 - 하나의 HTML 문서는 요소들의 집합
속성	- 요소의 시작태그에만 사용 / 명령어 구체화 역할 - 여러 개의 속성을 사용할 수 있으며 속성의 구분은 공백
변수/속성값	- 속성이 가지는 값, 값 입력시 " " 혹은 ' '를 이용

HTML 작성시 주의 사항

태그 : 소문자 권장
파일 확장자 : html, htm으로 설정
공백은 한 개만 인식
공백을 추가: 특수기호를 이용(  )
태그는 기본적으로 열어주면 닫아주어야 한다.
- <html> ~~~ </html>
- <title> ~~~ </title>
혼자 쓰이는 태그도 존재 → <br/>

HTML의 기본 구조

<html lang="ko"> 
<meta charset="UTF-8">	
  
<head>
문서의 각종 정보와 문서 자체에 대한 설명 내용
<title>,<meta>,<link>,<style>,<script> 등을 사용 함
</head>

<body>
화면에 출력해서 보여주는 모든 정보 및 내용
head에 들어가는 태그를 제외하고 모든 태그를 사용
</body>

</html>