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 사이에 문서 내용을 정의
- 각 tag는 고유의 의미를 가지고 있으며, Web Browser는 이 의미에 따라 문서를 화면에 표시
Web & HTML 작동 원리
- 서버는 클라이언트의 요청 내용을 분석하여 결과값을 HTML로 전송
- 서버는 결과값을 전송한 후 클라이언트와 연결 종료
- 클라이언트는 서버로부터 전달받은 HTML을 Web Browser에 표시
- 각 Web Browser는 브라우저 엔진이 내장되어 있고, 이 엔진이 tag를 해석하여 화면에 표현
Tag와 속성
- HTML문서는 'tag' 로 만들어짐
- 전체 구성은 html, head, body tag로 구성
Tag
- tag는 시작 tag와 종료 tag로 쌍을 이루거나 시작 tag만으로 존재하는 tag도 있음
- 시작 tag(<tagname>)와 종료 tag(/tagname>)는 ‘/’로 구분하며 중첩되지 않도록 함
- 각각의 tag는 속성과 속성의 값이 존재
속성
- 글로벌 속성
- 어느 tag에나 넣어서 사용할 수 있는 글로벌 속성(global attribute)
글로벌 속성 설명
| class |
tag에 적용할 스타일의 이름을 지정 |
| dir |
내용의 텍스트 방향을 지정 |
| 왼쪽 >> 오른쪽 (기본값, ltr), 오른쪽 >> 왼쪽(rtl) |
|
| 왼쪽 또는 오른쪽 정렬과 비슷한 형태로 표현 |
|
| id |
tag에 유일한 ID를 지정함. javaScript에서 주로 사용 |
| style |
스타일을 적용하기 위해 사용 |
| title |
tag에 추가 정보를 지정. |
| tag에 마우스 포인터를 위치시킬 경우 title의 값 표시 |
|
주석
- 주석의 내용은 브라우저에 출력이 되지 않음
- HTML tag의 내용을 설명하기 위한 용도로 사용
- <!-- 주석 내용 -->
