웹표준이란?
-
모든 브라우저에서 웹서비스가 정상적으로 보여질 수 있도록 하는 것.
-
W3C(World Wide Web Consortium) - http://www.w3.org
* 월드와이드웹(www)의 창시저인 팀 버너스 리를 중심으로 창립된 원드와이드웹 컨소시엄.
-
W3C에서 HTML를 웹 표준으로 권고하고 웹 브라우저는 이를 따름
특징
-
HTML5는 지금도 개발 중에 있고, 다양한 기능이 추가됨.
-
멀티미디어 요소 재생
- 과거 브라우저는 멀티미디어를 재생하기 위해 별도의 외부 플러그인을 사용해야 했으나, HTML5에서는 멀티미디어 요소를 별도의 플러그인 없이도 재생 가능.
-
서버와 통신
- 서버와 클라이언트 사이에 소켓 통신이 가능.
-
Segmentic tag 추가.
-
웹사이트를 검색엔진이 좀 더 빠르게 검색할 수 있도록 하기 위해 특정 tag에 의미를 부여하는 방식.
-
예를 들어
<header>tag는 문서의 주제를 나타내는 tag가 사용된 웹 문서의 경우 검색엔진은 웹문서의 모든 내용을 검색하는 것이 아닌<header>tag의 내용만을 검색해서 보다 빠르게 검색을 진행할 수 있다.
-
HTML문서 구조
-
<!DOCTYPE html>tag는 현재 문서가 HTML문서임을 정의. -
시작 tag(
<tagname>)와 종료tag(</tagname>)가 있으며, tag 사이에 문서 내용을 정의. -
각 tag는 고유의 의미를 가지고 있으며, Web Browser는 이 의미에 따라 문서를 화면에 표시
Web & HTML 작동 원리
-
서버는 클라이언트의 요청 내용을 분석하여 결과값을 HTML로 전송
-
서버는 결과값을 전송한 후 클라이언트와 연결 종료
-
클라이언트는 서버로부터 전달받은 HTML을 Web Browser에 표시
-
각 Web Browser는 브라우저 엔진이 내장되어 있고, 이 엔진이 tag를 해석하여 화면에 표현
HTML 개요
tag와 속성
-
HTML 문서는
tag로 만들어진다. -
HTML 문서의 전체 구성은 html, head, body, tag로 구성
-
tag는 시작 tag와 종료 tag오 쌍을 이루거나 시작 tag만 존재하는 tag도 있다.
-
시작 tag와 종료 tag는
/로 구분하며 중첩되지 않도록 한다.- 시작과 종료 tag :
<body>...</body> - 시작 tag만 있는 경우 :
<br/>,<hr/>,<img/>
- 시작과 종료 tag :
-
각각의 tag는 속성과 속성의 값이 존재한다.
HTML 기본
-
포맷팅 요소
- 포맷팅 요소에는 화면에는 동일하게 출력되지만 각 요소가 가진 의미가 다른 것이 있다.
- 예를 들면,
<b>와<strong>은 모두 텍스트를 굵게 표현하지만<strong>요소는 텍스트를 강조.
-
목록형 요소
- 목록 tag는 하나 이상의 하위 tag를 포함
- 목록 tag는 각 항목을 들여쓰기로 표현
- 번호 또는 심볼을 이용해서 목록을 표현
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>list</title>
</head>
<body>
<ul>
<li>Oracle</li>
<li style="list-style-type: circle">Java</li>
<li style="list-style-type: square">HTML5</li>
<li style="list-style-type: disc">CSS3</li>
</ul>
<ol>
<li>Oracle</li>
<li>Java</li>
<li>HTML5</li>
<li>CSS3</li>
</ol>
<ol start="100">
<li>Oracle</li>
<li>Java</li>
<li value="200">HTML5</li>
<li>CSS3</li>
</ol>
<ol style="list-style-type: upper-alpha">
<li>Oracle</li>
<li>Java</li>
<li>HTML5</li>
<li>CSS3</li>
</ol>
<ol type="a">
<li>Oracle</li>
<li>Java</li>
<li>HTML5</li>
<li>CSS3</li>
</ol>
<ol type="I">
<li>Oracle</li>
<li>Java</li>
<li>HTML5</li>
<li>CSS3</li>
</ol>
<ol style="list-style-type: lower-roman">
<li>Oracle</li>
<li>Java</li>
<li>HTML5</li>
<li>CSS3</li>
</ol>
<ol reversed="reversed">
<li>Oracle</li>
<li>Java</li>
<li>HTML5</li>
<li>CSS3</li>
</ol>
</body>
</html>
-
table - HTML table 모델
- HTML table 모델은 데이터를 행과 열의 셀에 표시
- 행 그룹요소인
<thread>,<tbody>,<tfoot>요소를 사용하여 행들을 그룹화 <colgroup>과<col>요소는 열 그룹을 위한 추가적인 구조정보를 제공- table의 셀은 머리글(
th)이나 데이터(td)를 가질 수 있음
<body>
<table>
<caption>
[[insert Title]]
</caption>
<thead>
<tr>
<th>title 1</th>
<th>title 2</th>
<th>title 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
</tr>
<tr>
<td>data 4</td>
<td>data 5</td>
<td>data 6</td>
</tr>
</tbody>
</table>
</body>
