HTML
HyperText Mark-up Language
"Hyper Text Mark-up Language" 의 약자. 웹 페이지의 모습을 기술하기 위한 규약. 프로그래밍 언어가 아니라 마크업 언어다. 헷갈리지 않도록 하자. 웹사이트에서 흔히 볼 수 있는 htm이나 html 확장자가 바로 이 언어로 작성된 문서다.
최초 제안자는 CERN의 물리학자 티머시 J. 버너스리이다. URL, HTTP, WWW의 전신인 Enquire 등도 그가 세트로 개발하고 제안했다. TCP/IP 통신규약을 만든 빈턴 G. 서프(Vinton Gray Cerf)와 함께 인터넷의 아버지로 불린다.
기본 구조
<!DOCTYPE html>마크업 언어용 DTD 태그이다. HTML5의 경우 맨 위에 다음과 같이 써 주면 된다.
<html>: 위의 DTD를 제외한 전체를 이 태그로 둘러싼다.
<head>: HTML 문서의 속성을 지정하기 위한 태그이다. 이 태그 안에 타이틀이나 메타 태그 등을 넣는다.
<body>: HTML 문서의 본 모양을 나타내기 위한 태그이다.
표시될 문서의 레이아웃을 이 태그 안에 넣으면 된다.
속성으로 background=배경그림, bgcolor=배경색, text=글자색, link=링크색, vlink=방문링크색, alink=활성링크색
이렇게 6가지가 있었으나 CSS가 도입되면서부터
굳이 body 태그에 직접 속성을 지정해야 할 이유가 사라졌고 HTML5에서부터 지원하지 않게 되었다.
<title>: HTML의 제목을 선언하는 태그.
<meta>: HTML의 부가 정보를 선언하는 태그. 예를 들어 charset 속성을 쓰면 인코딩을 선언할 수 있다.
<link>: 별도의 CSS 선언 파일, 파비콘 등을 연결하는 태그.대표 태그
<div> Division Marker의 줄임말로서 영역을 구분짓거나 무리(구분)지어주는 엘리먼트이다.
앞뒤로 줄바꿈이 되는 블럭 레벨 항목 block level element이다
<span> <div>의 inline(인라인) 버전.
<form>: 입력값을 받는 영역을 지정한다.
한 페이지에 여러 개가 들어갈 수는 있지만, 영역 안에 영역이 들어가는 것은 불가능하다.
<input>: 입력값 요소를 지정한다. type에 따라 다른 입력값을 취한다.
<label>: 해당 요소의 이름을 지정한다. 해당 이름을 클릭하면 요소가 자동으로 선택된다.
<a>: 하이퍼링크를 생성하는 태그이다. href 속성을 써서 <a href="링크할 페이지">내용</a>와 같이 작성한다.
<ul>: 순서 없는 목록(unordered list)을 표시한다.
<li>: 목록에서 각 항목(list item)은 <li>와 </li>사이에 넣는다.
<ol>: 순서 있는 목록(ordered list)을 표시한다. 참고로 이 태그는 단지 비주얼적인 태그라는 이유로 HTML4에서 비권장 태그로 들어갔다가 HTML5에서 <ul> 태그와 구별해서 사용할 필요성이 제기되면서 표준 태그로 재지정되었다.
기술과 인문학의 교차점