HTML (Hypertext Markup Language)
www = html+http
웹 브라우저 = html 파서(해석기, 소스) + html 렌더러(페이지 그리기)
→ 전달된 html 내용을 파싱하고 페이지를 실제로 만들어 출력함
HTML 역사
HTML4
- 내용과 스타일의 분리(CSS)
- Dynamic HTML(html+css+js) 파편화 - MS vs Netscape(Firefox)
- UX(Adobe Flash)
- 인터넷 표준을 준수하여 브라우저와 관계 없이 실행 가능하도록 함.
→ 아이패드의 HTML5 사용으로 부흥
HTML 형태
xhtml: well-formed를 강제 (<br/> <!DOCTYPE html>), 소문자 태그명
html: ill-formed 가능 (<br>)
- Doctype
문서의 스키마 또는 DTD를 정의
HTML5:<!DOCTYPE html>
웹 브라우저 계보
NCSA Mosaic - Netscape - Firefox - Chromium
Mosaic 구매 → internet Explorer - Edge - Edge(Chromium)
Chromium이라는 오픈 소스 기반으로 Chrome, Whale, Edge, node.js
Static vs Dynamic
-
웹서버 (static)
Apache2, Nginx
port 80, 443 -
서블릿/jsp 엔진 (dynamic)
apache tomcat, resin
port 8080, 8443
HTML 기본 태그
block element: 세로로 쌓인다 (=줄바꿈)
inline element: 가로로 쌓인다
- 기본
<html><head><body>
- 글씨 크기
<h1~h6>
- 줄 간격
<br>
block element
- 문단
<p>
block element
- link
<a href="">
inline element
- 이미지
<img src=""> - 테이블
<table> <tr> <th> <th> </tr> </table> - 리스트
<ul> <li> <li> </ul>: unorderd list (bullet)
<ol> <li> <li> </oi>: ordered list (번호) - 레이아웃
<div>: block element
<span>: inline element
배운 것을 기록하는 습관