HTML 요약 정리

문서의 구조

<html>...</html>: HTML 문서를 나타낸다. 생략할 수 있으며 대부분의 브라우저에서 무시된다.
<head>text</head>: 문서의 헤더를 나타낸다. 문서의 설명이 들어간다.
<title>text</title>: 문서 제목을 나타낸다. 브라우저의 상단에 표시된다.
<body
BACKGROUND="image"
BGCOLOR="color"
TEXT="color"
LINK="color"
VLINK="color"
ALINK="color">...</body>: 문서의 본 내용을 나타낸다. 보통 텍스트와 그림은 이 부분에 들어간다. BACKGROUND와 BGCOLOR, TEXT, LINK, VLINK, ALINK는 배경 그림, 배경색, 텍스트, 링크, 갔다온 링크, 현재 링크를 의미하고 지정하는 색으로 바꿀 수 있다. (Netscape에서만 가능하다.) Color의 형태는 #rrggbb 이다.
<link

HREF="URL"
TITLE="Text"
REL=["next"|"previous"|"parent"|"made"]
REV=["next"|"previous"|"parent"|"made"]>: 관련된 문서와의 관계를 나타낸다. 관련된 문서는 URL에, 제목, 관계는 TITLE과 REL, REV로 명시한다.
<base HREF="URL">: 베이스 URL을 나타낸다. 이 문서의 모든 상대 경로를 갖는 URL은 명시된 URL을 베이스로 한다.

문자의 표현

<b>text</b>: text를 bold체로
<i>text</i>: text를 italic체로
<tt>text</tt>: text를 typewriter체로
<cite>text</cite>: text를 인용문으로
<em>text</em>: text를 강조문으로
<kbd>text</kbd>: text를 키보드 입력문으로
<pre>text</pre>: text를 입력한 그대로 보이게
<samp>text</samp>: text를 예문으로
<var>text</var>: text를 변수 선언문으로
<basefont size="size">: text의 기본 글꼴을 지정한 크기로. size는 1에서 7
<font size="size">text</font>: text를 지정한 글꼴 크기로. size는 1에서 7, 혹은 +/-숫자
<blink>text</blink>: text를 깜빡이게 (넷츠케이프에만 적용됨)

텍스트 삽입

<address>text</address>: text를 mail address로 분리
<blockquote>text</blockquote>: text를 인용문으로 분리
<code>text</code>: text를 프로그램 코드로 분리
<center>text</center>: text를 가운데로 정렬

헤더

n 은 1에서 6 사이의 정수

그림

<img

SRC="URL"
ALT="text"
ALIGN=["top"|"middle"|"bottom"|"texttop"|

"absmiddle"|"baseline"|"absbottom"|"left"|"right"]
WIDTH=["pixels" | "percentage"]
HEIGHT=["pixels" | "percentage"]
BORDER="pixels"
VSPACE="pixels"
HSPACE="pixels"
ISMAP>: In-line image를 표시.

리스트

<dir>list</dir>: 디렉토리 리스트, 보통 파일 이름과 같이 짧은 항목에 주로 사용
<menu>list</menu>: 짧은 메뉴 리스트, 한 줄에 하나가 좋음
<ul TYPE="type">list</ul>: 순서없는 리스트, 브라우저에 따라 기호가 앞에 오기도 함
<ol TYPE="type">list</ol>: 번호붙은 리스트, 위치에 따른 번호가 앞에 옴
<li TYPE="type">text: 위 네 개 리스트 중 하나의 시작을 명시.

TYPE은 Netscape에서만 사용 가능하고 A, a, I, i, 1 중 하나를 가질 수 있음

<dl>descriptive list</dl>: 설명될 리스트
<dt>text: 설명될 항목
<dl>text: 항목에 대한 설명

<dt>와 <dd>는 <dl> 리스트 안에서 항상 짝을 이루어야 함

설명문

: 설명문은 중복(nested)될 수 없음. 될 수 있으면 여러 줄에 걸치거나 특수 문자를 포함하지 않도록

앵커

<a HREF="URL"
NAME="text"
REL=["next"|"previous"|"parent"|"made"]
REV=["next"|"previous"|"parent"|"made"]
TITLE="text">: URL은 가져올 문서, 그림, 사운드를 나타냄. TITLE은 HREF의 대상으로 사용되기 위함

분리자

<br CLEAR=["left" | "right"]>: 텍스트를 중단하고 다음 라인으로, CLEAR는 그림 밑으로 텍스트가 오게
<nobr>: nobr 사이에 있는 텍스트에는 다음 라인으로 넘어가지 않음
<wbr>: nobr 사이 중에서도 다음 라인으로
<p>: 텍스트를 중단하고 다음 문단으로, 대부분 빈 라인이 삽입됨
<hr SIZE="value"
WIDTH=["pixles" | "precentage"]
ALIGN=["left"|"right"|"center"]
NOSHADE>: 수평 분리선을 삽입

텍스트 폼

<form
ACTION="URL"
METHOD=["get"|"post"]>text</form>: form에 포함되어 있는 text는 데이타를 모으고 이를 서버의 CGI 스크립트로 보내는 데에 사용된다. CGI 스크립트는 action에 명시되고 인자로 form의 내용을 받는다. get method는 만들어진 데이타를 QUERY_STRING이라는 환경 변수로 보내고 post method는 standard input을 통해 보낸다.
<input
TYPE=["text"|"password"|"checkbox"|"radio"|"submit"|"reset"]
NAME="name"
VALUE="value"
SIZE="number"
MAXLENGTH="number"
CHECKED>: 입력을 받을 수 있는 오브젝트를 만든다. submit는 현재 값을 form에게 넘겨주는 버튼을 reset은 초기값으로 되돌리는 버튼을 만든다. 각 input의 name은 radio와 checkbox에 의해 공유되는 경우 이외에는 unique해야 한다.
<select
NAME="name"
SIZE="number"
MULTIPLE>text/option list</select>: 모티프의 리스트와 같은 선택 오브젝트를 생성한다. select tag 사이에는 <option> tag가 나와서 리스트 멤버를 구성한다. Multiple은 중복 선택을 허용한다.
<option
VALUE="text"
SELECTED="label">: Select input 오브젝트의 항목을 나타낸다. seelcted는 이미 선택된 것으로 하고 싶을 때에 사용한다.
<textarea
NAME="name"
ROWS="number"
COLS="number">text</textarea>: 여러 줄에 걸치는 텍스트를 만든다. 대개 스크롤 바가 붙는다.
<isindex
ACTION="cgi-command"
PROMPT="text">: 현재 문서에 대해 탐색 가능한 인덱스를 나타내는 데에 사용된다. Action의 CGI 스크립트는 입력을 parse하는 데에 사용된다.

테이블

<table
BORDER="cgi-command">text</table>: 메인 테이블 tag. 모든 테이블 관련 tag들은 table tag내에 나와야 한다.
<tr>text</tr>: 테이블 행을 나타낸다.
<td>text</td>: 테이블 셀을 나타낸다. 테이블 행 tag 안에 나타나야 한다.
<th>text</th>: 테이블 헤더를 나타낸다.
<caption
ALIGN=["top"|"bottom"]>text</caption>: 테이블의 caption을 나타낸다. Align은 caption이 테이블의 어느 위치에 올 것이지를 결정한다.

<th>와 <td>는 다음과 같은 option을 가질 수 있다.

ALIGN=["left"|"center"|"right"]

수평 alignment

VALIGN=["top"|"middle"|"bottom"|"baseline"]

수직 alignment

NOWRAP

Wrap 되지 않게

COLSPAN

Column의 span 수

ROWSPAN

Row의 span 수

특수문자들

 &lt; ----------------- Less-than sign (<)

&gt; ----------------- Greater-than sign (>)

&amp; ---------------- ampersand (&)

&quot; --------------- Double quote (")

&reg; ---------------- Registered symbol (®)

&copy; --------------- Copyright symbol (©)

&nbsp; --------------- Space ( )


&AElig; -------------- Uppercase A-E ligature (Æ)

&Aacute; ------------- Uppercase A, acute accent (Á)

&Acirc; -------------- Uppercase A, circumflex accent (Â)

&Agrave; ------------- Uppercase A, grave accent (À)

&Aring; -------------- Uppercase A, ring (Å)

&Atilde; ------------- Uppercase A, tilde (Ã)

&Auml; --------------- Uppercase A, umlaut (Ä)

&Ccedil; ------------- Uppercase C, cedilla (Ç)

&ETH; ---------------- Uppercase ETH, Icelandic (Ð)

&Eacute; ------------- Uppercase E, acute accent (É)

&Ecirc; -------------- Uppercase E, circumflex accent (Ê)

&Egrave; ------------- Uppercase E, grave accent (È)

&Euml; --------------- Uppercase E, umlaut (Ë)

&Iacute; ------------- Uppercase I, acute accent (Í)

&Icirc; -------------- Uppercase I, circumflex accent (Î)

&Igrave; ------------- Uppercase I, grave accent (Ì)

&Iuml; --------------- Uppercase I, umlaut (Ï)

&Oacute; ------------- Uppercase O, acute accent (Ó)

&Ocirc; -------------- Uppercase O, circumflex accent (Ô)

&Ograve; ------------- Uppercase O, grave accent (Ò)

&Oslash; ------------- Uppercase O, slash (Ø)

&Otilde; ------------- Uppercase O, tilde (Õ)

&Ouml; --------------- Uppercase O, umlaut (Ö)

&THORN; -------------- Uppercase THORN, Icelandic (Þ)

&Uacute; ------------- Uppercase U, acute accent (Ú)

&Ucirc; -------------- Uppercase U, circumflex accent (Û)

&Ugrave; ------------- Uppercase U, grave accent (Ù)

&Uuml; --------------- Uppercase U, umlaut (Ü)

&Yacute; ------------- Uppercase Y, acute accent (Ý)

&aelig; -------------- Lowercase a-e ligature (æ)

&aacute; ------------- Lowercase a, acute accent (á)

&acirc; -------------- Lowercase a, circumflex accent (â)

&agrave; ------------- Lowercase a, grave accent (à)

&aring; -------------- Lowercase a, ring (å)

&atilde; ------------- Lowercase a, tilde (ã)

&auml; --------------- Lowercase a, umlaut (ä)

&ccedil; ------------- Lowercase c, cedilla (ç)

&eth; ---------------- Lowercase eth, Icelandic (ð)

&eacute; ------------- Lowercase e, acute accent (é)

&ecirc; -------------- Lowercase e, circumflex accent (ê)

&egrave; ------------- Lowercase e, grave accent (è)

&euml; --------------- Lowercase e, umlaut (ë)

&iacute; ------------- Lowercase i, acute accent (í)

&icirc; -------------- Lowercase i, circumflex accent (î)

&igrave; ------------- Lowercase i, grave accent (ì)

&iuml; --------------- Lowercase i, umlaut (ï)

&oacute; ------------- Lowercase o, acute accent (ó)

&ocirc; -------------- Lowercase o, circumflex accent (ô)

&ograve; ------------- Lowercase o, grave accent (ò)

&oslash; ------------- Lowercase o, slash (ø)

&otilde; ------------- Lowercase o, tilde (õ)

&ouml; --------------- Lowercase o, umlaut (ö)

&thorn; -------------- Lowercase thorn, Icelandic (þ)

&uacute; ------------- Lowercase u, acute accent (ú)

&ucirc; -------------- Lowercase u, circumflex accent (û)

&ugrave; ------------- Lowercase u, grave accent (ù)

&uuml; --------------- Lowercase u, umlaut (ü)

&yacute; ------------- Lowercase y, acute accent (ý)

'웹디자인' 카테고리의 다른 글

최후의 만찬 애니메이션 그림 (0)	2011.01.27
여름 수련회(여름캠프) 로고, 마크 (0)	2011.01.27
무선 인터넷 속도가 나지 않는다면 체크하세요!! (0)	2010.08.14
제로보드 4 보안패치 수정방법 (2)	2010.03.27
지붕뚫고 하이킥 포스터 수정하기 (0)	2010.03.17
웹에디터 어떤한 것들이 있는가? (1)	2010.03.13
제로보드 4 설치 방법 (14)	2010.03.11
윈도우 로고 디자인 psd 파일 (0)	2010.03.10
어린이 동화풍 이미지 모음 (0)	2010.03.10
구글 넥스서원 PSD 디자인 파일 (0)	2010.03.10

리뷰홀릭

HTML 요약 정리

'웹디자인' 카테고리의 다른 글

티스토리툴바

HTML 요약 정리

'웹디자인' 카테고리의 다른 글

관련글

티스토리툴바