본문 바로가기
웹디자인

HTML 요약 정리

by URBAN 2010. 3. 15.
반응형




문서의 구조
<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를 가운데로 정렬
 

<hn>text</hn>

         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> 리스트 안에서 항상 짝을 이루어야 함

설명문

<!--text-->
설명문은 중복(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 (ý)
반응형