HTML

Hypertext Markup Language
1990년도 이후 웹(Web, World Wide Web)에서 사용하는 문서 양식
문서에 하이퍼텍스트, 표, 목록, 비디오 등을 포함할 수 있는 tag(Tag)를 사용
문서를 Web Browser에 표현할 때 tag를 사용

<제목>회원정보</제목>
<이미지 이미지소스="image.png" 설명="사진"/>
<정의목록>
	<용어정의>이름 : </용어정리>
	<용어설명>홍길동</용어설명>
	<용어정의>이메일: </용어정의>
	<용어설명>honggd@naver.com</용어설명>
</정의목록>

<h1>회원정보</h1>
<image src="image.png" alt="사진"/>
<dl>
	<dt>이름 : </dt>
	<dd>홍길동</dd>
	<dt>이메일: </dt>
	<dd>honggd@naver.com</dd>
</dl>

왼쪽이 Markup 적용 전, 오른쪽이 Markup 적용 후
태그를 적용하지 않는다면 개발자마다 태그의 이름이 달라 브라우저에서 해석이 어려울 수 있음

웹 표준

모든 브라우저에서 웹서비스가 정상적으로 보여질 수 있도록 하는 것
W3C에서 HTML5를 웹 표준으로 권고하고 웹 브라우저는 이를 따름

HTML5

특징

멀티미디어 요소 재생
- 과거 브라우저는 멀티미디어를 재생하기 위해 별도의 외부 플러그인을 사용해야 했으나, HTML5에서는 멀티미디어 요소를 별도의 플러그인 없이도 재생가능
서버와 통신
- 서버와 클라이언트 사이에 소켓 통신이 가능
Semantic tag
- 웹사이트를 검색엔진이 조금 더 빠르게 검색할 수 있도록 하기 위해 특정 tag에 의미를 부여하는 방식
- <header> tag는 문서의 주제를 나타내는 tag로써 <header> tag가 사용된 웹 문서의 경우 검색엔진은 웹 문서의 모든 내용을 검색하는 것이 아닌 <header> tag의 내용만을 검색

문서 구조

<!DOCTYPE html> tag는 현재 문서가 HTML 문서임을 정의
시작tag(<tagname>)와 종료tag(</tagname>)가 있으며, tag 사이에 문서 내용을 정의
- <tagname … />와 같이 정의도 가능
각 tag는 고유의 의미를 가지고 있으며, Web Browser는 이 의미에 따라 문서를 화면에 표시

Web & HTML 작동 원리

서버는 클라이언트의 요청 내용을 분석하여 결과값을 HTML로 전송
서버는 결과값을 전송한 후 클라이언트와 연결 종료
클라이언트는 서버로부터 전달받은 HTML을 Web Browser에 표시
각 Web Browser는 브라우저 엔진이 내장되어 있고, 이 엔진이 tag를 해석하여 화면에 표현

Tag와 속성

HTML문서는 'tag' 로 만들어짐
전체 구성은 html, head, body tag로 구성

속성

글로벌 속성
- 어느 tag에나 넣어서 사용할 수 있는 글로벌 속성(global attribute)

글로벌 속성 설명

class	tag에 적용할 스타일의 이름을 지정
dir	내용의 텍스트 방향을 지정
왼쪽 >> 오른쪽 (기본값, ltr), 오른쪽 >> 왼쪽(rtl)
왼쪽 또는 오른쪽 정렬과 비슷한 형태로 표현
id	tag에 유일한 ID를 지정함. javaScript에서 주로 사용
style	스타일을 적용하기 위해 사용
title	tag에 추가 정보를 지정.
tag에 마우스 포인터를 위치시킬 경우 title의 값 표시

주석

주석의 내용은 브라우저에 출력이 되지 않음
HTML tag의 내용을 설명하기 위한 용도로 사용