HTML/CSS 레퍼런스란?

HTML/CSS 레퍼런스 안내

HTML/CSS 레퍼런스는 HTML 4.01과 CSS2에 대한 레퍼런스입니다. HTML/CSS 레퍼런스에 나온 CSS 설명에는 CSS2의 속성에 대한 내용도 포함되어 있습니다. CSS2는 주로 일반적인 화면용 웹 브라우저에서 사용되며 문자용 매체의 속성은 포함하고 있지는 않습니다.

관련 웹사이트

HTML과 CSS에 대한 보다 자세한 설명은 다음 웹사이트를 참고하십시오.

  • HTML 4.01 권장사항
  • CSS2에 대한 설명
저작권 정보

HTML/CSS 레퍼런스의 일부는 "1996-1999 웹 디자인 그룹"(Web Design Group)에 저작권이 있습니다. 본 저작물은 공개 출판 라이센스 v1.0 (또는 이후 버전)에 명기된 조건과 약정에 따라 배급됩니다. 최신 버전은 http://www.opencontent.org/openpub/에서 받아볼 수 있습니다. 그 이외 모든 내용의 저작권은 Copyright ⓒ 2003 (주)세중 나모 인터랙티브에 있습니다.


HTML 속성값 형식

CDATA

CDATA는 문자의 연속으로 이루어집니다. 엔티티(Entity)도 포함될 수 있습니다. 개행 문자는 무시되고 캐리지 리턴과 탭은 공백 문자로 대체됩니다. 웹 브라우저는 속성값 앞뒤의 여백을 무시합니다.

Name

A-Z, a-z 사이의 문자로 시작해야 하며, A-Z, a-z, 아라비아 숫자(0-9), 하이픈("-"), 밑줄("_"), 콜론(":"), 점(".")으로 되어 있어야 합니다. 이들 값은 대소문자를 구분합니다.

ElementID

요소의 ID값을 의미합니다. A-Z, a-z 사이의 문자로 시작해야 하며, A-Z, a-z), 아라비아 숫자(0-9), 하이픈("-"), 밑줄("_"), 콜론(":"), 점(".")으로 되어 있어야 합니다. 이들 값은 대소문자를 구분합니다.

IdRefs

다른 요소의 ID 속성값을 나타냅니다. IDREFS 값은 공백 문자로 분리된 여러 개의 ID 목록을 나타내는 반면, IDREF 값은 단 하나의 ID를 나타냅니다. IDREF와 IDREFS는 대소문자를 구분합니다.

Number

Number는 0에서 9까지의 숫자 중 하나 이상의 숫자로 구성된 수를 의미합니다.

Text

Text는 사람이 읽을 수 있는 형태의 CDATA 값으로 공백 문자를 포함한 문자열을 의미합니다.

URI

URI는 리소스의 위치를 나타냅니다. URI는 "image/logo.gif"와 같은 상대 경로와 "http://www.namo.com"과 같은 절대 경로를 모두 포함합니다.

Color

색깔을 나타냅니다. 16진수로 된 RGB 코드값 또는 16가지의 기본 색깔 이름으로 표기되며, 16진수로 표기할 때는 "#" 문자를 앞에 표기해야 합니다. 색깔 이름은 대소문자를 구분하지 않습니다. 각 색깔의 RGB 코드값은 다음과 같습니다.

Color Name | sRGB Value
Black | #000000
Silver | #C0C0C0
Gray | #808080
White | #FFFFFF
Maroon | #800000
Red | #FF0000
Purple | #800080
Fuchsia | #FF00FF
Green | #008000
Lime | #00FF00
Olive | #808000
Yellow | #FFFF00
Navy | #000080
Blue | #0000FF
Teal | #008080
Aqua | #00FFFF
Pixels

픽셀 수를 표시하는 정수를 의미합니다.

Length

픽셀 수를 표시하는 정수 또는 수직/수평 여백에 대한 비율(%)을 의미합니다. 예를 들어 50은 50픽셀을 가리키고, 50%는 사용 가능한 여백의 반을 가리킵니다.

Coords

좌표점을 의미합니다.

MultiLength

픽셀 수를 표시하는 정수, 수직/수평 여백에 대한 비율(%), 또는 상대 길이 (i 가 정수인 경우에 i*로 표현)를 의미합니다. 브라우저는 공백을 배분할 때, 픽셀로 지정된 것을 먼저 배분하고 비율로 지정된 것을 배분한 다음, 상대 길이로 지정된 요소들에게 남아있는 공백을 배분합니다. 3*의 길이를 가진 요소는 1* 길이를 가진 요소의 여백의 3배로 배분됩니다. MultiLengths는 MultiLength의 값을 쉼표로 구분하여 여러 개 기록한 목록입니다.

ContentTypes

링크되거나 삽입된 리소스의 MIME 타입을 가리킵니다. ContentType은 하나의 콘텐트 타입을 의미하고, ContentTypes는 여러 개의 콘텐트 타입을 쉼표로 분리하여 기록한 것을 의미합니다. 일반적으로 흔히 쓰이는 콘텐트 타입에는 text/html, image/jpeg, model/vrml, video/quicktime, application/java, text/css, 와 text/javascript가 있습니다.

LanguageCode
RFC 1766에 따라 규정하는 언어 코드를 의미합니다. 예를 들어 영국 영어는 en, 미국 영어는 en-US, 일본어는 ja로 표기됩니다. 언어 코드는 대소문자를 구분하지 않으며 공백 문자는 사용할 수 없습니다.
Charset

링크된 리소스의 문자 인코딩을 의미합니다. Charset는 하나의 문자 인코딩을 의미하고, Charsets은 공백과 콤마(,,)로 구분된 문자의 인코딩 목록을 의미합니다. 문자 인코딩의 예로는 ISO-8859-1, SHIFT_JIS, UTF-8 등이 있습니다.

Character

하나의 유니코드 문자를 의미합니다. 문자는 엔티티를 이용하여 규정될 수 있습니다.

Datetime

YYYY-MM-DDThh:mm:ssTZD의 형태로 날짜와 시간을 나타냅니다. YYYY는 4자리 숫자로 표시된 연도이며, MM은 2자리 숫자로 표시된 달, DD은 2자리 숫자로 표시된 날짜, hh는 2자리 숫자로 표시된 시간, mm은 2자리 숫자로 표시된 분, ss는 2자리 숫자로 표시된 초, 마지막으로 TZD는 타임 존을 나타냅니다.

타임 존은 다음과 같은 방법으로 나타낼 수 있습니다.

  • Z (대문자) : UTC를 표시 (UTC(Coordinated Universal Time)는 GMT와 동일.
  • +hh:mm : UTC보다 빠른 시간으로 시와 분으로 나타냅니다.
  • -hh:mm : UTC보다 늦은 시간으로 시와 분으로 나타냅니다.
LinkTypes

여러 링크 타입을 공백으로 분리한 목록입니다. 링크 타입은 대소문자를 구분하지 않으며, 공백을 포함하지 않습니다. 각각의 링크 타입은 문서에서 여러 번 사용될 수 있습니다.

  • Alternate : 문서의 대체 버전을 규정합니다. LINK 요소의 hreflang 속성과 함께 사용될 때 이 값은 문서의 전환을 의미합니다. LINK의 media 속성과 함께 쓰이면, 미디어 관련 버전을 의미합니다.
  • StyleSheet : 문서의 외부 스타일 시트를 규정합니다. 이 링크 타입은 대체 스타일 시트를 정의하기 위해 Alternate 링크 타입과 함께 쓰일 수 있습니다.
  • Start : 문서 모음에서 처음의 문서를 규정합니다.
  • Next : 문서를 읽어들이는 순서에서 다음에 읽힐 문서를 규정합니다. WebTV와 같은 브라우저는 로딩 시간을 줄이기 위해 "next"라고 정의된 문서를 미리 로딩합니다.
  • Prev : 문서를 읽어들이는 순서에서 이전 문서를 규정합니다.
  • Contents : 문서의 목차를 규정합니다.
  • Index : 문서 인덱스를 제공합니다.
  • Glossary : 문서에서 사용된 용어 정리를 제공합니다.
  • Copyright : 문서의 저작권 정보를 규정합니다.
  • Chapter : 문서 모음에서 장을 규정합니다.
  • Section : 문서 모음에서 섹션을 규정합니다.
  • Subsection : 문서 모음에서 하위 섹션을 규정합니다.
  • Appendix : 문서 모음에서 부록을 규정합니다.
  • Help : 문서의 도움말을 규정합니다.
  • Bookmark : 관련 문서의 주요 단어를 규정합니다. TITLE 속성에서 책갈피의 제목을 지정합니다.
MediaDesc

미디어 기술어 즉, 링크된 리소스가 연결한 미디어를 쉼표로 분리하여 목록으로 나타낸 것을 의미합니다. 미디어 서술어는 대소문자를 구분합니다. 다음은 HTML 4.01에서 지정된 미디어 기술어입니다.

  • screen (기본값) - 페이지로 나뉘어 지지 않은 컴퓨터 화면
  • tty - 고정폭 문자 그리드 디스플레이 (예: Lynx에서 쓰이는 디스플레이)
  • tv - 낮은 해상도와 스크롤이 제한적인 텔레비젼 타입의 장치들
  • projection - 프로젝터 장치
  • handheld - 핸드헬드(Handheld) 장치들 (작고, 단색 디스플레이와 작은 대역폭을 가진 장치들)
  • print - 프린터 출력 장치
  • braille - 점자 표기 장치
  • aural - 음석 인식 장치
  • all - 모든 장치
Script

클라이언트 사이드 스크립트로, 일반적으로 함수 호출문이나 짧은 스크립트로 표시됩니다.

StyleDesc

스타일 시트 데이터를 의미합니다.

ClassName

CSS의 클래스 식별자를 의미합니다.

FrameTarget

A-Z, a-z 사이의 문자로 시작해야 하며 다음의 예와 같이 몇몇 특수 값은 예외적으로 밑줄로 시작됩니다.

  • _blank : 제목 없는 새 창에 표시합니다.
  • _self : 현재 프레임에 표시합니다. ( BASE TARGET을 무시하고 겹쳐 쓰는데 유용함.)
  • _parent: FRAMESET 부모 프레임에 표시합니다.
  • _top : 프레임 없는 전체 창에 표시합니다.


인라인 요소(Inline elements)

BODY 요소에 쓰이는 대부분의 HTML 4.01 요소들은 블록 요소(Block-level elements)또는 인라인 요소(Inline elements)로 분류됩니다. 인라인 요소는 대개 텍스트와 다른 인라인 요소만을 포함할 수 있습니다. 블록 요소와 달리, 인라인 요소는 웹 브라우저에서 새로운 줄에 표시되지 않습니다.

다음은 HTML 4.01에서 인라인 요소로 정의된 요소들입니다.

A | ABBR | ACRONYM | B
BASEFONT | BDO | BIG | BR
CITE | CODE | DFN | EM
FONT | I | IMG | INPUT
KBD | LABEL | Q | S
SAMP | SELECT | SMALL | SPAN
STRIKE | STRONG | SUB | SUP
TEXTAREA | TT | U | VAR

다음의 요소는 블록 요소나 인라인 요소로 모두 쓰일 수 있습니다. 만일 인라인 요소로 사용되었을 때는(예를 들어 P와 같은 인라인 요소 안에) 블록 요소를 포함할 수 없습니다.


블록 요소(Block-level elements)

블록 요소는 일반적으로 웹 브라우저에 표시될 때 새로운 줄에서 시작합니다.

다음은 HTML 4.01에 정의된 블록 요소입니다.

ADDRESS | BLOCKQUOTE | CENTER | DIR
DIV | DL | FIELDSET | FORM
H1 | H2 | H3 | H4
H5 | H6 | HR | ISINDEX
MENU | NOFRAMES | NOSCRIPT | OL
P | PRE | TABLE | UL

다음 요소들은 다른 블록 요소들을 포함할 수 있기 때문에 블록 요소로 간주되는 요소입니다.

DD | DT | FRAMESET | LI | TBODY
TD | TFOOT | TH | THEAD | TR

다음 요소들은 블록 요소 또는 인라인 요소 모두로 쓰일 수 있습니다. 만일 인라인 요소로 사용되었을 때는(예를 들어 P와 같은 인라인 요소 안에) 블록 요소를 포함할 수 없습니다.


HTML 4.01 엔티티

HTML 4.01 엔티티(Entities)

문자 개체 레퍼런스는 줄여서 개체(entities)라고 합니다. 개체(entities)는 문서의 인코딩 기능으로 표현할 수 없거나 키보드로 쉽게 입력할 수 없는 문자를 입력하는 방법을 제공합니다. 개체는 대문자와 소문자를 구별하며 &이름; 형태를 취합니다. 개체의 예로는 copyright 심볼을 나타내기 위한 &copy;와 그리스 문자 "알파"(alpha)를 나타내기 위한 &Alpha;가 있습니다.

개체 이외에도 숫자형 문자 레퍼런스(numeric character references)를 사용할 수 있습니다. 개체가 유니코드 문자만 나타낼 수 있는 반면에 숫자형 문자 레퍼런스는 모든 문자를 나타낼 수 있습니다. 숫자형 문자 레퍼런스는 10진수 또는 16진수 형태를 취할 수 있지만 브라우저는 10진수 형태를 더 강력히 지원합니다. 10진수 레퍼런스는 &#숫자; 형태를 취합니다. 반면에 16진수 변수는 대소문자를 구분하는 &#x숫자; 형태를 취합니다. 숫자형 문자 레퍼런스의 예로는 copyright 심볼을 나타내기 위한 &#169;와 &#xA9;가 있으며 그리스 문자 "알파"(alpha)를 나타내기 위한 &#913;과 &#x391;이 있으며 아라비아 문자 "알레프"(ALEF)을 나타내기 위한 &#1575; 또는 &#x627;이 있습니다.

아래의 문서들은 HTML 4.01의 문자 개체 레퍼런스 표와 숫자형 문자 레퍼런스 표(10진수 형태와 16진수 형태)를 보여줍니다. 사용자가 브라우저 호환성을 점검할 수 있도록 모든 문자 레퍼런스를 보여줍니다..

  • 라틴-1 개체
  • 심볼과 그리스 문자
  • 다른 특수 문자


Latin-1 엔티티

Latin-1 엔티티(Entities)

아래 표는 Latin-1(ISO-8859-1)의 8비트 문자를 위한 문자 개체 레퍼런스, 10진수 문자 레퍼런스, 16진수 문자 레퍼런스입니다. 또한 사용중인 브라우저에서 어떻게 나타나는 지를 보여줍니다. 문자와 관련된 자세한 정보는 유니코드 협회(Unicode Consortium)의 홈페이지에서 볼 수 있습니다.

브라우저는 10진수 문자 레퍼런스를 가장 잘 지원합니다. 단, 엑센트가 표시된 문자(10진수 192-214, 216-246, 248-255)는 잘 지원되지 않을 수 있습니다.

맥킨토시 브라우저는 14개의 Latin-1 문자를 정확하지 않게 출력할 수 있습니다. 이러한 문자들은 10진수 166, 178, 179, 185, 188, 189, 190, 208, 215, 221, 222, 240, 253, 254입니다. 참조: ISO-8859-1 and the Mac platform

문자 | 개체 | 10진수 | 16진수 | 브라우저 출력결과
 |  |  |  | 개체 | 10진수 | 16진수
띄어쓰기 공간 | &nbsp; | &#160; | &#xA0; |  |  | &#xA0;
상하반전 느낌표 | &iexcl; | &#161; | &#xA1; | ¡ | ¡ | &#xA1;
센트(cent) | &cent; | &#162; | &#xA2; | ¢ | ¢ | &#xA2;
파운드(pound) | &pound; | &#163; | &#xA3; | £ | £ | &#xA3;
통화(currency) | &curren; | &#164; | &#xA4; | ¤ | ¤ | &#xA4;
엔화(yen) | &yen; | &#165; | &#xA5; | ¥ | ¥ | &#xA5;
끊어진 세로 막대기 | &brvbar; | &#166; | &#xA6; | ¦ | ¦ | &#xA6;
섹션(section) 부호 | &sect; | &#167; | &#xA7; | § | § | &#xA7;
분음부호(diaeresis) | &uml; | &#168; | &#xA8; | ¨ | ¨ | &#xA8;
저작권(copyright) 부호 | &copy; | &#169; | &#xA9; | © | © | &#xA9;
여성 표시자 | &ordf; | &#170; | &#xAA; | ª | ª | &#xAA;
이중 꺽음 좌측 인용부호 | &laquo; | &#171; | &#xAB; | « | « | &#xAB;
부호 아님 | &not; | &#172; | &#xAC; | ¬ | ¬ | &#xAC;
하이픈 | &shy; | &#173; | &#xAD; |  |  | &#xAD;
등록 부호 | &reg; | &#174; | &#xAE; | ® | ® | &#xAE;
윗 줄 | &macr; | &#175; | &#xAF; | ¯ | ¯ | &#xAF;
도(degree) | &deg; | &#176; | &#xB0; | ° | ° | &#xB0;
플러스 마이너스 부호 | &plusmn; | &#177; | &#xB1; | ± | ± | &#xB1;
윗첨자 2 | &sup2; | &#178; | &#xB2; | ² | ² | &#xB2;
윗첨자 3 | &sup3; | &#179; | &#xB3; | ³ | ³ | &#xB3;
고음 악센트 | &acute; | &#180; | &#xB4; | ´ | ´ | &#xB4;
마이크로 | &micro; | &#181; | &#xB5; | µ | µ | &#xB5;
단락 표시 | &para; | &#182; | &#xB6; | ¶ | ¶ | &#xB6;
중간점 | &middot; | &#183; | &#xB7; | · | · | &#xB7;
갈고리형 부호 | &cedil; | &#184; | &#xB8; | ¸ | ¸ | &#xB8;
윗첨자 1 | &sup1; | &#185; | &#xB9; | ¹ | ¹ | &#xB9;
남성 표시자 | &ordm; | &#186; | &#xBA; | º | º | &#xBA;
이중 꺽음 우측 인용부호 | &raquo; | &#187; | &#xBB; | » | » | &#xBB;
1/4 | &frac14; | &#188; | &#xBC; | ¼ | ¼ | &#xBC;
1/2 | &frac12; | &#189; | &#xBD; | ½ | ½ | &#xBD;
3/4 | &frac34; | &#190; | &#xBE; | ¾ | ¾ | &#xBE;
상하반전 물음표 | &iquest; | &#191; | &#xBF; | ¿ | ¿ | &#xBF;
라틴 대문자 A (저음 악센트) | &Agrave; | &#192; | &#xC0; | À | À | &#xC0;
라틴 대문자 A (고음 악센트) | &Aacute; | &#193; | &#xC1; | Á | Á | &#xC1;
라틴 대문자 A (곡절 악센트) | &Acirc; | &#194; | &#xC2; | Â | Â | &#xC2;
라틴 대문자 A (틸데 악센트) | &Atilde; | &#195; | &#xC3; | Ã | Ã | &#xC3;
라틴 대문자 A (분음 부호) | &Auml; | &#196; | &#xC4; | Ä | Ä | &#xC4;
라틴 대문자 A (원 부호) | &Aring; | &#197; | &#xC5; | Å | Å | &#xC5;
라틴 대문자 AE | &AElig; | &#198; | &#xC6; | Æ | Æ | &#xC6;
라틴 대문자 C | &Ccedil; | &#199; | &#xC7; | Ç | Ç | &#xC7;
라틴 대문자 E (저음 악센트) | &Egrave; | &#200; | &#xC8; | È | È | &#xC8;
라틴 대문자 E (고음 악센트) | &Eacute; | &#201; | &#xC9; | É | É | &#xC9;
라틴 대문자 E (곡절 악센트) | &Ecirc; | &#202; | &#xCA; | Ê | Ê | &#xCA;
라틴 대문자 E (분음 부호) | &Euml; | &#203; | &#xCB; | Ë | Ë | &#xCB;
라틴 대문자 I (저음 악센트) | &Igrave; | &#204; | &#xCC; | Ì | Ì | &#xCC;
라틴 대문자 I (고음 악센트) | &Iacute; | &#205; | &#xCD; | Í | Í | &#xCD;
라틴 대문자 I (곡절 악센트) | &Icirc; | &#206; | &#xCE; | Î | Î | &#xCE;
라틴 대문자 I (분음 부호) | &Iuml; | &#207; | &#xCF; | Ï | Ï | &#xCF;
라틴 대문자 ETH | &ETH; | &#208; | &#xD0; | Ð | Ð | &#xD0;
라틴 대문자 N (틸데 악센트) | &Ntilde; | &#209; | &#xD1; | Ñ | Ñ | &#xD1;
라틴 대문자 O (저음 악센트) | &Ograve; | &#210; | &#xD2; | Ò | Ò | &#xD2;
라틴 대문자 O (고음 악센트) | &Oacute; | &#211; | &#xD3; | Ó | Ó | &#xD3;
라틴 대문자 O (곡절 악센트) | &Ocirc; | &#212; | &#xD4; | Ô | Ô | &#xD4;
라틴 대문자 O (틸데 악센트) | &Otilde; | &#213; | &#xD5; | Õ | Õ | &#xD5;
라틴 대문자 O (분음 부호) | &Ouml; | &#214; | &#xD6; | Ö | Ö | &#xD6;
곱셈 부호 | &times; | &#215; | &#xD7; | × | × | &#xD7;
라틴 대문자 O (슬래쉬) | &Oslash; | &#216; | &#xD8; | Ø | Ø | &#xD8;
라틴 대문자 U 저음 악센트 | &Ugrave; | &#217; | &#xD9; | Ù | Ù | &#xD9;
라틴 대문자 U (고음 악센트) | &Uacute; | &#218; | &#xDA; | Ú | Ú | &#xDA;
라틴 대문자 U (곡절 악센트) | &Ucirc; | &#219; | &#xDB; | Û | Û | &#xDB;
라틴 대문자 U (분음 부호) | &Uuml; | &#220; | &#xDC; | Ü | Ü | &#xDC;
라틴 대문자 Y (고음 악센트) | &Yacute; | &#221; | &#xDD; | Ý | Ý | &#xDD;
라틴 대문자 THORN | &THORN; | &#222; | &#xDE; | Þ | Þ | &#xDE;
라틴 소문자 ess-zed | &szlig; | &#223; | &#xDF; | ß | ß | &#xDF;
라틴 소문자 a (저음 악센트) | &agrave; | &#224; | &#xE0; | à | à | &#xE0;
라틴 소문자 a (고음 악센트) | &aacute; | &#225; | &#xE1; | á | á | &#xE1;
라틴 소문자 a (곡절 악센트) | &acirc; | &#226; | &#xE2; | â | â | &#xE2;
라틴 소문자 a (틸데 악센트) | &atilde; | &#227; | &#xE3; | ã | ã | &#xE3;
라틴 소문자 a (분음 부호) | &auml; | &#228; | &#xE4; | ä | ä | &#xE4;
라틴 소문자 a (원 부호) | &aring; | &#229; | &#xE5; | å | å | &#xE5;
라틴 소문자 ae | &aelig; | &#230; | &#xE6; | æ | æ | &#xE6;
라틴 소문자 c (갈고리형 부호) | &ccedil; | &#231; | &#xE7; | ç | ç | &#xE7;
라틴 소문자 e (저음 악센트) | &egrave; | &#232; | &#xE8; | è | è | &#xE8;
라틴 소문자 e (고음 악센트) | &eacute; | &#233; | &#xE9; | é | é | &#xE9;
라틴 소문자 e (곡절 악센트) | &ecirc; | &#234; | &#xEA; | ê | ê | &#xEA;
라틴 소문자 e (분음 부호) | &euml; | &#235; | &#xEB; | ë | ë | &#xEB;
라틴 소문자 i (저음 악센트) | &igrave; | &#236; | &#xEC; | ì | ì | &#xEC;
라틴 소문자 i (고음 악센트) | &iacute; | &#237; | &#xED; | í | í | &#xED;
라틴 소문자 i (곡절 악센트) | &icirc; | &#238; | &#xEE; | î | î | &#xEE;
라틴 소문자 i (분음 부호) | &iuml; | &#239; | &#xEF; | ï | ï | &#xEF;
라틴 소문자 eth | &eth; | &#240; | &#xF0; | ð | ð | &#xF0;
라틴 소문자 n (틸데 악센트) | &ntilde; | &#241; | &#xF1; | ñ | ñ | &#xF1;
라틴 소문자 o (저음 악센트) | &ograve; | &#242; | &#xF2; | ò | ò | &#xF2;
라틴 소문자 o (고음 악센트) | &oacute; | &#243; | &#xF3; | ó | ó | &#xF3;
라틴 소문자 o (곡절 악센트) | &ocirc; | &#244; | &#xF4; | ô | ô | &#xF4;
라틴 소문자 o (틸데 악센트) | &otilde; | &#245; | &#xF5; | õ | õ | &#xF5;
라틴 소문자 o (분음 부호) | &ouml; | &#246; | &#xF6; | ö | ö | &#xF6;
나눗셈 부호 | &divide; | &#247; | &#xF7; | ÷ | ÷ | &#xF7;
라틴 소문자 o (슬래쉬) | &oslash; | &#248; | &#xF8; | ø | ø | &#xF8;
라틴 소문자 u (저음 악센트) | &ugrave; | &#249; | &#xF9; | ù | ù | &#xF9;
라틴 소문자 u (고음 악센트) | &uacute; | &#250; | &#xFA; | ú | ú | &#xFA;
라틴 소문자 u (곡절 악센트) | &ucirc; | &#251; | &#xFB; | û | û | &#xFB;
라틴 소문자 u (분음 부호) | &uuml; | &#252; | &#xFC; | ü | ü | &#xFC;
라틴 소문자 y (고음 악센트) | &yacute; | &#253; | &#xFD; | ý | ý | &#xFD;
라틴 소문자 thorn | &thorn; | &#254; | &#xFE; | þ | þ | &#xFE;
라틴 소문자 y (분음 부호) | &yuml; | &#255; | &#xFF; | ÿ | ÿ | &#xFF;


심볼 및 그리스 문자 엔티티

심볼 및 그리스 문자 엔티티(Entities)

아래 표는 심볼 및 그리스 문자 개체 레퍼런스, 10진수 문자 레퍼런스, 16진수 문자 레퍼런스를 보여줍니다. 또한 지금 사용중인 브라우저에서의 출력 결과를 보여줍니다. 문자와 관련된 자세한 정보는 유니코드 협회(Unicode Consortium)의 홈페이지에서 볼 수 있습니다.

이러한 개체들은 브라우저에 잘 나타나지 않습니다. 그러나 최신 브라우저에서는 문자 개체 레퍼런스와 10진수 개체 레퍼런스의 일부를 지원합니다.

문자 | 개체 | 10진수 | 16진수 | 브라우저 출력결과
 |  |  |  | Entity | Decimal | Hex
라틴 소문자 f ( 함수, 플로린 ) | &fnof; | &#402; | &#x192; | ƒ | ƒ | &#x192;
그리스어 대문자 알파 | &Alpha; | &#913; | &#x391; | Α | Α | &#x391;
그리스어 대문자 베타 | &Beta; | &#914; | &#x392; | Β | Β | &#x392;
그리스어 대문자 감마 | &Gamma; | &#915; | &#x393; | Γ | Γ | &#x393;
그리스어 대문자 델타 | &Delta; | &#916; | &#x394; | Δ | Δ | &#x394;
그리스어 대문자 엡실론 | &Epsilon; | &#917; | &#x395; | Ε | Ε | &#x395;
그리스어 대문자 제타 | &Zeta; | &#918; | &#x396; | Ζ | Ζ | &#x396;
그리스어 대문자 에타 | &Eta; | &#919; | &#x397; | Η | Η | &#x397;
그리스어 대문자 세타 | &Theta; | &#920; | &#x398; | Θ | Θ | &#x398;
그리스어 대문자 아이오타 | &Iota; | &#921; | &#x399; | Ι | Ι | &#x399;
그리스어 대문자 카파 | &Kappa; | &#922; | &#x39A; | Κ | Κ | &#x39A;
그리스어 대문자 람다 | &Lambda; | &#923; | &#x39B; | Λ | Λ | &#x39B;
그리스어 대문자 뮤 | &Mu; | &#924; | &#x39C; | Μ | Μ | &#x39C;
그리스어 대문자 뉴 | &Nu; | &#925; | &#x39D; | Ν | Ν | &#x39D;
그리스어 대문자 키 | &Xi; | &#926; | &#x39E; | Ξ | Ξ | &#x39E;
그리스어 대문자 오미크론 | &Omicron; | &#927; | &#x39F; | Ο | Ο | &#x39F;
그리스어 대문자 피 | &Pi; | &#928; | &#x3A0; | Π | Π | &#x3A0;
그리스어 대문자 로 | &Rho; | &#929; | &#x3A1; | Ρ | Ρ | &#x3A1;
그리스어 대문자 시그마 | &Sigma; | &#931; | &#x3A3; | Σ | Σ | &#x3A3;
그리스어 대문자 타우 | &Tau; | &#932; | &#x3A4; | Τ | Τ | &#x3A4;
그리스어 대문자 입실론 | &Upsilon; | &#933; | &#x3A5; | Υ | Υ | &#x3A5;
그리스어 대문자 파이 | &Phi; | &#934; | &#x3A6; | Φ | Φ | &#x3A6;
그리스어 대문자 카이 | &Chi; | &#935; | &#x3A7; | Χ | Χ | &#x3A7;
그리스어 대문자 프사이 | &Psi; | &#936; | &#x3A8; | Ψ | Ψ | &#x3A8;
그리스어 대문자 오메가 | &Omega; | &#937; | &#x3A9; | Ω | Ω | &#x3A9;
그리스어 소문자 알파 | &alpha; | &#945; | &#x3B1; | α | α | &#x3B1;
그리스어 소문자 베타 | &beta; | &#946; | &#x3B2; | β | β | &#x3B2;
그리스어 소문자 감마 | &gamma; | &#947; | &#x3B3; | γ | γ | &#x3B3;
그리스어 소문자 델타 | &delta; | &#948; | &#x3B4; | δ | δ | &#x3B4;
그리스어 소문자 엡실론 | &epsilon; | &#949; | &#x3B5; | ε | ε | &#x3B5;
그리스어 소문자 제타 | &zeta; | &#950; | &#x3B6; | ζ | ζ | &#x3B6;
그리스어 소문자 에타 | &eta; | &#951; | &#x3B7; | η | η | &#x3B7;
그리스어 소문자 세타 | &theta; | &#952; | &#x3B8; | θ | θ | &#x3B8;
그리스어 소문자 아이오타 | &iota; | &#953; | &#x3B9; | ι | ι | &#x3B9;
그리스어 소문자 카파 | &kappa; | &#954; | &#x3BA; | κ | κ | &#x3BA;
그리스어 소문자 람다 | &lambda; | &#955; | &#x3BB; | λ | λ | &#x3BB;
그리스어 소문자 뮤 | &mu; | &#956; | &#x3BC; | μ | μ | &#x3BC;
그리스어 소문자 뉴 | &nu; | &#957; | &#x3BD; | ν | ν | &#x3BD;
그리스어 소문자 키 | &xi; | &#958; | &#x3BE; | ξ | ξ | &#x3BE;
그리스어 소문자 오미크론 | &omicron; | &#959; | &#x3BF; | ο | ο | &#x3BF;
그리스어 소문자 파이 | &pi; | &#960; | &#x3C0; | π | π | &#x3C0;
그리스어 소문자 로 | &rho; | &#961; | &#x3C1; | ρ | ρ | &#x3C1;
그리스어 소문자 시그마 (단어 끝) | &sigmaf; | &#962; | &#x3C2; | ς | ς | &#x3C2;
그리스어 소문자 시그마 | &sigma; | &#963; | &#x3C3; | σ | σ | &#x3C3;
그리스어 소문자 타우 | &tau; | &#964; | &#x3C4; | τ | τ | &#x3C4;
그리스어 소문자 입실론 | &upsilon; | &#965; | &#x3C5; | υ | υ | &#x3C5;
그리스어 소문자 파이 | &phi; | &#966; | &#x3C6; | φ | φ | &#x3C6;
그리스어 소문자 키 | &chi; | &#967; | &#x3C7; | χ | χ | &#x3C7;
그리스어 소문자 프사이 | &psi; | &#968; | &#x3C8; | ψ | ψ | &#x3C8;
그리스어 소문자 오메가 | &omega; | &#969; | &#x3C9; | ω | ω | &#x3C9;
그리스어 소문자 세타 심볼 | &thetasym; | &#977; | &#x3D1; | ϑ | ϑ | &#x3D1;
그리스어 웁실론 고리형 심볼 | &upsih; | &#978; | &#x3D2; | ϒ | ϒ | &#x3D2;
그리스어 파이 심볼 | &piv; | &#982; | &#x3D6; | ϖ | ϖ | &#x3D6;
불렛(bullet) = 검정색 작은 원 | &bull; | &#8226; | &#x2022; | • | • | &#x2022;
수평점 | &hellip; | &#8230; | &#x2026; | … | … | &#x2026;
프라임 (분, 피트) | &prime; | &#8242; | &#x2032; | ′ | ′ | &#x2032;
이중 프라임 (초, 인치) | &Prime; | &#8243; | &#x2033; | ′ | ″ | &#x2033;
윗 선 | &oline; | &#8254; | &#x203E; | ‾ | ‾ | &#x203E;
슬래쉬 (분수) | &frasl; | &#8260; | &#x2044; | ⁄ | ⁄ | &#x2044;
대문자 서체 P | &weierp; | &#8472; | &#x2118; | ℘ | ℘ | &#x2118;
대문자 블랙활자 I | &image; | &#8465; | &#x2111; | ℑ | ℑ | &#x2111;
대문자 블랙활자 R | &real; | &#8476; | &#x211C; | ℜ | ℜ | &#x211C;
트레이드 마크 (trade mark) | &trade; | &#8482; | &#x2122; | ™ | ™ | &#x2122;
알레프(alef) 심볼 | &alefsym; | &#8501; | &#x2135; | ℵ | ℵ | &#x2135;
좌향 화살표 | &larr; | &#8592; | &#x2190; | ← | ← | &#x2190;
상향 화살표 | &uarr; | &#8593; | &#x2191; | ↑ | ↑ | &#x2191;
우향 화살표 | &rarr; | &#8594; | &#x2192; | → | → | &#x2192;
하향 화살표 | &darr; | &#8595; | &#x2193; | ↓ | ↓ | &#x2193;
좌우향 화살표 | &harr; | &#8596; | &#x2194; | ↔ | ↔ | &#x2194;
꺽인 화살표 | &crarr; | &#8629; | &#x21B5; | ↵ | ↵ | &#x21B5;
큰 좌향 화살표 | &lArr; | &#8656; | &#x21D0; | ← | ⇐ | &#x21D0;
큰 상향 화살표 | &uArr; | &#8657; | &#x21D1; | ↑ | ⇑ | &#x21D1;
큰 우향 화살표 | &rArr; | &#8658; | &#x21D2; | → | ⇒ | &#x21D2;
큰 하향 화살표 | &dArr; | &#8659; | &#x21D3; | ↓ | ⇓ | &#x21D3;
큰 좌우향 화살표 | &hArr; | &#8660; | &#x21D4; | ↔ | ⇔ | &#x21D4;
전체에게 | &forall; | &#8704; | &#x2200; | ∀ | ∀ | &#x2200;
부분적 차이 | &part; | &#8706; | &#x2202; | ∂ | ∂ | &#x2202;
그곳에 있음 | &exist; | &#8707; | &#x2203; | ∃ | ∃ | &#x2203;
비었음 | &empty; | &#8709; | &#x2205; | ∅ | ∅ | &#x2205;
나블라(nabla) | &nabla; | &#8711; | &#x2207; | ∇ | ∇ | &#x2207;
~ 에 속함 | &isin; | &#8712; | &#x2208; | ∈ | ∈ | &#x2208;
~ 에 속하지 않음 | &notin; | &#8713; | &#x2209; | ∉ | ∉ | &#x2209;
포함함 | &ni; | &#8715; | &#x220B; | ∋ | ∋ | &#x220B;
프로덕트 | &prod; | &#8719; | &#x220F; | ∏ | ∏ | &#x220F;
합계 | &sum; | &#8721; | &#x2211; | ∑ | ∑ | &#x2211;
뺄셈 부호 | &minus; | &#8722; | &#x2212; | − | − | &#x2212;
애스터리스크(asterisk) | &lowast; | &#8727; | &#x2217; | ∗ | ∗ | &#x2217;
제곱근(square root) | &radic; | &#8730; | &#x221A; | √ | √ | &#x221A;
~ 에 비례 | &prop; | &#8733; | &#x221D; | ∝ | ∝ | &#x221D;
무한 | &infin; | &#8734; | &#x221E; | ∞ | ∞ | &#x221E;
각도 | &ang; | &#8736; | &#x2220; | ∠ | ∠ | &#x2220;
논리 부호 and | &and; | &#8743; | &#x2227; | ⊥ | ∧ | &#x2227;
논리 부호 or | &or; | &#8744; | &#x2228; | ∨ | ∨ | &#x2228;
교집(cap) | &cap; | &#8745; | &#x2229; | ∩ | ∩ | &#x2229;
합집(cup) | &cup; | &#8746; | &#x222A; | ∪ | ∪ | &#x222A;
인테그랄(integral) | &int; | &#8747; | &#x222B; | ∫ | ∫ | &#x222B;
그러므로 | &there4; | &#8756; | &#x2234; | ∴ | ∴ | &#x2234;
틸데 연산자 | &sim; | &#8764; | &#x223C; | ∼ | ∼ | &#x223C;
대략 같음 | &cong; | &#8773; | &#x2245; | ≅ | ≅ | &#x2245;
거의 같음 | &asymp; | &#8776; | &#x2248; | ≈ | ≈ | &#x2248;
같지 않음 | &ne; | &#8800; | &#x2260; | ≠ | ≠ | &#x2260;
동일함 | &equiv; | &#8801; | &#x2261; | ≡ | ≡ | &#x2261;
적거나 같음 | &le; | &#8804; | &#x2264; | ≤ | ≤ | &#x2264;
크거나 같음 | &ge; | &#8805; | &#x2265; | ≥ | ≥ | &#x2265;
~ 의 부분집합 | &sub; | &#8834; | &#x2282; | ⊂ | ⊂ | &#x2282;
~ 의 상위집합 | &sup; | &#8835; | &#x2283; | ⊃ | ⊃ | &#x2283;
~ 의 부분집합이 아님 | &nsub; | &#8836; | &#x2284; | ⊄ | ⊄ | &#x2284;
부분집합이거나 같음 | &sube; | &#8838; | &#x2286; | ⊆ | ⊆ | &#x2286;
상위집합이거나 같음 | &supe; | &#8839; | &#x2287; | ⊇ | ⊇ | &#x2287;
원형 덧셈부호(circled plus) | &oplus; | &#8853; | &#x2295; | ⊕ | ⊕ | &#x2295;
원형 곱셉부호(circled times) | &otimes; | &#8855; | &#x2297; | ⊗ | ⊗ | &#x2297;
수직 | &perp; | &#8869; | &#x22A5; | ⊥ | ⊥ | &#x22A5;
점 연산자 | &sdot; | &#8901; | &#x22C5; | ⋅ | ⋅ | &#x22C5;
레프트 실링(left ceiling) | &lceil; | &#8968; | &#x2308; | ⌈ | ⌈ | &#x2308;
라이트 실링(right ceiling) | &rceil; | &#8969; | &#x2309; | ⌉ | ⌉ | &#x2309;
레프트 플로어(left floor) = APL downstile | &lfloor; | &#8970; | &#x230A; | ⌊ | ⌊ | &#x230A;
라이트 플로어(right floor) | &rfloor; | &#8971; | &#x230B; | ⌋ | ⌋ | &#x230B;
좌측 꺽인 괄호 | &lang; | &#9001; | &#x2329; | ⟨ | ⟨ | &#x2329;
우측 꺽인 괄호 | &rang; | &#9002; | &#x232A; | ⟩ | ⟩ | &#x232A;
마름모 | &loz; | &#9674; | &#x25CA; | ◊ | ◊ | &#x25CA;
블랙 스페이드 | &spades; | &#9824; | &#x2660; | ♠ | ♠ | &#x2660;
블랙 클럽 | &clubs; | &#9827; | &#x2663; | ♣ | ♣ | &#x2663;
블랙 하트 | &hearts; | &#9829; | &#x2665; | ♥ | ♥ | &#x2665;
블랙 다이아몬드 | &diams; | &#9830; | &#x2666; | ♦ | ♦ | &#x2666;


특수 엔티티

특수 엔티티(Entities)

아래 표는 문장부호와 국제공통문자에 대한 문자 개체 레퍼런스, 10진수 문자 레퍼런스, 16진수 문자 레퍼런스입니다. 또한 지금 사용중인 브라우저에서의 출력 결과를 보여줍니다. 문자와 관련된 자세한 정보는 유니코드 협회(Unicode Consortium)의 홈페이지에서 볼 수 있습니다.

이러한 개체들은 HTML 2.0 버전의 &quot;, &amp;, &lt;, &gt;를 제외하고는 브라우저에 잘 나타나지 않습니다. 그러나 최신 브라우저에서는 문자 개체 레퍼런스와 10진수 개체 레퍼런스의 일부를 지원합니다.

문자 | 개체 | 10진수 | 16진수 | 브라우저 출력결과
 |  |  |  | 개체 | 10진수 | 16진수
인용부호 (프로그램 인용부호) | &quot; | &#34; | &#x22; | " | " | &#x22;
앰퍼샌드 (ampersand) | &amp; | &#38; | &#x26; | & | & | &#x26;
부등호(작음) | &lt; | &#60; | &#x3C; | < | < | &#x3C;
부등호(큼) | &gt; | &#62; | &#x3E; | > | > | &#x3E;
라틴 대문자 OE | &OElig; | &#338; | &#x152; | Œ | Œ | &#x152;
라틴 소문자 oe | &oelig; | &#339; | &#x153; | œ | œ | &#x153;
라틴 대문자 S (캐론 악센트) | &Scaron; | &#352; | &#x160; | Š | Š | &#x160;
라틴 소문자 s (캐론 악센트) | &scaron; | &#353; | &#x161; | š | š | &#x161;
라틴 대문자 Y (분음부호) | &Yuml; | &#376; | &#x178; | ÿ | Ÿ | &#x178;
곡절 악센트 | &circ; | &#710; | &#x2C6; | ˆ | ˆ | &#x2C6;
틸데 악센트 | &tilde; | &#732; | &#x2DC; | ˜ | ˜ | &#x2DC;
엔 스페이스 | &ensp; | &#8194; | &#x2002; |  |  | &#x2002;
엠 스페이스 | &emsp; | &#8195; | &#x2003; |  |  | &#x2003;
씬 스페이스 | &thinsp; | &#8201; | &#x2009; |  |  | &#x2009;
비결합자 | &zwnj; | &#8204; | &#x200C; | ‌ | ‌ | &#x200C;
결합자 | &zwj; | &#8205; | &#x200D; | ‍ | ‍ | &#x200D;
우향 표시 | &lrm; | &#8206; | &#x200E; | ‎ | ‎ | &#x200E;
좌향 표시 | &rlm; | &#8207; | &#x200F; | ‏ | ‏ | &#x200F;
엔 대시 | &ndash; | &#8211; | &#x2013; | – | – | &#x2013;
엠 대시 | &mdash; | &#8212; | &#x2014; | — | — | &#x2014;
작은 따옴표 (좌) | &lsquo; | &#8216; | &#x2018; | ‘ | ‘ | &#x2018;
작은 따옴표 (우) | &rsquo; | &#8217; | &#x2019; | ’ | ’ | &#x2019;
낮은 인용부호 (소) | &sbquo; | &#8218; | &#x201A; | ‚ | ‚ | &#x201A;
큰 따옴표 (좌) | &ldquo; | &#8220; | &#x201C; | “ | “ | &#x201C;
큰 따옴표 (우) | &rdquo; | &#8221; | &#x201D; | ” | ” | &#x201D;
낮은 인용부호 (대) | &bdquo; | &#8222; | &#x201E; | „ | „ | &#x201E;
대거(dagger) | &dagger; | &#8224; | &#x2020; | † | † | &#x2020;
이중 대거(double dagger) | &Dagger; | &#8225; | &#x2021; | † | ‡ | &#x2021;
퍼밀 부호 (per mille sign) | &permil; | &#8240; | &#x2030; | ‰ | ‰ | &#x2030;
좌측 꺽음 인용부호 | &lsaquo; | &#8249; | &#x2039; | ‹ | ‹ | &#x2039;
우측 꺽음 인용부호 | &rsaquo; | &#8250; | &#x203A; | › | › | &#x203A;
유로화 | &euro; | &#8364; | &#x20AC; | € | € | &#x20AC;


일반 속성

HTML 4.01의 속성들은 대부분의 요소에 공통으로 적용됩니다. 이 속성들은 3 가지로 구분됩니다 : 주요속성, 보편속성, 이벤트속성

주요속성(Core Attributes)

특수속성은 대부분의 요소에 적용됩니다. (단, BASE, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE 요소는 제외)

속성 값 설명
id id_string

요소의 독립된 신원을 나타냅니다. 한 문서 내에서 두 개 이상의 요소가 동일한 id 값을 가질 수 없습니다. id 속성값의 첫 글자는 반드시 영문 알파벳으로 시작합니다. 두 번째 글자부터는 알파벳, 숫자, 하이픈, 밑줄선, 콜론, 마침표가 올 수 있습니다.

ID 속성은 한 문서 내에서 각 요소에 독립된 스타일을 적용할 때 사용됩니다.

예를 들어 다음과 같이 스타일을 정의하면 "para_1"이라는 id를 사용하여 첫 번째 단락에 독립된 스타일이 적용됩니다.

p#para_1 { font:larger }

ID는 <name>값 대신에 책갈피로 사용될 수 있습니다. 그러나 대부분의 브라우저는 id속성을 책갈피로 사용하는 것을 지원하지 않습니다.
class class_name

요소가 특정 클래스에 속한 것을 나타냅니다. 클래스 속성을 사용하면 스타일을 정의하여 동시에 여러 개의 비슷하거나 관련된 요소를 제어할 수 있습니다. 요소들은 동일한 클래스를 공유할 수 있습니다. 한 개의 요소가 두 개 이상의 클래스에 속할 수도 있습니다( 속성값은 여백으로 구분된 클래스 이름들의 리스트로 나타냅니다.) 그러나 현재의 대부분의 브라우저들은 한 개의 요소에 여러 개의 클래스를 적용하는 것을 지원하지 않습니다. 미리 정의되거나 표준이 되는 클래스는 없으며 저자가 클래스를 정의할 수 있습니다.

예를 들어 다음과 같이 스타일을 정의하면 클래스 이름이 "new"인 모든 요소에 적용이 됩니다. 클래스 스타일 정의를 하나만 변경하면 모든 해당 요소들의 모양을 동시에 바꿀 수 있습니다.

.new { font: italic bold }
style style_rule

특정 경우에 사용할 수 있도록 저자가 인라인 스타일을 정의할 수 있습니다. 이런 경우 클래스 스타일 정의보다 우선하여 요소에 적용됩니다.

예를 들어 다음과 같이 스타일을 정의하면 기본 설정 스타일보다 우선하여 단락에 적용됩니다.

<p style="margin:0">

반면에 다음과 같이 스타일을 정의하면 "sidebar" 클래스에 속한 단락의 폰트 크기만 변경하며 "sidebar" 클래스의 나머지 스타일 규칙은 보존됩니다.

<p class="sidebar" style="font:smaller">
title title_string

요소에 타이틀을 부여합니다. 일부 브라우저에서는 마우스를 요소 위에 올려놓을 경우 요소의 타이틀을 "툴팁"으로 보여줍니다.

예:

<a href="/index.html" title="Home Page">

보편속성(Internationalization Attributes)

보편속성은 대부분의 요소에 적용됩니다. (단, BASE, BR, FRAME, FRAMESET, HR, IFRAME, PARAM, SCRIPT 요소는 제외)

속성 값 설명
lang LanguageCode

요소의 속성값 및 항목에 관한 언어를 지정합니다. LANG 속성이 지정되지 않는 모든 요소들도 포함합니다. LANG 속성은 거의 지원되지 않지만 LANG 속성을 사용할 경우에는 검색엔진이 언어별로 문서를 나타낼 수 있도록 할 수 있으며 음성 합성기가 언어에 따른 발음 규칙을 사용할 수 있도록 해줍니다. 또한 브라우저가 Q 요소를 출력할 때 각 언어들에 알맞은 구두점을 사용하도록 할 수 있습니다.

HTML 요소에서 lang 속성을 사용하여 문서의 일차 언어를 지정할 수 있습니다. Lang 속성 대신에 Content-Language HTTP header 속성을 사용할 수도 있습니다.

dir ltr
rtl

텍스트의 방향을 지정합니다. "ltr" 은 왼쪽에서 오른쪽 방향(기본 설정)을 의미합니다. 그리고 "rtl"은 오른쪽에서 왼쪽 방향을 의미합니다.


이벤트 속성

이벤트 속성이란 어떤 이벤트가 발생하였을 때 클라이언트 측의 스크립트가 작동하도록 지정하는 속성을 말합니다. 예를 들어 어떤 이미지를 마우스로 클릭하면 그 이미지는 onclick 이벤트를 받습니다. 이때 이미지의 IMG요소에 onclick이라는 속성이 있으면 브라우저는 그 속성값으로 주어진 스크립트를 작동시킵니다.

예를들어 IMG 요소는 onmouseover 와 onmouseout 속성을 가지고 있는 경우, 이 속성은 자바스크립트 함수(문서의 HEAD 태그 안에 정의됨)를 호출하여 마우스 포인터가 이미지 위에 있으면 그곳에 다른 이미지를 불러오고 마우스 포인터가 이미지 바깥에 있으면 원본 이미지를 다시 불러옵니다. 즉, "롤오버" 효과를 일으킵니다.

<img src="button.gif"
  onmouseover="swapimage()"
  onmouseout="restoreimage()"
/>

이벤트속성을 사용하기 위해서는 문서에 기본적인 스크립트 언어를 지정(Content-Script-Type HTTP 헤더를 설정)해야 합니다. 이를 위해서는 문서의 HEAD 태그 안의 META 요소를 사용합니다. 자바스크립트를 사용할 때 알맞은 태그는 아래와 같습니다:

<meta http-equiv="Content-Script-Type" content="text/javascript" />

일반적인 이벤트

이 이벤트는 대부분의 모든 요소에서 사용할 수 있습니다. ( 단, BASE, BDO, BR, FRAME, FRAMESET, HEAD, HTML, IFRAME, META, PARAM, SCRIPT, STYLE, TITLE 제외)

이벤트 | 동작
onclick | 사용자가 요소 위에 클릭했을 때
ondblclick | 사용자가 요소 위에 더블클릭했을 때
onmousedown | 사용자가 요소 위에 마우스 포인터를 대고 마우스 버튼을 눌렀을 때
onmouseup | 사용자가 눌렀던 마우스 버튼을 놓았을 때
onmouseover | 마우스 포인터가 요소 위에 있을 때
onmousemove | 마우스 포인터가 요소 위에서 움직일 때
onmouseout | 마우스 포인터가 요소 위에 있다가 벗어낫을 때
onkeypress | 요소가 포커스를 받고 있는 동안, 사용자가 키보드 키를 눌렀다가 놓았을 때
onkeydown | 요소가 포커스를 받고 있는 동안, 사용자가 키보드 키를 눌렀을 때
onkeyup | 요소가 포커스를 받고 있는 동안, 사용자가 눌렀던 키보드 버튼을 놓았을 때

폼(Form) 이벤트

이 이벤트는 폼과 폼콘트롤(FORM, BUTTON, INPUT, LABEL, SELECT, TEXTAREA)에만 사용할 수 있습니다. 그러나 모든 폼 이벤트가 모든 폼 요소에 사용되는 것은 아닙니다; 요소에 관한 도움말 파일을 보시면 사용가능한 폼 이벤트를 알 수 있습니다.

이벤트 | 동작
onfocus | 콘트롤이 포커스를 받을 때
onblur | 콘트롤이 포커스를 잃었을 때
onchange | 콘트롤이 포커스를 받은 이후에 포커스를 잃고 값이 변경되었을 때
onselect | 편집가능한 텍스트 창의 텍스트가 선택되었을 때
onsubmit | 폼을 서미트(submit)했을 때
onreset | 폼이 리셋(reset)되었을 때

윈도우 이벤트

이 이벤트는 BODY 와 FRAMESET 요소에만 사용할 수 있습니다.

이벤트 | 동작
onload | 문서나 프레임셋(frameset)이 로딩되었을 때
onunload | 문서나 프레임셋(frameset)이 닫혔을 때


HTML 4.01 에서 권장하지 않는 기능

많은 요소와 속성들이 HTML 4.01에서는 권장되지 않습니다. 이는 다른 방법으로도 동일한 작업을 할 수 있기 때문입니다. 권장되지 않는 기능들은 앞으로도 브라우저에서 계속 지원되겠지만 향후 HTML 버전에서는 불필요한 기능들이 될 것입니다. 권장되지 않는 기능들은 HTML 4.01 Transitional 버전과 HTML 4.01 Frameset 버전에는 포함되어 있지만 HTML 4.01 Strict 버전에는 포함되지 않습니다.

많은 시각적 요소와 속성들이 스타일 시트의 사용으로 인하여 더 이상 권장되지 않습니다. 스타일 시트를 사용하면 더욱 유연하고 호환성에 구애받지 않는 시각적 효과를 나타낼 수 있습니다. 현재 스타일시트로 대체할 수 없는 시각적 속성들은 대부분 권장되는 속성들입니다.

아래 요소들은 스타일 시트의 사용으로 인하여 더 이상 권장되지 않습니다:

  • basefont - 기본 폰트 변경
  • center - 가운데 정렬
  • font - 폰트 변경
  • s - 텍스트에 가운데 선 긋기
  • strike - 텍스트에 가운데 선 긋기
  • u - 텍스트에 밑줄 긋기

아래 요소들도 권장되지 않는 요소입니다.

  • applet - 자바 애플릿 ( object 의 사용으로 인하여 더 이상 권장되지 않음)
  • dir - 디렉토리 리스트 ( ul 의 사용으로 인하여 더 이상 권장되지 않음)
  • isindex - 입력 프롬프트 ( input 의 사용으로 인하여 더 이상 권장되지 않음)
  • menu - 메뉴 리스트 ( ul 의 사용으로 인하여 더 이상 권장되지 않음)


주석

<!--...-->

HTML 소스에 주석을 삽입할 때 사용합니다. 주석은 브라우저에 나타나지 않습니다. 자바스크립트나 CSS를 지원하지 않는 구 버전 브라우저가 주석을 텍스트로 출력하는 것을 방지하기 위하여 스크립트와 스타일 요소 내에도 주석을 삽입할 수 있습니다.

구문: <!-- [주석 내용] -->

닫는 태그: 없음

속성

주석 요소는 속성을 가지고 있지 않습니다. 참조: 일반적 속성

예제

예제 1
<!--
   이것은 주석입니다.
   주석은 다중 행으로
   쓸 수도 있습니다.
-->
태그 내부의 텍스트는 브라우저에 출력되지 않습니다.

예제 2
<style type="text/css">
   <!--
      p { margin-left:20 }
   -->
</style>
여기에서는 CSS를 지원하지 않는 브라우저에서 스타일 선언문을 감추기위해서 주석 태그를 사용하였습니다. 최근의 브라우저들은 스타일 선언문을 올바르게 해석합니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE 3, NN 3


<!DOCTYPE>

!DOCTYPE 선언문은 문서에 맞는 HTML 버전을 지정합니다. !DOCTYPE 은 반드시 모든 HTML 문서의 최상위에 있어야 합니다. 그러나 실제로 대부분의 브라우저는 !DOCTYPE 없이도 문서를 표시합니다.

구문: <!DOCTYPE>

닫는 태그: 없음

속성

!DOCTYPE 요소는 속성을 가지고 있지 않습니다. 참조: 일반적 속성

예제

예제 1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
위 !DOCTYPE 선언문은 HTML 4.01 Strict 버전을 위한 것입니다.

예제 2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
위 !DOCTYPE 선언문은 HTML 4.01 Transitional 버전을 위한 것입니다. 권장되지 않는 요소나 속성을 문서에 포함할 필요가 있을 때는 이 선언문을 사용합니다.

예제 3
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
위 !DOCTYPE 선언문은 HTML 4.01 Frameset 버전을 위한 것입니다. Frameset 문서에서 이 선언문을 사용합니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE n/a, NN n/a

참고

  • !DOCTYPE 은 모든 HTML 문서에서 요구되지만 실제로 HTML의 일부는 아닙니다.


<HTML>

HTML 요소는 !DOCTYPE을 제외한 HTML 문서 내의 모든 내용을 포함하는 요소입니다. HTML 요소에는 하나의 HEAD 요소와 하나의 BODY 요소가 사용됩니다. 프레임셋 문서를 만드는 경우에는 BODY 요소 대신 FRAMESET 요소가 사용됩니다.

구문: <HTML>...</HTML>

닫는 태그: 선택

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
dir | rtl ltr | 글자 방향을 지정합니다.
lang | LanguageCode | 내용에서 사용할 언어를 지정합니다. 예를 들면 영어는 "en", 미국 영어는 "en-US", 한국어는 "euc-kr", 일본어는 "ja"로 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.
version | CDATA | HTML의 버전을 지정합니다. HTML 4.01에서는 version 속성 대신 !DOCTYPE을 사용할 것을 권장합니다.

예제

 <!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
 <HTML>
   <HEAD>
       <TITLE>기본 문서</TITLE>
   </HEAD>
   <BODY>
       <P>본문 내용</P>
   </BODY>
 </HTML>
위 예제는 기본적인 형태의 HTML 문서입니다. HTML 요소는 HEAD와 BODY로 구성된 HTML 문서 내용 전체를 포함합니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all

참고

  • lang 속성을 사용하여 문서의 기본 언어를 지정해 놓는 것이 좋습니다.


<HEAD>

HEAD 요소는 문서의 헤더 정보 즉, 제목, 키워드, 설명, 스타일 시트 등을 표시합니다. HEAD 요소의 시작 태그나 끝 태그는 생략할 수 있으나 가능한 사용하는 것이 좋습니다. HEAD 요소 뒤에는 BODY 요소가 오며, 프레임셋 문서의 경우에는 FRAMESET 요소가 옵니다.

구문: <HEAD>...</HEAD>

닫는 태그: 선택

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에서 사용할 언어를 지정합니다. 예를 들면 영어는 en, 미국 영어는 en-US, 한국어는 euc-kr, 일본어는 ja로 지정합니다.
profile | URI | 문서에 대한 정보를 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.

예제

 <HEAD>
    <TITLE>나모 웹에디터</TITLE>
</HEAD>
HEAD 요소의 내용은 일반적으로는 겉으로 표시되지 않으나 HEAD의 필수 요소 TITLE은 예외적으로 브라우저의 제목 막대에 표시됩니다. 닫는 태그가 생략된 경우 첫 번째 BODY 또는 FRAMESET 요소가 HEAD의 끝을 의미합니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all

참고

  • HEAD 요소를 생략할 경우에도 TITLE 요소는 반드시 사용해야 합니다.


<BODY>

BODY 요소는 웹 브라우저에 표시할 문서의 내용을 포함합니다. BODY 요소는 프레임이 아닌 문서에서 필요하며, 여는 태그와 닫는 태그를 경우에 따라 생략할 수 있습니다. 프레임 문서에서 NOFRAMES가 사용된 경우, BODY 요소는 NOFRAMES 요소 안에 포함되어야 합니다.

구문: <BODY>...</BODY>

닫는 태그: 선택

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 링크 내용에 사용할 언어를 지정합니다.
language | LanguageCode | 스크립트 언어 종류를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 툴팁으로 표시할 내용을 지정합니다.
alink | Color | 하이퍼링크된 텍스트를 눌렀을 때 표시할 색깔을 지정합니다.
background | URI | 배경 이미지를 지정합니다.
bgcolor | Color | 배경색을 지정합니다.
link | Color | 하이퍼링크된 텍스트를 표시할 색깔을 지정합니다.
text | Color | 글자색을 지정합니다.
vlink | Color | 이미 방문한 하이퍼링크 텍스트를 표시할 색깔을 지정합니다.

예제

 <HTML>
   <HEAD>
   </HEAD>
   <BODY>
      <P>내용을 입력하십시오.</P>
   </BODY>
</HTML>
HTML 문서의 구조를 보여주는 간단한 예제입니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all

참고

  • BODY 요소와 사용할 수 있는 이벤트로는 onload와 onunload가 있습니다.
  • BODY 요소의 속성 중 문서 형태를 지정하는 모든 속성은 HTML 4.01에서 권장하지 않으며(deprecated), 이를 대신하여 스타일시트를 사용하는 것이 좋습니다.


<FRAMESET>

FRAMESET 요소는 프레임 문서를 만들 때 사용합니다. 프레임셋 문서에서 HEAD 다음 제일 처음에 삽입됩니다. FRAMESET 요소를 사용하면 브라우저 창이 하나 이상의 세그먼트로 나뉘어 각각에 서로 다른 문서를 표시할 수 있습니다. FRAMESET 요소에는 하나 이상의 FRAMESET 요소 또는 FRAME 요소가 포함될 수 있습니다.

구문: <FRAMESET>...</FRAMESET>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.
rows | MultiLengths | 프레임 분할을 정의합니다. 각 프레임의 높이를 위쪽에서부터 아래쪽 순서로 지정하며 단위로 픽셀, 퍼센트(%), 상대 길이를 사용합니다. 상대 길이는 ｉ* (i는 정수)로 표시합니다. 예를 들어 ROWS="3*,*"이라고 정의한 프레임셋(*은ｉ*과 동일)은 첫 번째 프레임의 높이가 두 번째 프레임 높이의 3배가 됩니다.
cols | MultiLengths | 각 프레임의 너비를 왼쪽에서부터 오른쪽 순서로 지정합니다.

예제

 <HEAD>
  <TITLE>프레임 예제</TITLE>
 </HEAD>
 <FRAMESET rows="1*" cols="50%, 50%">
  <FRAME name="LeftFrame" src="left.html">
  <FRAME name="RightFrame" src="right.html">
  <NOFRAMES>
     <BODY>
     <P>이 페이지를 보려면, 프레임을 볼 수 있는 브라우저가 필요합니다.</P>
     </BODY>
  </NOFRAMES>
 </FRAMESET>
FRAMESET 요소는 한 개 이상의 FRAME 요소로 구성되며 NOFRAMES 요소를 사용하여 프레임을 지원하지 않는 브라우저에서 프레임 대신 표시할 내용을 지정합니다. FRAMESET 요소 안에 FRAMESET 요소를 중첩하여 사용할 수 있습니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE 3, NN 2, HTML 4

참고

  • FRAMESET 요소와 함께 사용할 수 있는 이벤트로는 onload와 onunload가 있습니다.
  • 픽셀 길이를 사용할 때는 다양한 창 크기를 처리할 수 있도록 상대 길이와 함께 사용하는 것이 좋습니다. 픽셀 길이는 단지 크기가 고정된 그림이나 그 외 개체가 들어있는 프레임의 크기를 정할 때에만 사용되어야 합니다.
  • FRAMESET 요소는 또한 onload 나 onunload 속성을 이용하여 프레임이 읽히거나 제거될 때 클라이언트의 스크립트가 작동하도록 설정할 수 있습니다.


<BASE>

BASE 요소는 문서에 사용된 상대경로를 결정하기 위한 기본 URI를 정의합니다. 한 문서는 2개 이상의 BASE 요소를 포함할 수 없습니다. BASE 요소는 부분적 URI를 포함하는 어떤 요소보다 우선하며 HEAD 요소 안에 위치해야 합니다.

구문: <BASE>

닫는 태그: 없음

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
href | URI | 하이퍼링크의 기본 URI를 지정합니다.
target | FrameTarget | 링크를 표시할 기본 프레임을 지정합니다. 링크마다 target 속성이 지정되어 있는 경우, BASE 요소의 target 속성이 가장 우선합니다.

예제

 <HEAD>
   <BASE href="http://www.namo.com/images/" />
 </HEAD>
 <BODY>
   <IMG src="example.png" />
 </BODY>
BASE 경로가 정의되어 있기 때문에 이미지 파일의 위치는 문서의 위치와는 상관없이 "http://www.namo.com/images/example.png"가 됩니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all

참고

  • target 속성으로 지정한 프레임이 존재하지 않을 경우, 링크는 새 창에서 열립니다.


<ISINDEX>

ISINDEX 요소는 한 줄 글상자를 만들 때 사용합니다. 사용자가 입력 상자 안에서 ENTER 키를 누르면, 문서의 기본 URL에 입력 상자에 입력된 텍스트가 추가되어 서버에 전송됩니다. 전송될 때의 형식은 "?text+of+input+field"와 같은 쿼리문으로 구성되며 공백 문자는 "+"로 인코드됩니다.

구문: <ISINDEX>

닫는 태그: 없음

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 링크 내용에 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.
prompt | Text | 화면에 표시할 설명을 지정합니다. 필드의 라벨로 사용됩니다.

예제

예제 1
 <ISINDEX>
ISINDEX 요소를 사용한 간단한 예제입니다. 웹 브라우저에서 확인하면 아래와 같이 자동으로 설명과 한 줄 입력 상자가 생깁니다.

예제 2
 <ISINDEX prompt="이름 : ">
prompt 속성을 이용하면 한 줄 입력 상자의 라벨을 지정할 수 있습니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all

참고

  • ISINDEX 요소는 HTML 4.01에서 권장하지 않는(deprecated) 요소로서 이를 대신하여 INPUT 요소를 사용할 것을 권장합니다.


<LINK>

LINK 요소는 현재 문서와 관련이 있는 다른 문서를 지정할 때 사용합니다. 문서의 HEAD 요소 안에 여러 개의 LINK 요소가 포함될 수 있습니다.

구문: <LINK>

닫는 태그: 없음

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
charset | Charset | 문자셋을 지정합니다. 예를 들어 연결할 문서가 영문일 경우 'en', 한글일 경우 'euc-kr'이라고 지정합니다.
href | URI | 하이퍼링크로 연결할 문서의 URI를 지정합니다.
hreflang | LanguageCode | 연결할 문서의 언어 코드를 지정합니다.
media | MediaDesc | 매체 타입을 지정합니다. HTML 4.01에서 정의하는 미디어 기술어에는 all, aural, braille, handheld, print, projection, screen, tty, tv가 있습니다.
rel | LinkTypes | 현재 문서를 기준으로 링크된 문서와의 관계를 기술합니다.
rev | LinkTypes | 링크된 문서를 기준으로 현재 문서와의 관계를 기술합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
target | FrameTarget | 링크를 표시할 프레임을 지정합니다.
type | ContentTypes | 연결할 문서의 MIME 타입을 지정합니다.

예제

예제 1
<LINK rel="Prev" href="base.html" title="BASE - Document Base URI">
<LINK rel="Next" href="meta.html" title="META - Metadata">
<LINK rel="Start" href="../" title="HTML 4.01 Reference">
<LINK rel="Copyright" href="/copyright.html" title="Copyright Notice">
<LINK rev="Made" href="mailto:nd@namo.com" title="HTML 4.01 Reference Feedback">
LINK 요소를 사용하여 현재 문서와 관련 있는 문서를 지정한 예제입니다. 연속된 문서에서의 이전/다음 문서, 다수의 문서 묶음에서의 시작 페이지, 저작권 정보를 포함한 문서, 저자에 대한 정보를 담은 문서 등을 지정할 수 있습니다.

예제 2
<LINK rel="alternate" href="index_fr.html" hreflang="fr" title="French Version" />
<LINK rel="alternate" href="index_ja.html" hreflang="ja" charset="shift-jis" title="Japanese Version" />
LINK 요소를 사용하여 언어에 따른 문서의 대체 버전을 지정합니다.

예제 3
<LINK rev="subsection" href="example.html" />
현재 문서가 example.html의 하위 문서임을 나타내는 예제입니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE 3, NN 4, HTML all

참고

  • 외부 스타일 시트를 연결하는 데에도 LINK 요소를 사용할 수 있습니다.
  • media 속성을 사용하면 웹 브라우저에서 스타일 시트 파일이 적용되지 않습니다.


<META>

META 요소는 문서의 핵심어, 설명, 저자 등 메타 정보를 제공할 때 사용합니다. 여러 개의 META 요소가 HEAD 요소 내에 포함될 수 있습니다.

구문: <META>

닫는 태그: 없음

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
content | CDATA | name 속성에 짝을 이루며 대응하는 정보를 지정합니다. 정보를 보낼 때 변수의 값에 해당됩니다.
http-equiv | Name | HTTP 헤더임을 나타내기 위해 name 속성을 대신하여 사용됩니다. 웹 서버에 정보를 보낼 때 변수의 이름으로 사용됩니다.
name | Name | 변수의 이름을 지정합니다. name 속성값과 content 속성값이 한 쌍의 숨은 정보로 사용됩니다.
scheme | CDATA | 분류 기준을 추가할 때 사용합니다.

예제

예제 1
<META name="author" content="메타 데이터">
<META name="description" content="HTML 4.01의 META 요소에 대한 설명입니다.">
<META name="keywords" content="메타, 메타데이터, 메타 데이터, meta, meta data">
위 예제는 문서의 저자, 설명, 핵심어를 정의한 것입니다. 일부 검색 엔진은 keywords로 지정된 내용을 이용하여 문서를 인덱스하고 description으로 기술된 내용을 문서의 링크와 함께 검색 결과로 내보냅니다.

예제 2
<META http-equiv="Expires" content="Sun, 22 Mar 1998 16:18:35 GMT">
<META http-equiv="Content-Style-Type" content="text/css">
<META http-equiv="Content-Script-Type" content="text/javascript">
META 요소를 이용하여 문서의 기한을 설정한 예제입니다. 스크립트를 삽입하기 위해 스크립트 언어를 자바 스크립트로 지정하고, 인라인 스타일을 삽입하기 위해 스타일 언어를 CSS로 지정하였습니다.

예제 3
<META http-equiv="Refresh" content="10; http://www.namo.com/">
웹 브라우저가 현재 문서를 읽어들인 다음, 10초 뒤에 "http://www.namo.com"을 읽게 합니다.

예제 4
<META name="generator" content="나모 웹에디터 6.0" />
HTML 저작 도구를 사용하면 위 예제와 같이 META 태그가 추가되기도 합니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML 3.2

참고

  • 메타 정보는 표준이 되는 목록이 없습니다. 따라서 저자가 원하는 어떤 정보도 META 요소를 이용하여 정의할 수 있습니다.


<SCRIPT>

SCRIPT 요소는 클라이언트 사이드 스크립트를 문서에 삽입할 때 사용합니다.

구문: <SCRIPT>...</SCRIPT>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
type | ContentType | MIME 타입을 지정합니다.
charset | Charset | 문자셋을 지정합니다. 예를 들어 연결할 문서가 영문일 경우 "en", 한글일 경우 "euc-kr"이라고 지정합니다.
class | ClassName | CSS의 class 선택자를 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
language | LanguageCode | 스크립트 언어 종류를 지정합니다.
src | URI | 스크립트 파일의 URI를 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.

예제

<SCRIPT type="text/javascript" src="foo.js" charset="ISO-8859-1">
<!--
   // embedded script ignored
// -->
</SCRIPT>
HTML 3.2 이하 버전의 브라우저들은 SCRIPT 요소를 인식하지 못하고 SCRIPT의 내용을 일반 HTML로 해석합니다. 이런 브라우저들이 SCRIPT의 내용을 무시하도록 하기 위해 스크립트 주변에 코멘트를 사용합니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE 3, NN 2, HTML 4

참고

  • 스크립트를 지원하지 않는 웹 브라우저에 대체 컨텐츠를 제공하려면 SCRIPT 요소 뒤에 NOSCRIPT 요소를 사용합니다.


<STYLE>

STYLE 요소는 문서에 스타일 시트를 삽입할 때 사용합니다.

구문: <STYLE>...</STYLE>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
type | ContentType | 스타일 시트의 MIME 타입을 지정합니다. CSS를 사용하려면 text/css로 지정되어야 합니다.
lang | LanguageCode | 스타일 시트에 이름을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.
media | MediaDesc | 스타일 시트가 적용되는 매체 타입을 지정합니다.

예제

 <STYLE type="text/css" media="screen">
 <!--
  BODY  { background: url(foo.gif) red; color: black }
  P EM  { background: yellow; color: black }
  .note { margin-left: 5em; margin-right: 5em }
 -->
 </STYLE>
스타일 시트가 삽입된 문서의 예제입니다. HTML 3.2 이전 버전의 브라우저는 STYLE 요소를 인식하지 못하고 BODY의 일부분으로 해석하여 스타일 시트 내용을 사용자에게 직접 보여줍니다. 이를 방지하기 위하여 CSS와 같은 스타일 언어는 위의 예제에서와 같이 스타일 시트가 코멘트(<!-- Comment -->)안에 포함되게 합니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE 3, NN 4, HTML 4

참고

  • 같은 스타일 시트가 여러 문서에 사용될 경우에는 외부 스타일 시트를 사용하는 것이 적합합니다.
  • 외부 스타일을 정의하려면 LINK 요소를 사용합니다.


<TITLE>

TITLE 요소는 HTML 문서의 제목을 표시할 때 사용합니다. 각 HTML 문서에는 하나의 TITLE 요소가 포함되어야 합니다.

구문: <TITLE>...</TITLE>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에서 사용할 언어를 지정합니다.

예제

<HEAD><TITLE>문서 제목</TITLE></HEAD>
TITLE 요소는 HEAD 요소 안에 삽입되며, TITLE 요소의 내용은 웹 브라우저에서 제목 막대에 표시됩니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all

참고

  • TITLE 요소의 내용은 북마크로 사용되거나 검색 엔진에 등록될 때 사용될 수 있습니다. 따라서 간략하면서 문서의 내용을 잘 나타내는 문구를 TITLE로 사용하는 것이 좋습니다.


<ADDRESS>

ADDRESS 요소는 문서와 관련된 연락 정보(문서 관리자의 이름, 관리자 홈페이지 링크, 이메일, 주소, 전화번호 등)을 제공합니다.

구문: <ADDRESS>...</ADDRESS>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 링크 내용에 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 브라우저에서 툴팁으로 표시할 내용을 지정합니다.

예제

 <ADDRESS>Maintained by <A href="mailto:nd@namo.com">Namodori</A></ADDRESS>
대개 문서의 마지막에 위와 같이 문서 관리자에 대한 연락 정보를 제공합니다. 웹 브라우저에서는 이탤릭체로 표시됩니다.
Maintained by Namodori

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all

참고

  • 단순히 텍스트를 이탤릭체로 표시하기 위한 목적일 때는 ADDRESS 요소 대신 I 요소를 사용하는 것이 좋습니다.


<BLOCKQUOTE>

BLOCKQUOTE 요소는 인용한 단락을 표시할 때 사용합니다. BLOCKQUOTE는 Q 요소와는 달리 P나 TABLE과 같은 블록 요소를 포함할 수 있습니다. 하지만 BLOCKQUOTE 요소는 문단이나 인라인 요소 안에 포함될 수 없습니다.

구문: <BLOCKQUOTE>...</BLOCKQUOTE>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
cite | URI | 인용문의 출처를 표시합니다. 브라우저에서 지원되지는 않지만, 이 속성으로 인용문의 신뢰도를 확인하거나 연관된 정보를 찾을 수 있습니다.
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 링크 내용에 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.

예제

 <BLOCKQUOTE cite="http://ipcp.edunet4u.net/~koreannote/4/4-소나기~전문.htm">
   <P>
     꽤 오랜 시간이 지났다고 생각됐다.<BR>
     그런데도 소녀는 나타나지 않는다. <BR>
     발돋움을 했다. <BR>
     그러고도 상당한 시간이 지났다고 생각됐다.<BR>
     저 쪽 갈밭머리에 갈꽃이 한 옴큼 움직였다.<BR>
     소녀가 갈꽃을 안고 있었다.<BR>
     그리고, 이제는 천천한 걸음이었다.<BR>
     유난히 맑은 가을 햇살이 소녀의 갈꽃머리에서 반짝거렸다.<BR>
     소녀 아닌 갈꽃이 들길을 걸어가는 것만 같았다.
   </P>
</BLOCKQUOTE>
BLOCKQUOTE 요소를 사용하면 왼쪽, 오른쪽에 여백이 생깁니다. 위 예제는 여러 문단이 인용문 안에 포함되어 있는 것을 보여줍니다.

꽤 오랜 시간이 지났다고 생각됐다.
그런데도 소녀는 나타나지 않는다.
발돋움을 했다.
그러고도 상당한 시간이 지났다고 생각됐다.
저 쪽 갈밭머리에 갈꽃이 한 옴큼 움직였다.
소녀가 갈꽃을 안고 있었다.
그리고, 이제는 천천한 걸음이었다.
유난히 맑은 가을 햇살이 소녀의 갈꽃머리에서 반짝거렸다.
소녀 아닌 갈꽃이 들길을 걸어가는 것만 같았다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all

참고

  • 인용한 어구를 표시하려면 Q 요소를 사용합니다.
  • 단순히 단락을 들여쓰기 하려는 목적으로 BLOCKQUOTE 요소를 사용하는 것은 좋지 않습니다.


<CENTER>

CENTER 요소는 단락의 컨텐츠를 수직으로 가운데 정렬할 때 사용합니다.

구문: <CENTER>...</CENTER>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.

예제

 <CENTER>
  <TABLE>
    <TR align="center">
      <TH scope="col">이름</TH>
      <TH scope="col">나이</TH>
      <TH scope="col">국가</TH>
    </TR>
    <TR align="center">
      <TD>홍길동</TD>
      <TD>20</TD>
      <TD>한국</TD>
    </TR>
  </TABLE>
</CENTER>
CENTER 요소는 단지 표 전체를 가운데 정렬할 뿐 각각의 셀 안의 내용을 가운데 정렬하지는 않습니다. 위 예제에서는 셀 안의 내용을 가운데 정렬하기 위해 TR 요소에 align 속성을 사용했습니다.
이름 | 나이 | 국가
홍길동 | 20 | 한국

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML 3.2

참고

  • 브라우저에서 <TABLE align="center"> 또는 스타일 시트를 이용하여 표를 가운데 정렬하는 방법(margin-left와 margin-right를 "auto"로 지정)을 지원하지 않을 때 CENTER 요소가 표를 가운데 정렬하는 데 유용하게 사용됩니다.
  • CENTER 요소는 스타일 시트로 대체되어 HTML 4.01에서 권장하지 않는(deprecated) 요소입니다.


<DEL>

DEL 요소는 문서의 버전이 바뀔 때 삭제된 내용을 표시하기 위해 사용합니다. 단순히 가운데 줄이 그어진 텍스트를 표시하려고 할 때는 STRIKE 요소를 사용하며, 삭제의 의미를 표시할 때 DEL 요소를 사용합니다.

구문: <DEL>...</DEL>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
cite | URI | 내용이 삭제된 원인에 대한 정보를 가진 URI를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
datetime | Datetime | 삭제된 날짜와 시간을 표시합니다. 속성값은 대소문자를 구분하며, YYYY-MM-DDThh:mm:ssTZD 형태로 기술합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에서 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.

예제

 <DEL>용준</DEL> 승헌이는 나와 가장 친한 친구입니다.
DEL 요소를 적용한 부분은 웹 브라우저에서 가운데 줄이 그어져 표시됩니다.
용준 승헌이는 나와 가장 친한 친구입니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE 4, NN 6.2, HTML 4

참고

  • DEL 요소는 HTML 4.01에서 권장하지 않는(deprecated) 요소로서 이를 대신하여 스타일 시트의 text-decoration 속성을 사용하도록 권장하고 있습니다.


<DIV>

DIV 요소는 의미와 상관없이 자유롭게 사용 가능한 블록 요소(Block Element)로, 스타일 시트를 적용하거나 정렬 방식을 지정할 때 주로 사용합니다. DIV 요소는 class, id, lang 속성과 같이 사용하면 효율적입니다. 예를 들어 class=navbar라고 지정하면 스타일 시트를 사용하여 사이트 전체의 모든 내비게이션 바의 모양을 쉽게 바꿀 수 있습니다.

구문: <DIV>...</DIV>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에서 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.
align | left center right justify | 정렬 방법을 지정합니다. 기본값은 left입니다.

예제

 <DIV align="center">
 <B>스타일 활용</B>
 <P>특정 영역에 스타일을 적용하면 보다 쉽게 유지 관리할 수 있습니다.</P>
 </DIV>
DIV 요소를 이용하여 특정 영역을 가운데 정렬한 예제입니다.
스타일 활용

특정 영역에 스타일을 적용하면 보다 쉽게 유지 관리할 수 있습니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML 3.2

참고

  • DIV 요소와 동일한 역할을 하는 인라인 요소(Inline Element)로는 SPAN 요소가 있습니다.


<H1>

H1 요소는 제목을 지정할 때 사용합니다.

구문: <H1>...</H1>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에서 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.
align | left center right justify | 정렬 방법을 지정합니다. 기본값은 left입니다.

예제

 <H1>제목 1</H1>
 <H2>제목 2</H2>
 <H3>제목 3</H3>
 <H4>제목 4</H4>
 <H5>제목 5</H5>
 <H6>제목 6</H6>
제목을 지정하는 블록 요소(Block Element)에는 H1, H2, H3, H4, H5, H6 요소가 있습니다. H1 요소가 제일 크고 H6 요소가 제일 작으며 웹 브라우저에서 볼드체로 표시됩니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all

참고

  • HTML 문서를 작성할 때 웹 브라우저에 표시되는 글자 크기만으로 제목 태그를 사용하는 것은 좋지 않습니다. 제목 태그의 레벨은 문서에서 해당 제목의 중요도와 위치에 따라 선택되어져야 합니다. 보통 H1 요소는 문서의 가장 중요한 제목에 사용됩니다.


<H2>

H2 요소는 제목을 지정할 때 사용합니다.

구문: <H2>...</H2>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에서 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.
align | left center right justify | 정렬 방법을 지정합니다. 기본값은 left입니다.

예제

 <H1>제목 1</H1>
 <H2>제목 2</H2>
 <H3>제목 3</H3>
 <H4>제목 4</H4>
 <H5>제목 5</H5>
 <H6>제목 6</H6>
제목을 지정하는 블록 요소(Block Element)에는 H1, H2, H3, H4, H5, H6 요소가 있습니다. H1 요소가 제일 크고 H6 요소가 제일 작으며 웹 브라우저에서 볼드체로 표시됩니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all

참고

  • HTML 문서를 작성할 때 웹 브라우저에 표시되는 글자 크기만으로 제목 태그를 사용하는 것은 좋지 않습니다. 제목 태그의 레벨은 문서에서 해당 제목의 중요도와 위치에 따라 선택되어져야 합니다.


<H3>

H3 요소는 제목을 지정할 때 사용합니다.

구문: <H3>...</H3>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에서 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.
align | left center right justify | 정렬 방법을 지정합니다. 기본값은 left입니다.

예제

 <H1>제목 1</H1>
 <H2>제목 2</H2>
 <H3>제목 3</H3>
 <H4>제목 4</H4>
 <H5>제목 5</H5>
 <H6>제목 6</H6>
제목을 지정하는 블록 요소(Block Element)에는 H1, H2, H3, H4, H5, H6 요소가 있습니다. H1 요소가 제일 크고 H6 요소가 제일 작으며 웹 브라우저에서 볼드체로 표시됩니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all

참고

  • HTML 문서를 작성할 때 웹 브라우저에 표시되는 글자 크기만으로 제목 태그를 사용하는 것은 좋지 않습니다. 제목 태그의 레벨은 문서에서 해당 제목의 중요도와 위치에 따라 선택되어져야 합니다.


<H4>

H4 요소는 제목을 지정할 때 사용합니다.

구문: <H4>...</H4>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에서 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.
align | left center right justify | 정렬 방법을 지정합니다. 기본값은 left입니다.

예제

 <H1>제목 1</H1>
 <H2>제목 2</H2>
 <H3>제목 3</H3>
 <H4>제목 4</H4>
 <H5>제목 5</H5>
 <H6>제목 6</H6>
제목을 지정하는 블록 요소(Block Element)에는 H1, H2, H3, H4, H5, H6 요소가 있습니다. H1 요소가 제일 크고 H6 요소가 제일 작으며 웹 브라우저에서 볼드체로 표시됩니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all

참고

  • HTML 문서를 작성할 때 웹 브라우저에 표시되는 글자 크기만으로 제목 태그를 사용하는 것은 좋지 않습니다. 제목 태그의 레벨은 문서에서 해당 제목의 중요도와 위치에 따라 선택되어져야 합니다.


<H5>

H5 요소는 제목을 지정할 때 사용합니다.

구문: <H5>...</H5>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에서 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.
align | left center right justify | 정렬 방법을 지정합니다. 기본값은 left입니다.

예제

 <H1>제목 1</H1>
 <H2>제목 2</H2>
 <H3>제목 3</H3>
 <H4>제목 4</H4>
 <H5>제목 5</H5>
 <H6>제목 6</H6>
제목을 지정하는 블록 요소(Block Element)에는 H1, H2, H3, H4, H5, H6 요소가 있습니다. H1 요소가 제일 크고 H6 요소가 제일 작으며 웹 브라우저에서 볼드체로 표시됩니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all

참고

  • HTML 문서를 작성할 때 웹 브라우저에 표시되는 글자 크기만으로 제목 태그를 사용하는 것은 좋지 않습니다. 제목 태그의 레벨은 문서에서 해당 제목의 중요도와 위치에 따라 선택되어져야 합니다.


<H6>

H6 요소는 제목을 지정할 때 사용합니다.

구문: <H6>...</H6>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에서 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.
align | left center right justify | 정렬 방법을 지정합니다. 기본값은 left입니다.

예제

 <H1>제목 1</H1>
 <H2>제목 2</H2>
 <H3>제목 3</H3>
 <H4>제목 4</H4>
 <H5>제목 5</H5>
 <H6>제목 6</H6>
제목을 지정하는 블록 요소(Block Element)에는 H1, H2, H3, H4, H5, H6 요소가 있습니다. H1 요소가 제일 크고 H6 요소가 제일 작으며 웹 브라우저에서 볼드체로 표시됩니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all

참고

  • HTML 문서를 작성할 때 웹 브라우저에 표시되는 글자 크기만으로 제목 태그를 사용하는 것은 좋지 않습니다. 제목 태그의 레벨은 문서에서 해당 제목의 중요도와 위치에 따라 선택되어져야 합니다.


<HR>

HR 요소는 웹 브라우저에서 수평선을 표시할 때 사용합니다.

구문: <HR>

닫는 태그: 없음

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
color | Color | 수평선 색깔을 지정합니다. 색깔 이름이나 #rrggbb 형식의 코드를 입력합니다. HTML 4.01에서는 스타일 시트의 color 속성을 사용할 것을 권장합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.
align | left center right | 정렬 방법을 지정합니다.
size | Pixels | 수평선의 세로 높이를 지정합니다.
noshade | noshade | 수평선을 입체적으로 보이지 않게 표시합니다.
width | Length | 수평선의 너비를 지정합니다. 픽셀 또는 퍼센트로 지정할 수 있습니다. 기본값은 100%입니다.

예제

 <HR width="50%" align="left" size="1">
<HR width="50%" align="center" size="2">
<HR width="50%" align="right" size="3">
<HR width="50%" align="right" size="3" noshade>
HR 요소를 이용하여 수평선을 삽입한 예제입니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all

참고

  • 스타일 시트를 이용하면 다양한 형태로 수평선을 표시할 수 있습니다.


<INS>

INS 요소는 문서가 어떻게 변경되었는지 알 수 있도록 문서에 새로 삽입된 내용을 표시할 때 사용됩니다. 스타일 시트를 사용하여 표시되는 방법을 변경할 수 있습니다.

구문: <INS>...</INS>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
cite | URI | 내용이 삭제된 원인에 대한 정보를 가진 URI를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
datetime | Datetime | 삭제된 날짜와 시간을 표시합니다. 속성값은 대소문자를 구분하며, YYY-MM-DDThh:mm:ssTZD 형태로 기술합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에서 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.

예제

 <DEL>용준</DEL> <INS>승헌</INS>이는 나의 가장 친한 친구입니다.
DEL 요소를 적용한 부분은 웹 브라우저에서 밑줄이 그어져 표시됩니다.
용준 승헌이는 나의 가장 친한 친구입니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE 4, NN 6.2, HTML 4

참고

  • 단순히 텍스트에 밑줄을 표시하려고 할 때에는 글자 스타일 요소인 U 요소를 사용할 수 있습니다. 그러나 U 요소는 HTML 4.01에서 권장하지 않는(deprecated) 요소입니다.


<NOSCRIPT>

NOSCRIPT 요소는 클라이언트 사이드 스크립트가 실행되지 않을 때 보여줄 대체 내용을 지정합니다. NOSCRIPT 요소는 대체 내용을 나타내기 위해 SCRIPT 요소 뒤에 나와야 합니다. 이때 SCRIPT 요소 안의 코드가 그대로 화면에 표시되지 않도록 하기 위해 주석문을 사용하여 코드를 가려주는 것이 좋습니다.

구문: <NOSCRIPT>...</NOSCRIPT>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.

예제

 <SCRIPT language="JavaScript">
 <!--
     document.write("<P>반갑습니다.</P>");
 -->
 <SCRIPT>
 <NOSCRIPT>
 <P>자바 스크립트를 지원하지 않습니다.</P>
 </NOSCRIPT>
웹 브라우저가 스크립트 언어를 지원하지 않거나 사용자가 웹 브라우저의 스크립트 실행 기능을 비활성화시켰을 경우, 스크립트가 실행되지 않습니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE 3, NN 3, HTML 4

참고

  • 웹 브라우저가 스크립트 언어를 지원하지 않는 경우에도 사용자가 클라이언트 사이드 스크립트를 실행하도록 설정해 놓았을 때는 대부분의 웹 브라우저가 NOSCRIPT 요소의 내용을 표시하지 않습니다.


<P>

P 요소는 단락을 구분할 때 사용합니다.

구문: <P>...</P>

닫는 태그: 선택

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에서 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.
align | left center right justify | 정렬 방법을 지정합니다. 기본값은 left입니다.

예제

<P>서울은 한국에서<br>제일 큰 도시입니다.</P>
<P align="center">서울은 한국에서<br>제일 큰 도시입니다.</P>
<P align="right">서울은 한국에서<br>제일 큰 도시입니다.</P>
문단을 왼쪽, 가운데, 오른쪽에 배치하도록 지정한 예제합니다. P 요소의 닫는 태그는 생략할 수 있으나 스타일 시트와 관련된 웹 브라우저 상의 문제를 방지하기 위해 닫는 태그를 사용하는 것이 좋습니다.

서울은 한국에서
제일 큰 도시입니다.

서울은 한국에서
제일 큰 도시입니다.

서울은 한국에서
제일 큰 도시입니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all

참고

  • 스타일 시트를 이용하면 단락 배치를 더 자유롭게 할 수 있습니다.


<PRE>

PRE 요소는 형식을 그대로 유지하여 표시할 때 사용합니다. PRE 요소는 텍스트가 쓰여진 그대로 보존되어 가독성을 높일 수 있기 때문에 프로그램 코드나 시 등을 표시할 때 유용합니다.

구문: <PRE>...</PRE>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
cite | URI | 인용문의 출처를 표시합니다. 브라우저에서 지원되지는 않지만, 이 속성으로 인용문의 신뢰도를 확인하거나 연관된 정보를 찾을 수 있습니다.
class | ClassName | CSS의 class 선택자를 지정합니다.
cols | Number | 한줄에 표시할 글자 수를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에서 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.
wrap | wrap | 자동으로 줄바꿈을 하는 Word-wrap 기능을 사용할 것이지 지정합니다.
width | Number | 너비를 지정합니다.

예제

 <PRE>
 <CODE class="Java">
 class HelloWorld {
   public static void main(String[] args) {
     System.out.println("Hello World!");
  }
 }
 </CODE>
 </PRE>
PRE 요소가 적용된 부분은 웹 브라우저에서 글꼴의 폭과 여백의 위치가 고정되고, 자동 줄바꿈이 되지 않습니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all

참고

  • 문단 인용문을 표시할 때에는 BLOCKQUOTE 요소를 사용합니다.


<DD>

DD 요소는 정의 리스트(Definition List)에서 각 항목을 기술할 때 사용합니다.

구문: <DD>..</DD>

닫는 태그: 선택

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에서 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.

예제

 <DL>

  <DT><A NAME="spanning-tree">메타 데이터</A></DT>
  <DD>
    <P>
      웹 검색 엔진이나 사이트 관리에 유용한 정보로 <BR>
      메타 데이터를 지정하면 문서 헤더에 메타 태그가 삽입됩니다.
    </P>

    <DL>
      <DT>핵심어</DT>
      <DD>
        검색 엔진이 문서를 내용에 따라 분류하는 데 사용됩니다.
      </DD>
      <DT>설명(description)</DT>
      <DD>
        설명 메타 태그는 문서의 내용을 간단하게 설명하는 데 사용합니다.
      </DD>
    </DL>
  </DD>

 </DL>
위 예제는 중첩적 정의 리스트를 만든 예제입니다. DL 요소로 정의 리스트를 선언하고, DT 요소로 정의하려는 용어를, DD 요소로 해당 용어에 대한 설명을 기술합니다. 한 용어는 관련된 여러 개의 정의를 가질 수 있으며, 하나의 정의 또한 여러 개의 용어를 가질 수 있습니다.
메타 데이터

웹 검색 엔진이나 사이트 관리에 유용한 정보로
메타 데이터를 지정하면 문서 헤더에 메타 태그가 삽입됩니다.

핵심어
검색 엔진이 문서를 내용에 따라 분류하는 데 사용됩니다.
설명(description)
설명 메타 태그는 문서의 내용을 간단하게 설명하는 데 사용합니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all

참고

  • DD 요소의 닫는 태그는 선택적이지만, 스타일 시트와 같이 사용할 때 발생하는 웹 브라우저 상의 문제를 방지하기 위해 닫는 태그를 사용하는 것이 좋습니다.


<DIR>

DIR 요소는 디렉토리 리스트(Directory List)를 정의할 때 사용합니다.

구문: <DIR>...</DIR>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
compact | compact | 항목을 간단하게 표시합니다. 웹 브라우저에서는 차이가 없습니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에서 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.

예제

 <P>생일 파티에 초대할 친구들</P>
  <DIR>
    <LI>조미경</LI>
    <LI>이영주</LI>
    <LI>송미진</LI>
    <LI>전지혜</LI>
  </DIR>
DIR 요소는 디렉토리 리스트(Directory List)를 선언할 때 사용하며, 리스트의 실제 항목은 LI 요소로 기술합니다. type 속성을 사용할 수 없는 점을 제외하고는 UL 요소와 동일합니다.

생일 파티에 초대할 친구들

  • 조미경
  • 이영주
  • 송미진
  • 전지혜
    •

    지원 브라우저/HTML 버전

    이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

    IE all, NN all, HTML all

    참고

    • HTML 4.01에서는 DIR 요소 대신 UL 요소를 사용할 것을 권장합니다.


<DL>

DL 요소는 정의 리스트(Definition List)를 만들 때 사용합니다. 정의 리스트를 선언할 때 DL 요소를 사용하며 각각의 항목은 DT 요소와 DD 요소에서 기술합니다.

구문: <DL>...</DL>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에서 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.
compact | compact | 항목을 간단하게 표시합니다. 웹 브라우저에서는 차이가 없습니다.

예제

 <DL>
  <DT><A name="inline-element">인라인 요소</A></DT>
  <DD>
    <P>요소 앞과 뒤에 줄 바꿈을 하지 않는 요소로
    인라인 요소는 문단과 같은 블록 요소 내에서만 존재할 수 있습니다.
    가장 일반적인 인라인 요소로는 그림과 폼필드가 있습니다.</P>
  </DD>
</DL>
DL 요소로 정의 리스트를 선언하고, DT 요소로 정의하려는 용어를, DD 요소로 해당 용어에 대한 설명을 기술합니다. 한 용어는 관련된 여러 개의 정의를 가질 수 있으며, 하나의 정의 또한 여러 개의 용어를 가질 수 있습니다.
인라인 요소

요소 앞과 뒤에 줄 바꿈을 하지 않는 요소로 인라인 요소는 문단과 같은 블록 요소 내에서만 존재할 수 있습니다. 가장 일반적인 인라인 요소로는 그림과 폼필드가 있습니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all


<DT>

DT 요소는 정의 리스트(Definition List)에서 용어를 정의할 때 사용합니다. DT 요소에서 정의한 용어에 대한 설명은 DD 요소에서 기술합니다.

구문: <DT>...</DT>

닫는 태그: 선택

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
compact | compact | 항목을 간단하게 표시합니다. 웹 브라우저에서는 차이가 없습니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에서 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.

예제

 <DL>
  <DT><A name="inline-element">인라인 요소</A></DT>
  <DD>
    <P>요소 앞과 뒤에 줄 바꿈을 하지 않는 요소로
    인라인 요소는 문단과 같은 블록 요소 내에서만 존재할 수 있습니다.
    가장 일반적인 인라인 요소로는 그림과 폼필드가 있습니다.</P>
  </DD>
</DL>
DL 요소로 정의 리스트를 선언하고, DT 요소로 정의하려는 용어를, DD 요소로 해당 용어에 대한 설명을 기술합니다. 한 용어는 관련된 여러 개의 정의를 가질 수 있으며, 하나의 정의 또한 여러 개의 용어를 가질 수 있습니다.
인라인 요소

요소 앞과 뒤에 줄 바꿈을 하지 않는 요소로 인라인 요소는 문단과 같은 블록 요소 내에서만 존재할 수 있습니다. 가장 일반적인 인라인 요소로는 그림과 폼필드가 있습니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all


<LI>

LI 요소는 UL, OL, MENU, DIR 요소 안에서 목록의 항목을 정의할 때 사용합니다. OL 또는 UL 요소 내에 사용될 경우에는 블록 요소(Block Element)를 포함할 수 있습니다. 또한 OL 또는 UL 요소를 포함할 수도 있어 중첩된 목록을 만들 수 있습니다.

구문: <LI>...</LI>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir rtl
ltr 		글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 링크 내용에 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.
type disc
square
circle
1
a
A
i
I 		항목 모양을 지정합니다. disc는 속이 찬 원, square은 속이 찬 사각형, circle은 속이 빈 원으로 표시되며, 1은 아라비아 숫자, a는 알파벳 소문자, A는 알파벳 대문자, i는 로마자 소문자, I는 로마자 대문자로 표시됩니다. LI 요소가 OL 요소 안에 사용된 경우에는 A, a, I, i, 1 값을 지정할 수 있습니다. UL 요소 안에 사용한 경우의 기본값은 disc, OL 요소 안에 사용한 경우의 기본값은 1입니다.
  • 값이 "disc" 일 때
  • 값이 "circle" 일 때
  • 값이 "square" 일 때

1 : 1, 2, 3, ...

a : a, b, c, ...

A : A, B, C, ...

i : i, ii, iii, ...

I : I, II, III, ...
value | Number | 항목 표시자의 값을 지정합니다. OL 요소 안에 LI 요소가 사용된 경우, 항목 번호를 중간에 바꿀 때 사용합니다.

예제

 <OL>
  <LI>
    <B>HTML 문서 타입 정의</B>
    <UL>
      <LI>HTML 2.0</LI>
      <LI>HTML 3.2</LI>
      <LI>HTML 4.01 Strict</LI>
    </UL>
  </LI>
  <LI>
    <B>SGML 문자 엔티티 레퍼런스</B>
    <UL>
      <LI>Latin-1 엔티니</LI>
      <LI>기호와 그리스 문자</LI>
      <LI>기타 특수 문자</LI>
    </UL>
  </LI>
 </OL>
  1. HTML 문서 타입 정의
    • HTML 2.0
    • HTML 3.2
    • HTML 4.01 Strict
  2. SGML 문자 엔티티 레퍼런스
    • Latin-1 엔티니
    • 기호와 그리스 문자
    • 기타 특수 문자

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all

참고

  • OL 요소 내의 LI 요소 속성값은 대소문자를 구별하며, UL, DIR, MENU 요소 내의 LI 요소의 속성값은 대소문자를 구별하지 않습니다.
  • LI 요소가 DIR, MENU 요소 내에 사용되었을 경우 블록 요소(Block Element)를 포함할 수 없습니다.


<MENU>

MENU 요소는 메뉴 리스트(Menu List)를 정의할 때 사용합니다. 실제 리스트 항목을 정의하는 LI 요소가 하나 이상 포함되어야 합니다.

구문: <MENU>...</MENU>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
compact | compact | 항목을 간단하게 표시합니다. 웹 브라우저에서는 차이가 없습니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에서 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.

예제

<MENU>
<LI>첫 번째 메뉴입니다.
<LI>두 번째 메뉴입니다.
</MENU>
MENU 요소는 메뉴 리스트(Menu List)를 선언할 때 사용하며, 리스트의 실제 항목은 LI 요소로 기술합니다. type 속성을 사용할 수 없는 점을 제외하고는 UL 요소와 동일합니다.
  • 첫 번째 메뉴입니다.
  • 두 번째 메뉴입니다.

    • 지원 브라우저/HTML 버전

    이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

    IE all, NN all, HTML all

    참고

    • HTML 4.01에서는 MENU 요소 대신 UL 요소를 사용할 것을 권장합니다.


<OL>

OL 요소는 순서있는 리스트(Ordered List)을 만들 때 사용합니다.

구문: <OL>...</OL>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.
compact | compact | 항목을 간단하게 표시합니다. 웹 브라우저에서는 차이가 없습니다.
type | 1 a A i I | 항목 모양을 지정합니다.
start | Number | 순서 항목의 번호를 지정합니다. 기본값은 1입니다.

예제

 <H3>목차</H3>
  <OL>
    <LI>소개</LI>
    <LI>회사 연혁</LI>
      <OL type="A">
        <LI>드리는 글</LI>
        <LI>생산 제품</LI>
      </OL>
    <LI>서비스 제공</LI>
    <LI>앞으로의 발전 방향</LI>
    <LI>결론</LI>
  </OL>
OL 요소는 목록의 항목을 정의하는 LI 요소를 하나 이상 포함합니다. 순서없는 목록(UL)과 달리, 순서 있는 목록의 항목은 일정한 연속성을 가지고 있습니다. 순서있는 목록의 항목은 웹 브라우저 상에서 순서가 매겨집니다.

목차

  1. 소개
  2. 회사 연혁
    1. 드리는 글
    2. 생산 제품
  3. 서비스 제공
  4. 앞으로의 발전 방향
  5. 결론

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all

참고

  • CSS의 list-style-type 속성을 이용하면 보다 자유롭게 항목 스타일을 지정할 수 있습니다.


<UL>

UL 요소는 순서 없는 리스트(Unordered List)을 만들 때 사용합니다. 이 요소는 리스트의 실제 항목을 정의하는 LI 요소를 한 개 이상 포함하고 있습니다.

구문: <UL>...</UL>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.
type | disc square circle | 항목 모양을 지정합니다. 안이 채워진 원 모양(disc), 안이 빈 원 모양(circle), 정사각형 모양(square)의 불릿을 이용할 수 있습니다.
start | Number | 순서 항목의 번호를 지정합니다. 기본값은 1입니다.
compact | compact | 항목을 간단하게 표시합니다. 웹 브라우저에서는 차이가 없습니다.

예제

<H3>목차</H3>
  <UL>
    <LI>소개</LI>
    <LI>회사 현역</LI>
      <UL type="circle">
        <LI>드리는 글</LI>
        <LI>생산 제품</LI>
      </UL>
    <LI>서비스 제공</LI>
    <LI>앞으로의 발전 방향</LI>
    <LI>결론</LI>
  </UL>
OL 요소과 달리, UL 요소로 정의한 리스트는 순서나 차례 등의 연속성을 갖지 않습니다. 웹 브라우저는 일반적으로 UL 요소의 항목들을 불릿(bullet)으로 구분하여 나타냅니다.

목차

  • 소개
  • 회사 현역
    • 드리는 글
    • 생산 제품
  • 서비스 제공
  • 앞으로의 발전 방향
  • 결론

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all

참고

  • CSS의 list-style-type 속성을 이용하면 보다 자유롭게 항목 스타일을 지정할 수 있습니다.


<TABLE>

TABLE 요소는 표를 만들 때 사용합니다.

구문: <TABLE>...</TABLE>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
border | Length | 테두리의 두께를 지정합니다.
cellpadding | Length | 셀 안쪽 여백을 지정합니다.
cellspacing | Length | 셀 간격을 지정합니다.
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
frame | void above below hsides lhs rhs vsides box border | 표 안쪽 테두리의 모양을 지정합니다. void는 테두리를 보이지 않게 하고, hsides는 왼쪽과 오른쪽 테두리를, vsides는 위쪽과 아래쪽의 테두리를, above는 위쪽 테두리, below는 아래쪽 테두리, lhs는 왼쪽 테두리, rhs는 오른쪽 테두리, box 혹은 border는 모든 테두리를 표시합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에 사용할 언어를 지정합니다.
rules | none groups rows cols all | 표 안쪽 테두리의 모양을 지정합니다. none은 테두리를 보이지 않게 하고, groups는 행 그룹과 열 그룹 사이에, rows는 행 사이에, cols는 열 사이에, all은 모든 셀 사이의 테두리를 표시합니다. BORDER 속성값이 지정되지 않았거나 0인 경우 none이 기본값으로 사용되며, 다른 모든 경우에 all이 기본값으로 사용됩니다.
style | StyleDesc | CSS 스타일을 지정합니다.
summary | Text | 표의 내용을 정리한 문자열을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.
width | Length | 표의 너비를 지정합니다.
align | left right center | 정렬 방법을 지정합니다.
bgcolor | Color | 표 배경색을 지정합니다. 색깔 이름이나 #rrggbb 형식의 코드를 입력합니다. HTML 4.01에서는 스타일 시트의 color 속성을 사용할 것을 권장합니다.

예제

 <TABLE border="1" style="font-size:9pt">
  <CAPTION>도메인 코드별 나라 이름</CAPTION>
  <THEAD>
    <TR>
      <TH>도메인 코드</TH>
      <TH>나라 이름</TH>
    </TR>
  </THEAD>
  <TBODY>
    <TR>
      <TD>kr</TD>
      <TD>Korea, Republic of</TD>
    </TR>
    <TR>
      <TD>jp</TD>
      <TD>Japan</TD>
    </TR>
    <TR>
      <TD>cn</TD>
      <TD>China</TD>
    </TR>
  </TBODY>
</TABLE>
TABLE 요소는 표의 다양한 구조를 만들기 위해서 여러 선택 요소들을 포함합니다. TABLE 요소 안에 최소한 하나의 TBODY가 반드시 필요하며, TABLE 안에 하나의 TBODY만 있고 THEAD와 TFOOT이 없는 경우에는 TBODY 요소를 생략할 수 있습니다.

CAPTION 요소는 표에 캡션을 지정하기 위해 사용되며, COL과 COLGROUP 요소는 행의 너비와 그룹핑을 설정하는 데 사용됩니다.

THEAD, TFOOT, TBODY 요소는 열 그룹을 표시합니다. TBODY 요소가 표의 기본 열 그룹을 표시하는 반면, THEAD와 TFOOT은 머리열과 꼬리열을 포함합니다. 하나의 열 그룹은 개별 열을 표시하기 위해 TR 요소를 가지며, 각각 TR은 제목 셀과 데이터 셀을 표시하기 위해 TH와 TD 요소를 갖습니다.

도메인 코드별 나라 이름
도메인 코드 | 나라 이름
kr | Korea, Republic of
jp | Japan
cn | China

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML 3.2


<CAPTION>

CAPTION 요소는 표에 캡션을 넣을 때 사용합니다. CAPTION 요소는 TABLE 요소 내에 제일 처음에 포함되어야 합니다.

구문: <CAPTION>...</CAPTION>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.
align | bottom top left right | 표의 캡션의 정렬 방법을 지정합니다. 인터넷 익스플로러에서 right, left는 규약에 나온 것과 다르게 구현되며 넷스케이프 네비게이터는 top, bottom만 지원합니다.

예제

 <TABLE border="1" width="250">
  <CAPTION>나모 웹에디터와 함께 제공되는 유용한 도구</CAPTION>
    <TR>
      <TH>도구명</TH>
    </TR>
    <TR>
      <TD>나모 그림 나누기</TD>
    </TR>
    <TR>
      <TD>나모 화면 갈무리</TD>
    </TR>
    <TR>
      <TD>나모 GIF 애니메이터</TD>
    </TR>
</TABLE>
나모 웹에디터와 함께 제공되는 유용한 도구
도구명
나모 그림 나누기
나모 화면 갈무리
나모 GIF 애니메이터

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML 3.2

참고

  • 캡션은 단순한 표에서 표의 요약처럼 사용되며, 복잡한 표에서는 TABLE의 summary 속성을 이용하거나 표 밖의 문단에서 표 전체의 요약문을 제공하는 방법을 쓰는 것이 좋습니다.


<COLGROUP>

COLGROUP 요소는 표의 세로줄 그룹을 만들 때 사용합니다. COLGROUP 요소는 TABLE 요소 내에서 CAPTION 뒤 THEAD 앞에 위치해야 합니다. COLGROUP을 사용하여 표의 세로줄 그룹을 만들어 높으면 스타일 시트를 사용하여 보다 쉽게 다양한 표현을 지정할 수 있습니다.

구문: <COLGROUP>...</COLGROUP>

닫는 태그: 선택

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
char | Character | 셀의 정렬 기준 문자를 지정합니다.
charoff | Length | 문자 기준 정렬의 기준점(offset)을 지정합니다. 픽셀수 또는 셀 너비의 비율로 지정합니다. charoff="50%"는 문자를 셀의 중앙에 수평으로 정렬합니다.
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에 사용할 언어를 지정합니다.
span | Character | 그룹화할 세로줄의 개수를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
width | MultiLength | 세로줄 그룹의 너비를 지정합니다.
align | left right center justify char | 가로 정렬 방법을 지정합니다. 기본값은 left입니다.
valign | top middle bottom baseline | 세로 정렬 방법을 지정합니다. 기본값은 middle입니다.

예제

 <TABLE border="1">
   <COLGROUP width="50%"></COLGROUP>
   <COLGROUP span="2" width="25%">
      <COL align="right">
   </COLGROUP>
   <TR>
      <TD>대청봉</TD>
      <TD>설악산</TD>
      <TD>강원도</TD>
   </TR>
   <TR>
      <TD>천왕봉</TD>
      <TD>지리산</TD>
      <TD>전라도</TD>
   </TR>
</TABLE>
위 예제에서 첫번째 COLGROUP 요소는 첫번째 세로줄에 적용되며, 두번째 COLGROUP 요소는 두번째와 세번째 세로줄에 적용됩니다. 두번째 COLGROUP 요소 안에 있는 COL 요소가 우선시되어 그룹의 첫번째 세로줄에 적용됩니다.
대청봉 | 설악산 | 강원도
천왕봉 | 지리산 | 전라도

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE 3, NN n/a, HTML 4

참고

  • COLGROUP 요소 안에 COL 요소가 있을 때, COL 속성은 COLGROUP 속성보다 우선합니다.


<COL>

COL 요소는 표의 세로줄을 지정할 때 사용합니다. COL 요소는 TABLE 요소 내에서 CAPTION 뒤에 THEAD 앞에 위치해야 합니다. COLGROUP과 달리 COL은 세로줄을 구조적으로 그룹핑하지 않으며 단순히 하나 이상 세로줄에 공통적인 속성을 정의합니다. COL요소는 TABLE 요소 안에 바로 포함되거나 COLGROUP 안에 포함될 수 있습니다. COL 요소가 COLGROUP 안에 있을 때, COL 속성은 COLGROUP 속성보다 우선합니다.

구문: <COL>

닫는 태그: 없음

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
char | Character | 셀의 정렬 기준 문자를 지정합니다.
charoff | Length | 문자 기준 정렬의 기준점(offset)을 지정합니다. 픽셀수 또는 셀 너비의 비율로 지정합니다. charoff="50%"는 문자를 셀의 중앙에 수평으로 정렬합니다.
class | ClassName | CSS의 class 선택자를 지정합니다.
width | MultiLength | 각 세로줄의 너비를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에 사용할 언어를 지정합니다.
span | Character | COL 요소의 속성을 공유할 셀의 개수를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
align | left right center justify char | 가로 정렬 방법을 지정합니다. 기본값은 left입니다.
valign | top middle bottom baseline | 세로 정렬 방법을 지정합니다. 기본값은 middle입니다.

예제

 <TABLE border="1">
   <COL width="50%">
   <COL span="2" width="25%" align="right">
   <TR>
      <TD>대청봉</TD>
      <TD>설악산</TD>
      <TD>강원도</TD>
   </TR>
   <TR>
      <TD>천왕봉</TD>
      <TD>지리산</TD>
      <TD>전라도</TD>
   </TR>
</TABLE>
위 예제에서 첫번째 COL 요소는 첫번째 세로줄에 적용되며, 두번째 COL 요소는 두번째와 세번째 세로줄에 적용됩니다.
대청봉 | 설악산 | 강원도
천왕봉 | 지리산 | 전라도

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE 3, NN n/a, HTML 4

참고

  • 넷스케이프에서는 COL 요소가 지원되지 않기 때문에 너비와 정렬 속성을 지정은 TD와 TH 요소 안에서 해줍니다.
  • 인터넷 익스플로러에서는 align="char"를 지원하지 않습니다.


<THEAD>

THEAD 요소는 표의 가로줄(머리글)을 그룹지을 때 사용합니다. TBODY, TFOOT과 기능상 동일합니다.

구문: <THEAD>...</THEAD>

닫는 태그: 선택

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
char | Character | 셀의 정렬 기준 문자를 지정합니다.
charoff | Length | 문자 기준 정렬의 기준점(offset)을 지정합니다. 픽셀수 또는 셀 너비에 대한 비율로 지정합니다. charoff="50%"는 문자를 셀의 중앙에 수평으로 정렬합니다.
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
align | left right center justify char | 가로 정렬 방법을 지정합니다. 기본값은 left입니다.
valign | top middle bottom baseline | 세로 정렬 방법을 지정합니다. 기본값은 middle입니다.

예제

 <TABLE border="1" style="font-size:9pt">
  <THEAD>
    <TR>
      <TH>요일</TH>
      <TH>날씨</TH>
    </TR>
  </THEAD>
  <TBODY>
     <TR>
      <TD>목요일</TD>
      <TD>맑음</TD>
    </TR>
  </TBODY>
</TABLE>
THEAD를 이용하여 표의 머리글이 될 제목셀 가로줄을 그룹핑한 예제입니다.
요일 | 날씨
목요일 | 맑음

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE 3, NN n/a, HTML 4

참고

  • THEAD로 제목줄을 그룹핑하면 여러 페이지로 구성된 표를 프린터로 출력할 때 페이지마다 제목줄이 포함되도록 할 수 있고, 제목줄이 고정된 채로 표의 내용만 스크롤되는 긴 표를 만들 수 있습니다.


<TFOOT>

TFOOT 요소는 표의 가로줄(바닥글)을 그룹지을 때 사용합니다. TBODY, THEAD 요소와 기능상 동일합니다.

구문: <TFOOT>...</TFOOT>

닫는 태그: 선택

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
char | Character | 셀의 정렬 기준 문자를 지정합니다.
charoff | Length | 문자 기준 정렬의 기준점(offset)을 지정합니다. 픽셀수 또는 셀 너비의 비율로 지정합니다. charoff="50%"는 문자를 셀의 중앙에 수평으로 정렬합니다.
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
align | left right center justify char | 가로 정렬 방법을 지정합니다. 기본값은 left입니다.
valign | top middle bottom baseline | 세로 정렬 방법을 지정합니다. 기본값은 middle입니다.

예제

 <TABLE border="1" style="font-size:9pt">
  <THEAD>
    <TR>
      <TH>항목</TH>
      <TH>금액</TH>
    </TR>
  </THEAD>
  <TFOOT style="font:bold">
    <TR>
      <TD>합계</TD>
      <TD>12,000</TD>
    </TR>
  </TFOOT>
  <TBODY align="right">
    <TR>
      <TD>영화</TD>
      <TD>7,000</TD>
    </TR>
    <TR>
      <TD>점심</TD>
      <TD>5,000</TD>
    </TR>
  </TBODY>
</TABLE>
TFOOT 요소를 이용하여 표에 바닥글을 넣은 예제입니다. 바닥글에는 전체 표의 요약이나 표의 일부에 적용하는 내용 등을 기록합니다.
항목 | 금액
영화 | 7,000
점심 | 5,000
합계 | 12,000

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE 3, NN n/a, HTML 4

참고

  • TFOOT을 이용하면 바닥글을 별도로 그룹핑하여, 여러 페이지로 구성된 표를 프린터로 출력할 때 페이지마다 바닥글을 포함시킬 수 있고, 바닥글이 고정된 채로 표의 내용만 스크롤되는 긴 표를 만들 수 있습니다.
  • TFOOT 요소는 TBODY 요소 앞에 위치해야 하기 때문에 이를 지원하지 않는 브라우저에서 사용할 수 없습니다.


<TH>

TH 요소는 표의 제목셀을 정의할 때 사용합니다. TH 요소는 TR 요소 내에 위치합니다.

구문: <TH>...</TH>

닫는 태그: 선택

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
abbr | Text | 셀의 내용을 축약한 문자열을 지정합니다.
axis | CDATA | 셀 내용의 분류 기준을 지정합니다.
char | Character | 셀의 정렬 기준 문자를 지정합니다.
charoff | Length | 문자 기준 정렬의 기준점(offset)을 지정합니다. 픽셀수 또는 셀 너비에 대한 비율로 지정합니다. charoff="50%"는 문자를 셀의 중앙에 수평으로 정렬합니다.
class | ClassName | CSS의 class 선택자를 지정합니다.
colspan | Number | 가로로 합칠 셀의 개수를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
headers | IdRefs | 셀의 제목을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에 사용할 언어를 지정합니다.
rowspan | Number | 세로로 합칠 셀의 개수를 지정합니다.
scope | row col rowgroup colgroup | 제목이 적용되는 범위를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
align | left right center justify char | 정렬 방법을 지정합니다.
valign | top middle bottom baseline | 정렬 방법을 지정합니다.
bgcolor | Color | 셀 배경색을 지정합니다. 색깔 이름이나 #rrggbb 형식의 코드를 입력합니다. HTML 4.01에서는 스타일 시트의 color 속성을 사용할 것을 권장합니다.
height | Pixels | 셀의 높이를 지정합니다.
nowrap | nowrap | 워드랩(word-wrap) 기능을 사용하지 않도록 합니다.
width | Pixels | 표의 너비를 지정합니다.

예제

 <TABLE border="1">
  <TR>
    <TH>요일</TH>
    <TH>날씨</TH>
  </TR>
  <TR>
    <TD>월요일</TD>
    <TD>흐림</TD>
  </TR>
</TABLE>
TH 요소는 제목셀을 나타내며 웹 브라우저에서 볼드체로 표시됩니다. 볼드체로 표시되는 점을 제외하면 데이터셀을 표시하는 TD 요소와 기능상 동일합니다. 셀의 내용이 제목인 동시에 데이터인 경우에는 TD 요소를 사용하는 것이 좋습니다.
요일 | 날씨
월요일 | 흐림

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML 3.2

참고

  • TD, TH 요소에서 지정한 속성은 TR, COL, COLGROUP, THEAD, TBODY, TFOOT 요소에서 지정한 속성보다 우선합니다.


<TR>

TR 요소는 표의 가로줄을 정의합니다. TR은 제목셀인 TH와 테이터셀인 TD 요소를 포함합니다.

구문: <TR>...</TR>

닫는 태그: 선택

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
char | Character | 셀의 정렬 기준 문자를 지정합니다.
charoff | Length | 문자 기준 정렬의 기준점(offset)을 지정합니다. 픽셀수 또는 셀 너비에 대한 비율로 지정합니다. charoff="50%"는 문자를 셀의 중앙에 수평으로 정렬합니다.
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
valign | top middle bottom baseline | 세로 정렬 방법을 지정합니다. 기본값은 middle입니다.
align | left right center justify char | 가로 정렬 방법을 지정합니다. 기본값은 left입니다.
bgcolor | Color | 셀 배경색을 지정합니다. 색깔 이름이나 #rrggbb 형식의 코드를 입력합니다. HTML 4.01에서는 스타일 시트의 color 속성을 사용할 것을 권장합니다.

예제

 <TABLE border="1">
  <TR>
    <TH>요일</TH>
    <TH>날씨</TH>
  </TR>
  <TR>
    <TD>월요일</TD>
    <TD>흐림</TD>
  </TR>
</TABLE>
TR 요소는 제목셀인 TH 요소와 데이터셀인 TD 요소를 포함합니다.
요일 | 날씨
월요일 | 흐림

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML 3.2

참고

  • TD, TH 요소에서 지정한 속성은 TR, COL, COLGROUP, THEAD, TBODY, TFOOT 요소에서 지정한 속성보다 우선합니다.


<TBODY>

TBODY 요소는 표의 가로줄을 그룹지을 때 사용합니다. THEAD, TFOOT과 기능상 동일합니다.

구문: <TBODY>...</TBODY>

닫는 태그: 선택

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
char | Character | 셀의 정렬 기준 문자를 지정합니다.
charoff | Length | 문자 기준 정렬의 기준점(offset)을 지정합니다. 픽셀수 또는 셀 너비의 비율로 지정합니다. charoff="50%"는 문자를 셀의 중앙에 수평으로 정렬합니다.
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
align | left right center justify char | 가로 정렬 방법을 지정합니다. 기본값은 left입니다.
valign | top middle bottom baseline | 세로 정렬 방법을 지정합니다. 기본값은 middle입니다.

예제

 <TABLE border="1" style="font-size:9pt">
<TBODY>
     <TR>
      <TD>kr</TD>
      <TD>Korea, Republic of</TD>
    </TR>
    <TR>
      <TD>jp</TD>
      <TD>Japan</TD>
    </TR>
</TBODY>
</TABLE>
TBODY 요소를 사용하여 가로줄을 그룹화한 예제입니다.
kr | Korea, Republic of
jp | Japan

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE 3, NN n/a, HTML 4

참고

  • 표가 하나의 TBODY만 포함하고 THEAD, TFOOT을 포함하지 않을 때 TBODY 요소를 생략할 수 있습니다.


<TD>

TD 요소는 셀을 정의할 때 사용합니다. TD 요소는 TR 요소 안에 포함됩니다. TR 요소는 각각의 셀을 표시하기 위해 TH 요소와 TD 요소를 갖습니다.

구문: <TD>...</TD>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
abbr | Text | 셀의 내용을 축약한 문자열을 지정합니다.
axis | CDATA | 셀 내용의 분류 기준을 지정합니다.
char | Character | 셀의 정렬 기준 문자를 지정합니다.
charoff | Length | 문자 기준 정렬의 기준점(offset)을 지정합니다. 픽셀수 또는 셀 너비의 비율로 지정합니다. charoff="50%"는 문자를 셀의 중앙에 수평으로 정렬합니다.
class | ClassName | CSS의 class 선택자를 지정합니다.
colspan | Number | 가로로 합칠 셀의 개수를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
headers | IdRefs | 셀의 제목을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에 사용할 언어를 지정합니다.
rowspan | Number | 세로로 합칠 셀의 개수를 지정합니다.
scope | row col rowgroup colgroup | 제목이 적용되는 범위를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
align | left right center justify char | 정렬 방법을 지정합니다.
valign | top middle bottom baseline | 정렬 방법을 지정합니다.
bgcolor | Color | 셀 배경색을 지정합니다. 색깔 이름이나 #rrggbb 형식의 코드를 입력합니다. HTML 4.01에서는 스타일 시트의 color 속성을 사용할 것을 권장합니다.
height | Pixels | 셀의 높이를 지정합니다.
nowrap | nowrap | 워드랩(word-wrap) 기능을 사용하지 않도록 합니다.
width | Pixels | 표의 너비를 지정합니다.

예제

예제 1
 <TABLE border="1">
    <TR>
      <TD>AFAIK</TD>
      <TD>As Far As I Know</TD>
    </TR>
</TABLE>
AFAIK As Far As I Know

예제 2
<TABLE border="1">
  <TBODY align="center">
    <TR>
      <TD rowspan="2">은영</TD>
      <TD>경수</TD>
      <TD colspan="2">지혜</TD>
    </TR>
    <TR>
      <TD colspan="2" rowspan="2"><b>나의 친구들</b></TD>
      <TD>승헌</TD>
    </TR>
    <TR>
      <TD>용준</TD>
      <TD rowspan="2">영애</TD>
    </TR>
    <TR>
      <TD colspan="2">지우</TD>
      <TD>은하</TD>
    </TR>
  </TBODY>
</TABLE>
위 예제는 colspan과 rowspan을 사용한 것입니다.
은영 | 경수 | 지혜
 | 나의 친구들 |  | 승헌
용준 |  |  | 영애
지우 |  | 은하

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML 3.2


<FORM>

FORM 요소는 사용자와 정보 교환을 가능하게 하는 폼 양식을 만들 때 사용합니다. 따라서 폼 구성 요소들(예를 들면 INPUT, SELECT, TEXTAREA, BUTTON)을 포함해야 합니다.

구문: <FORM>...</FORM>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
action | URI | 실행할 CGI 프로그램의 URI를 지정합니다. 사용자가 폼을 전송하면 type="submit"으로 지정된 INPUT 또는 BUTTON 요소가 폼의 속성값을 여기에서 지정한 URI로 보냅니다.
accept | ContentTypes | MIME 타입을 지정합니다.
accept-charset | Charsets | 폼 처리기에 의해 받아들여지는 문자 인코딩의 목록을 지정합니다.
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
enctype | ContentTypes | MIME 타입을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에 사용할 언어를 지정합니다.
method | get post | CGI 실행 방식을 지정합니다. get 방식은 전송 폼이 URL에 완전히 포함되도록 합니다. 따라서 사용 중인 브라우저에서 북마크할 수 있는 장점이 있지만 처리 가능한 정보량에 제한이 있고 아스키 문자 이외의 문자를 쓸 수 없다는 단점이 있습니다. 입력받을 정보에 아스키 이외의 문자가 포함될 가능성이 있거나 정보의 길이가 100자 이상이 되는 폼의 처리는 post를 사용하는 것이 좋습니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.
target | FrameTarget | CGI 실행 결과가 표시될 창을 지정합니다.

예제

 <FORM method="post" action="/cgi-bin/order.cgi">
  <FIELDSET style="width:230; text-align:left; padding:5">
    <LEGEND>사용자 정보</LEGEND>
        <LABEL>고객 번호:</LABEL>
        <INPUT type="text" name="number"><BR>
        <LABEL>이름:</LABEL>
        <INPUT type="text" name="name">
  </FIELDSET>
  <P><INPUT type="submit" value="전송"></P>
</FORM>
사용자 정보

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all

참고

  • FORM 요소는 다양한 클라이언트 스크립트 액션을 지정하는 이벤트 속성을 가집니다. 대부분의 요소에 공통적으로 적용할 수 있는 이벤트 속성 이외에 FORM 요소는 onsubmit, onreset과 같은 속성을 추가로 적용할 수 있습니다.


<BUTTON>

BUTTON 요소는 보내기, 다시 작성, 누름 단추를 만들 때 사용합니다. 버튼을 규정하기 위해 INPUT 요소를 사용할 수도 있습니다. BUTTON 요소는 이미지와 강조를 포함한 다양한 라벨을 지원하지만 HTML 4.0에서 추가된 것으로 아직 웹 브라우저에서 널리 지원되지 않습니다.

구문: <BUTTON>...</BUTTON>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
accesskey | Character | 키 입력으로 요소를 활성화시킬 문자를 지정합니다.
class | ClassName | CSS의 class 선택자를 지정합니다.
disabled | [none] | 버튼을 누른 수 없게 합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에서 사용할 언어를 지정합니다.
name | CDATA | 요소의 이름을 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
tabindex | Number | 탭 순서를 지정합니다. 0과 32767사이의 하나의 숫자를 사용하며 양수로 표시된 값이 낮은 숫자일수록 우선 순위가 되며, 값이 같을 때는 HTML 문서에서 먼저 나온 것이 우선 순위가 됩니다. 값이 '0'이거나 없는 경우는 가장 마지막 순서가 됩니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 내용을 지정합니다.
type | submit reset button | 버튼의 종류를 지정합니다. submit는 보내기 단추를 만들며 기본값입니다. reset은 입력한 값을 모두 초기값으로 재설정하는 단추를 만들며 button은 일반 단추를 만듭니다.
value | CDATA | 요소의 값을 지정합니다.

예제

예제 1
 <BUTTON name="submit" value="modify">정보 수정</BUTTON>
 <BUTTON name="submit" value="continue">작성 계속</BUTTON>

예제 2
 <BUTTON type="button" onclick="myscript()">
   <IMG src="images/mybutton.gif" />
 </BUTTON>
이미지를 버튼 라벨로 사용한 예제입니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE 4, NN 6.2, HTML 4

참고

  • BUTTON 요소와 사용할 수 있는 이벤트로는 onfocus와 onblur가 있습니다.


<FIELDSET>

FIELDSET 요소는 폼 구성 요소 그룹을 정의합니다. 연관된 폼 구성 요소들을 그룹으로 묶어, 하나의 폼을 관리하기 쉽게 작은 부분으로 나눌 수 있습니다. 웹 브라우저에서는 사각형 모양으로 표시됩니다.

구문: <FIELDSET>...</FIELDSET>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.

예제

 <FORM action="example.asp">
  <FIELDSET style="width:150; text-align:right; padding:5">
  <LEGEND><B>연락처</B></LEGEND>
    이름:
    <INPUT type="text" size="10"><BR>
    이메일:
    <INPUT type="text" size="10">
  </FIELDSET><BR>
  <INPUT type="submit" value="전송">
  <INPUT type="reset" value="다시 입력">
</FORM>
FIELDSET 요소와 LEGEND 요소를 사용하여 폼 구성 요소들을 라벨이 표시된 상자 안에 넣어 준 예제입니다. LEGEND 요소는 그룹핑하여 만들어진 내용에 제목을 추가하는 요소로 FIELDSET 요소 안에 처음으로 나타납니다.
연락처 이름:
이메일:

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE4, NN 6.2, HTML 4


<LEGEND>

LEGEND 요소는 FIELDSET 요소로 그룹핑된 폼 구성 요소의 라벨을 붙일 때 사용합니다. 글자 또는 그림을 라벨로 사용할 수 있으며 인라인 요소들을 조합해서 라벨로 사용할 수도 있습니다.

구문: <LEGEND>...</LEGEND>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
accesskey | Character | 키 입력으로 요소를 활성화시킬 문자를 지정합니다.
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 링크 내용에 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다. 음성 브라우저에서는 title 속성값을 읽어 어떤 내용을 입력해야 하는지 구분합니다.
align | top bottom left right | 라벨을 FIELDSET 요소를 기준으로 어떻게 정렬할지 지정합니다.

예제

 <FORM action="example.asp">
  <FIELDSET style="width:150; text-align:right; padding:5">
  <LEGEND><B>연락처</B></LEGEND>
    이름:
    <INPUT type="text" size="10"><BR>
    이메일:
    <INPUT type="text" size="10">
  </FIELDSET><BR>
  <INPUT type="submit" value="전송">
  <INPUT type="reset" value="다시입력">
 </FORM>
LEGEND 요소를 사용하여, FIELDSET 요소로 그룹화한 폼 구성 요소의 라벨을 표시한 예제입니다. LEGEND 요소는 그룹핑하여 만들어진 내용에 제목을 추가하는 요소로 FIELDSET 요소 안에 처음으로 나타납니다.
연락처 이름:
이메일:

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE 4, NN 6.2, HTML 4

참고

  • P와 같은 블록 요소 바로 앞에 LEGEND 요소를 사용하면 보다 안전하게 이 내용을 표시할 수 있습니다.


<INPUT>

INPUT 요소는 한 줄 글상자, 확인 상자, 라디오 단추, 누름 단추, 그림 등 폼 구성 요소를 만들 때 사용합니다. 폼이 전송되면 FORM 요소 안의 INPUT 요소 값이 '이름/값'으로 묶여 서버로 전송됩니다. 사용되는 이름은 INPUT 요소의 name 속성에 지정된 이름이며, 전송되는 값은 폼의 종류와 사용자의 입력값에 따라 달라집니다.

구문: <INPUT>

닫는 태그: 없음

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
accept | ContentTypes | type 속성값이 file일 경우, 업로드할 파일의 MIME 타입을 지정합니다.
accesskey | Character | 키 입력으로 요소를 활성화시킬 문자를 지정합니다.
alt | Text | type 속성값이 image일 경우, 이미지를 표시할 수 없는 웹 브라우저에서 대신 표시할 텍스트를 지정합니다.
checked | checked | type 속성값이 radio 또는 checkbox인 경우, 체크된 상태로 표시합니다.
disabled | disabled | 폼 구성 요소를 선택할 수 없게 합니다.
class | ClassName | CSS의 class 선택자를 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에서 사용할 언어를 지정합니다.
maxlength | Number | type 속성값이 password 또는 text일 때, 입력 가능한 최대 문자수를 지정합니다.
name | CDATA | 요소의 이름을 지정합니다.
readonly | readonly | 요소의 값을 수정할 수 없게 합니다.
size | CDATA | 입력 칸의 너비를 지정합니다. 기본값은 20입니다.
src | URI | type 속성값이 image일 때, 버튼으로 사용할 이미지의 URI를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
tabindex | Number | 링크의 탭 순서를 지정합니다. 0과 32767사이의 하나의 숫자를 사용하며 양수로 표시된 값이 낮은 숫자일수록 우선 순위가 되며, 값이 같을 때는 HTML 문서에서 먼저 나온 것이 우선 순위가 됩니다. 값이 '0'이거나 없는 경우는 가장 마지막 순서가 됩니다.
type | text password checkbox radio submit reset file hidden image button | 폼 구성 요소의 종류를 지정합니다. 한 줄 글상자(text), 패스워드 입력 상자(password), 확인 상자(checkbox), 라디오 단추(radio), 그림(image), 누름 단추(submit, reset, button)를 만들 수 있습니다.
usemap | URI | 이미지 맵의 URI를 지정합니다.
value | CDATA | 요소의 값을 지정합니다.
align | top middle bottom left right | 이미지 버튼의 정렬 방식을 지정합니다.

예제

 <B><CENTER>파일 전송 양식</CENTER></B>
 <FORM>
  이름: <INPUT type="text" name="username"><BR>
  비밀번호: <INPUT type="password" name="password"><BR>
  파일: <INPUT type="file" name="filespec"><BR>
  <FIELDSET style="padding:5;width:150;">
    파일 종류:<BR>
    <INPUT type="radio" name="filetype" value="program" checked>프로그램<BR>
    <INPUT type="radio" name="filetype" value="image">그림<BR>
    <INPUT type="radio" name="filetype" value="other">기타<BR>
  </FIELDSET>
  <INPUT type="checkbox" name="shared" value="yes">파일 공유<BR>
  <INPUT type="submit" name="submit" value="전송">
  <INPUT type="reset" name="reset" value="다시 입력">
 </FORM>
INPUT 요소를 이용하여 다양한 폼 입력 양식을 삽입한 파일 업로드 폼 예제입니다.
파일 전송 양식
이름:
비밀번호:
파일:
파일 종류:
프로그램
그림
기타
파일 공유

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all

참고

  • HTML 4.01에서는 INPUT 요소를 모든 블록 요소(Block Element)와 인라인 요소(Inline Element) 안에 사용할 수 있도록 허용합니다. 그러나 넷스케이프 내비게이터 4.x 이전 버전에서는 FORM 요소 외부에 있는 INPUT 요소는 표시하지 않습니다.
  • INPUT 요소와 사용할 수 있는 이벤트로는 onfocus, onblur, onselect, onchange가 있습니다.


<LABEL>

LABEL 요소는 폼 구성 요소에 라벨을 지정할 때 사용합니다. 라디오 단추나 확인 상자를 만들 때 유용하게 사용할 수 있습니다. 각 LABEL 요소는 하나의 폼 구성 요소에 정확하게 조합됩니다. LABEL 요소의 내용은 폼 구성 요소의 라벨이 되며, IMG 또는 STRONG과 같은 인라인 요소(Inline Element)를 포함할 수 있습니다.

구문: <LABEL>...</LABEL>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
accesskey | Character | 키 입력으로 요소를 활성화시킬 문자를 지정합니다.
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
for | IDRef | LABEL 요소가 나타내는 INPUT 요소의 이름을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 링크 내용에 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
tabindex | Number | 링크의 탭 순서를 지정합니다. 0과 32767사이의 하나의 숫자를 사용하며 양수로 표시된 값이 낮은 숫자일수록 우선 순위가 되며, 값이 같을 때는 HTML 문서에서 먼저 나온 것이 우선 순위가 됩니다. 값이 '0'이거나 없는 경우는 가장 마지막 순서가 됩니다.
title | Text | 브라우저에서는 툴팁으로 표시할 추가 설명을 지정합니다.

예제

 <FORM action="example.asp">
  <LABEL for="name"><b>이름:</b></LABEL>
  <INPUT type="text" name="username" id="name">
  <BR>
  <LABEL for="passwd"><b>비밀번호:</b></LABEL>
  <input type="password" name="password" id="passwd">
  <BR><B>성별:</B>
    <INPUT type="radio" name="sex" value="male" id="male" checked>
    <LABEL for="male">남</LABEL>
    <INPUT type="radio" name="sex" value="female" id="female">
    <LABLE for="female">여</LABEL>
 </FORM>

성별: 여

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE 4, NN 6, HTML 4

참고

  • LABEL 요소와 사용할 수 있는 이벤트로는 onfocus와 onblur가 있습니다.


<SELECT>

SELECT 요소는 선택 메뉴를 만들 때 사용합니다.

구문: <SELECT>...</SELECT>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
accesskey | Character | 키 입력으로 요소를 활성화시킬 문자를 지정합니다.
class | ClassName | CSS의 class 선택자를 지정합니다.
disabled | disabled | 폼 구성 요소를 선택할 수 없게 합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에서 사용할 언어를 지정합니다.
multiple | multiple | 한꺼번에 여러 개를 선택할 수 있게 합니다.
name | CDATA | 요소의 이름을 지정합니다.
size | Number | 세로줄 수를 지정합니다. 웹 브라우저에서 리스트 박스 형태로 보이게 합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.
tabindex | Number | 요소의 탭 순서를 지정합니다. 0과 32767사이의 하나의 숫자를 사용하며 양수로 표시된 값이 낮은 숫자일수록 우선 순위가 되며, 값이 같을 때는 HTML 문서에서 먼저 나온 것이 우선 순위가 됩니다. 값이 '0'이거나 없는 경우는 가장 마지막 순서가 됩니다.

예제

 <P>해당 사항을 한 개 이상 선택하세요:</P>
<SELECT name="관심사" multiple>
<OPTION>레저</OPTION>
<OPTION>육아</OPTION>
<OPTION>여행</OPTION>
<OPTION>독서</OPTION>
<OPTION>요리</OPTION>
</SELECT>

해당 사항을 한 개 이상 선택하세요:

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all

참고

  • SELECT 요소는 FORM 요소 안에 사용될 때 가장 유용하지만, HTML 4.01에서는 BUTTON 요소를 제외한 어떠한 블록 요소(Block Element) 또는 인라인 요소(Inline Element) 안에서도 사용할 수 있도록 허용합니다.


<OPTGROUP>

OPTGROUP 요소는 SELECT 요소에 포함된 여러 개의 OPTION 요소들을 그룹으로 정의할 때 사용됩니다.

구문: <OPTGROUP>...</OPTGROUP>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
label | Text | 그룹의 명칭을 정의합니다.
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
disabled | disabled | 해당 그룹을 비활성화시켜 사용할 수 없는 상태로 만듭니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.

예제

 <P>어떤 TV 프로그램을 주로 시청하세요?
  <SELECT>
    <OPTGROUP LABEL="드라마">
      <OPTION LABEL="아침">아침 드라마</OPTION>
      <OPTION LABEL="일일">일일 연속극</OPTION>
      <OPTION LABEL="주말">주말 드라마</OPTION>
      <OPTION LABEL="단막극">단막극</OPTION>
    </OPTGROUP>
    <OPTGROUP LABEL="뉴스">
      <OPTION LABEL="7시">7시 저녁 뉴스</OPTION>
      <OPTION LABEL="9시">9시 뉴스</OPTION>
    </OPTGROUP>
    <OPTGROUP LABEL="쇼 프로그램">
      <OPTION LABEL="가요">가요 순위 프로그램</OPTION>
      <OPTION LABEL="코메디">코메디 프로그램</OPTION>
    </OPTGROUP>
  </SELECT>
 </P>
OPTGROUP은 SELECT에 나열된 OPTION 항목들을 종류별로 구분하여 여러 개의 그룹으로 나열할 때 유용합니다. OPTGROUP은 한 개 이상의 OPTION 요소를 포함해야 하며, OPTGROUP 요소와 동일한 문서에 삽입된 SELECT 요소에만 사용할 수 있습니다.

어떤 TV 프로그램을 주로 시청하세요?

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE 6, NN 6, HTML 4

참고

  • OPTGROUP 요소는 OPTION 요소만을 포함할 수 있습니다. 그러므로 OPTGROUP으로 만든 그룹은 중첩하여(nested) 사용할 수 없습니다.
  • 인터넷 익스플로러 6.0에서는 label 속성을 지원하지 않습니다.


<OPTION>

OPTION 요소는 SELECT 요소 안에서 선택 항목을 나타낼 때 사용합니다.

구문: <OPTION>...</OPTION>

닫는 태그: 선택

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
disabled | disabled | 해당 항목을 비활성화시켜 사용할 수 없는 상태로 만듭니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
label | Text | 선택 항목의 라벨을 정의합니다.
lang | LanguageCode | 내용에 사용할 언어를 지정합니다.
selected | selected | 해당 항목이 기본값으로 선택되도록 합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.
value | CDATA | 요소의 값을 지정합니다.

예제

<FORM action="example.php">
  <P>운영 체제:</P>
  <SELECT name="os">
    <OPTION value="winxp">Windows XP</OPTION>
    <OPTION value="win2k" selected>Windows 2000</OPTION>
    <OPTION value="winme">Windows Me</OPTION>
    <OPTION value="win98">Windows 98</OPTION>
  </SELECT>
</FORM>

운영 체제:

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all

참고

  • OPTGROUP 요소를 사용하여 그 안에 OPTION 요소를 포함시키면 관련 옵션을 그룹으로 만들 수 있습니다.


<TEXTAREA>

TEXTAREA 요소는 여러 줄의 텍스트 입력 상자를 만들때 사용합니다. TEXTAREA 요소는 INPUT 요소와 달리 여러 줄의 텍스트가 입력 가능한 입력 상자를 만듭니다.

구문: <TEXTAREA>...</TEXTAREA>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
rows | Number | 화면에 표시할 줄 수를 지정합니다.
cols | Number | 한 줄에 들어갈 문자의 개수를 지정합니다.
accesskey | Character | 키 입력으로 요소를 활성화시킬 문자를 지정합니다.
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
disabled | disabled | 요소를 선택할 수 없게 합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에 사용할 언어를 지정합니다.
name | CDATA | 요소의 이름을 지정합니다.
readonly | readonly | 요소의 값을 수정할 수 없게 합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
tabindex | Number | 탭 순서를 지정합니다. 0과 32767사이의 하나의 숫자를 사용하며 양수로 표시된 값이 낮은 숫자일수록 우선 순위가 되며, 값이 같을 때는 HTML 문서에서 먼저 나온 것이 우선 순위가 됩니다. 값이 '0'이거나 없는 경우는 가장 마지막 순서가 됩니다.

예제

 <TEXTAREA rows="3" cols="20">
 문의 사항을 입력하십시오.
 </TEXTAREA>
TEXTAREA 요소의 내용은 기본 입력값으로 표시됩니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all

참고

  • HTML 4.01에서는 TEXTAREA 요소를 BUTTON 요소를 제외한 모든 블록 요소(Block Element) 및 인라인 요소(Inline Element) 안에 사용할 수 있도록 허용합니다.
  • TEXTAREA 요소와 사용할 수 있는 이벤트로는 onfocus, onblur, onselect, onchange가 있습니다.


<A>

하이퍼링크를 만들거나 문서의 특정 위치에 앵커를 표시할 때 사용합니다. 하이퍼링크를 만들 때는 href 속성을 지정하고 앵커를 표시할 때는 name 속성을 지정해야 합니다. 하이퍼링크로 지정한 내용은 기본값으로 브라우저에서 밑줄이 있는 파란색 텍스트로 표시됩니다. 그러나 사용자의 설정에 따라 밑줄을 없애거나 색깔을 변경할 수 있습니다.

구문: <A>...</A>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
href | URI | 하이퍼링크로 연결할 문서의 URI를 지정합니다. 하이퍼링크를 만들 때 반드시 지정해야 합니다. URI는 절대경로 또는 상대경로로 지정할 수 있습니다. 절대경로는 "http://www.namo.com/index.html"과 같이 주소 전체를 표시한 것을 말하고 상대경로는 "images/logo.gif"와 같이 A 요소가 사용된 파일의 위치를 기준으로 상대적인 파일의 위치를 표시한 것을 말합니다.
name | CDATA | 문서의 특정 위치에 앵커(이름이 정해진 하이퍼링크의 도착점, 책갈피)를 지정합니다. 앵커를 표시할 때 반드시 지정해야 합니다. name 속성값은 중복되지 않아야 하며, A-Z 나 a-z 범위 안의 문자로 시작되어야 하고 A-Z, a-z, 0-9, 하이픈, 밑줄, 콜론, 마침표가 사용될 수 있습니다.
accesskey | Character | 키 입력으로 요소를 활성화시킬 문자를 지정합니다.
charset | Charset | 문자셋을 지정합니다. 예를 들어 연결할 문서가 영문일 경우 "en", 한글일 경우 "euc-kr"이라고 지정합니다.
class | ClassName | CSS의 class 선택자를 지정합니다.
coords | Coords | 이미지 맵의 좌표점을 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
hreflang | LanguageCode | 연결할 문서의 언어 코드를 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다. 인터넷 익스플로러에서는 id 속성도 name 속성처럼 앵커를 지정할 때 사용할 수 있습니다.
lang | LanguageCode | 링크 내용에 사용할 언어를 지정합니다.
rel | LinkTypes | 현재 문서를 기준으로 링크된 문서와의 관계를 기술합니다.
rev | LinkTypes | 링크된 문서를 기준으로 현재 문서와의 관계를 기술합니다.
shape | rect circle poly default | 이미지 맵의 핫존 모양을 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
tabindex | Number | 링크의 탭 순서를 지정합니다. 0과 32767사이의 하나의 숫자를 사용하며 양수로 표시된 값이 낮은 숫자일수록 우선 순위가 되며, 값이 같을 때는 HTML 문서에서 먼저 나온 것이 우선 순위가 됩니다. 값이 '0'이거나 없는 경우는 가장 마지막 순서가 됩니다.
target | FrameTarget | 링크를 표시할 프레임을 지정합니다.
title | Text | 링크의 툴팁으로 표시할 내용을 지정합니다.
type | ContentTypes | 연결할 문서의 MIME 타입을 지정합니다.

예제

예제 1
 <A href="http://www.namo.co.kr/">나모 인터랙티브 웹 사이트</A>를 참고하세요.
최소한의 속성만 지정하여 만든 일반적인 하이퍼링크의 예제입니다.

예제 2
 <A href="xyz.html" target="detail" type="text/html" charset="US-ASCII" hreflang="en" accesskey="x" tabindex="3">
   <IMG src="prod_detail.gif">
 </A>
여러 개의 속성을 지정하여 하이퍼링크를 만든 예제입니다. 그림에 하이퍼링크를 적용한 경우로, 상대경로로 지정된 문서 "xyz.html"은 "detail" 프레임에 열립니다.

예제 3
 <H1><A name="chapter1">Chapter 1</A></H1>
앵커(책갈피)를 지정한 예제입니다. 책갈피를 지정한 문서 내에서 책갈피로 하이퍼링크를 만들 때는 <A href="#chapter1">과 같이 지정합니다. 다른 문서에서 하이퍼링크를 만들 때는 <A href="text.html#chapter1">과 같이 책갈피를 지정한 파일 이름을 명시해 주어야 합니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all

참고

  • A 요소와 사용할 수 있는 이벤트로는 onfocus와 onblur가 있습니다.
  • href 속성으로 <A href="mailto:webmaster@namo.com">과 같이 "mailto" 링크를 지정하면 이메일을 보내는 하이퍼링크를 만들 수 있습니다.
  • target 속성으로 지정한 프레임이 존재하지 않을 경우, 링크는 새 창에서 열립니다.


<APPLET>

APPLET 요소는 자바 애플릿을 추가할 때 사용합니다. 자바 애플릿은 웹 브라우저에서 실행할 수 있는 자바로 작성된 작은 프로그램입니다.

구문: <APPLET>...</APPLET>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
height | Length | 애플릿의 높이를 지정합니다.
width | Length | 애플릿의 너비를 0보다 큰 정수값으로 지정합니다. 애플릿의 최소 크기는 너비 1픽셀, 높이 1픽셀로서 width, height 속성값을 0으로 지정해도 1픽셀로 표시됩니다.
align | absmiddle baseline bottom middle texttop top left right | 애플릿의 정렬 방법을 지정합니다. absmiddle, baseline, bottom, middle, texttop, top은 애플릿과 같은 줄의 텍스트를 기준으로 위치가 정해지며, left와 right는 애플릿이 떠있는 상태(float)로 문서의 왼쪽 또는 오른쪽에 정렬됩니다.
alt | Text | APPLET 요소를 지원하지 않는 브라우저에서 보여줄 대체 텍스트를 지정합니다.
archive | URI | 압축된 라이브러리 파일을 지정합니다.
class | ClassName | CSS의 class 선택자를 지정합니다.
code | Cdata | 애플릿의 파일 이름을 지정합니다.
codebase | URI | 애플릿이 현재 HTML 문서와 다른 디렉토리에 있을 경우, 애플릿의 파일 경로를 지정합니다.
object | CDATA | 저장된 애플릿 표현을 포함하고 있는 리소스 경로를 지정합니다. object 속성은 code 속성과 함께 사용할 수 없습니다.
datafld | ColumnName | 데이터 필드를 지정합니다.
datasrc | DatasrcName | 데이터 소스를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
hspace | Pixels | 애플릿 왼쪽과 오른쪽 여백을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
mayscript | mayscript | LiveConnect를 사용함을 나타냅니다. LiveConnect는 넷스케이프 내비게이터 3.0에서 채택된 기술로, 자바 애플릿과 자바스크립트가 서로 데이터를 주고 받을 수 있게 합니다.
name | CDATA | 요소의 이름을 지정합니다.
src | URI | 애플릿 파일의 URI를 지정합니다. 인터넷 익스플로러에서 추가 클래스를 지정할 때 사용하는 것으로 archive 속성과 같은 기능을 합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 내용을 지정합니다.
vspace | Pixels | 애플릿 위쪽과 아래쪽 여백을 지정합니다.

예제

예제 1
 <APPLET code="Animate.class" width="100" height="100">
 <PARAM name="img1" value="/images/1.jpg">
 <PARAM name="img2" value="/images/2.jpg">
 <IMG src="animation.gif">
 </APPLET>
APPLET은 매개 변수를 정의하기 위해 PARAM 요소를 포함합니다. APPLET 요소의 내용보다 PARAM 요소가 먼저 지정되어야 합니다. 위 예제에서 자바 애플릿은 두 개의 매개 변수를 가지며 자바를 지원하지 않는 브라우저에서는 애니메이션 GIF 그림을 표시하도록 하고 있습니다.

예제 2
 <APPLET codebase="http://www.namo.com/java/"
 code="Animator.class" width=460 height=160 align="middle"
 alt="애플릿을 실행할 수 있는 경우에는 애니메이션이 재생됩니다.">
 <PARAM name="imageSource" value="images/Beans">
 <PARAM name="backgroundColor" value="0xc0c0c0">
 <PARAM name="endImage" value=10>
 <PARAM name="pause" value=200>
 <P>브라우저에서 애플릿을 지원하지 않습니다.</P>
 </APPLET>
위 예제에서는 codebase가 지정되었기 때문에 code 값이 상대값으로 정의되었습니다. PARAM 요소는 애플릿에 필요한 매개 변수를 전달하고 그 아래 P 요소에 정의된 내용은 자바 애플릿을 지원하지 않는 브라우저에 표시됩니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE 3, NN 2, HTML 3.2

참고

  • HTML 4.01에서는 APPLET 요소 대신 OBJECT 요소를 사용할 것을 권장합니다. 인터넷 익스플로러 5.0 이상에서 OBJECT 요소를 지원합니다.
  • 애플릿을 수평적으로 중앙에 배치시키려면 <P align="center"><APPLET code="game.class" width="300" height="100"></APPLET></P>와 같이 가운데 배치된 문단 안에 애플릿을 삽입합니다.
  • codebase가 지정되어 있지 않은 경우, code 또는 object 값은 HTML 문서의 기본 URL에 대한 상대 경로로 표시됩니다.


<BASEFONT>

BASEFONT 요소는 웹 브라우저에서 문서를 표시할 때 사용할 폰트의 기본값을 지정합니다.

구문: <BASEFONT>

닫는 태그: 없음

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
size | CDATA | 글자 크기를 지정합니다. 1부터 7까지 지정할 수 있으며, 사용자가 글자 크기를 설정하지 않은 경우 기본값은 3입니다.
class | ClassName | CSS의 class 선택자를 지정합니다.
color | Color | 글자 색깔을 지정합니다. 색깔 이름이나 #rrggbb 형식의 코드를 입력합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
face | CDATA | 글꼴 종류를 지정합니다. 여러 개의 글꼴을 지정할 경우, 앞에서 지정한 글꼴이 없으면 뒤에서 지정한 글꼴이 사용됩니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 링크 내용에 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.

예제

 <HEAD>
    <BASEFONT face="굴림" color="blue">
</HEAD>
FONT와 달리 BASEFONT는 기본 폰트에 영향을 미치며, BODY 요소 안의 모든 콘텐츠에 적용됩니다. 일부 브라우저에서는 BASEFONT 요소로 지정한 값을 TABLE 안의 콘텐츠에는 적용하지 못합니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML 3.2

참고

  • BASEFONT 요소는 스타일 시트로 대체되어 HTML 4.01에서 권장하지 않는(deprecated) 요소입니다.


<BDO>

BDO 요소는 글자의 방향을 지정합니다.

구문: <BDO>...</BDO>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
dir | rtl ltr | 글자 방향을 지정합니다. rtl은 오른쪽에서 왼쪽으로, ltr은 왼쪽에서 오른쪽으로 표시합니다.
class | ClassName | CSS의 class 선택자를 지정합니다.
lang | LanguageCode | 링크 내용에 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 브라우저에서는 툴팁으로 표시할 추가 설명을 지정합니다.

예제

<BDO dir="rtl">ABCDEFG</BDO>
BDO 요소에 dir 속성을 사용하여 글자가 오른쪽에서 왼쪽으로 표시되게 한 예제입니다.

유니코드 문자는 왼쪽에서 오른쪽 혹은 오른쪽에서 왼쪽으로 쓰여져서 적절한 전체 텍스트 모양을 만듭니다. 예를 들어 영어는 왼쪽에서 오른쪽으로, 히브리어는 오른쪽에서 왼쪽으로 배열됩니다. BDO 요소는 글자의 방향을 지정하여, 히브리어와 영어가 혼합된 글을 표시할 경우 유용하게 사용됩니다.

ABCDEFG

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE 5, NN 6.2, HTML 4


<BR>

BR 요소는 줄바꿈을 할 때 사용합니다.

구문: <BR>

닫는 태그: 없음

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 브라우저에서는 툴팁으로 표시할 추가 설명을 지정합니다.
clear | left right all | 좌우에 정렬된 요소를 완전히 벗어나 새로운 줄에서 시작하도록 지정합니다.

예제

예제 1
 <P><IMG src="images/building.gif" align=left >서울은 한국에서 제일 큰 도시입니다.
 <BR>
서울의 거리는 붐비는 교통과 인파로 항상 분주합니다.</P>
위 예제에서 두 번째 문장은 BR 요소에 의해 줄바꿈이 되어 표시됩니다.

서울은 한국에서 제일 큰 도시입니다.
서울의 거리는 붐비는 교통과 인파로 항상 분주합니다.

예제 2
 <P><IMG src="images/building.gif" align=left >서울은 한국에서 제일 큰 도시입니다.
 <BR clear="left">
서울의 거리는 붐비는 교통과 인파로 항상 분주합니다.</P>
위 예제에서 두 번째 문장은 BR 요소의 clear 속성에 의해 이미지 밑에 표시됩니다.

서울은 한국에서 제일 큰 도시입니다.
서울의 거리는 붐비는 교통과 인파로 항상 분주합니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all

참고

  • 저자가 지정한 글자 크기와는 다른 글자 크기로 문서를 보는 경우, BR 요소를 많이 사용한 문서는 제대로 보이지 않을 수 있습니다.
  • 단락을 구분할 때에는 BR 요소가 아닌 P 요소를 사용하는 것이 좋습니다.
  • 떠있는(floating) 요소와 함께 사용되는 텍스트를 정렬하려면 BR 요소의 clear 속성 대신 CSS의 clear 속성을 사용하는 것이 좋습니다.


<FONT>

FONT 요소는 글자에 변화를 줄 때 사용합니다.

구문: <FONT>...</FONT>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
color | Color | 글자 색깔을 지정합니다. 색깔 이름이나 #rrggbb 형식의 코드를 입력합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
face | Cdata | 글꼴 종류를 지정합니다. 여러 개의 글꼴을 지정할 경우, 앞에서 지정한 글꼴이 없으면 뒤에서 지정한 글꼴이 사용됩니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에 사용할 언어를 지정합니다.
size | Cdata | 글자 크기를 지정합니다. BASEFONT를 기준으로 한 상대값으로 지정하거나 1부터 7까지 절대값으로 지정할 수 있습니다. BASEFONT가 지정되지 않은 경우 3을 기본 크기로 하여 상대적인 크기로 표시합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.

예제

 <P><FONT SIZE="+2">글자 크기를 크게</FONT></P><P><FONT COLOR=#FF00000>붉은색으로 표시</FONT></P>
FONT 요소는 인라인 요소(Inline Element)입니다. 따라서 P나 TABLE과 같은 블록 요소(Block Element)는 포함할 수 없습니다. 스타일 시트를 사용하면 글자 스타일을 좀 더 자유롭게 표현할 수 있습니다.

글자 크기를 크게

붉은색으로 표시

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML 3.2

참고

  • FONT 요소는 스타일 시트로 대체되어 HTML 4.01에서 권장하지 않는(deprecated) 요소입니다.


<IFRAME>

IFRAME 요소는 HTML 문서 안에 인라인 프레임(Inline Frame)을 삽입할 때 사용합니다.

구문: <IFRAME>...</IFRAME>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
align | top middle bottom left right | 프레임 창의 정렬 방법을 지정합니다.
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
frameborder | 0 1 yes no | 프레임 테두리를 표시할지 여부를 지정합니다. 1 또는 yes로 지정하면 프레임 테두리가 표시되고, 0 또는 no로 지정하면 프레임 테두리가 표시되지 않습니다. 기본값은 1입니다.
height | Length | 프레임의 높이를 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에서 사용할 언어를 지정합니다.
longdesc | Text | 프레임으로 표시할 문서에 대해 자세한 설명을 담은 문서의 URI를 지정합니다.
marginheight | Pixels | 프레임 안쪽의 세로 여백을 지정합니다.
marginwidth | Pixels | 프레임 안쪽의 가로 여백을 지정합니다.
name | CDATA | 인라인 프레임의 이름을 지정합니다.
scrolling | yes no auto | 스크롤이 가능하게 할지 여부를 지정합니다. 기본값인 auto는 필요한 경우에만 스크롤 막대를 표시합니다. yes는 항상 스크롤 막대를 표시하고, no는 스크롤 막대를 표시하지 않습니다.
src | URI | 프레임으로 표시할 문서의 URI를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.
width | Length | 프레임의 너비를 지정합니다.

예제

 <IFRAME width="160" height="120" src="http://www.namo.com/index.html">
   <IFRAME width="160" height="120" src="http://www.namo.com/index.html">
   웹 브라우저에서 인라인 프레임을 지원하지 않습니다.
</IFRAME>
</IFRAME>
IFRAME 요소를 지원하지 않는 웹 브라우저를 고려하여 대체 내용을 IFRAME 태그의 사이에 삽입해 주는 것이 좋습니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE 3, NN 6, HTML 4

참고

  • 스타일 시트의 vertical-align과 float 속성을 이용하면 인라인 프레임을 보다 자유롭게 정렬할 수 있습니다.


<IMG>

IMG 요소는 문서에 이미지를 삽입할 때 사용합니다.

구문: <IMG>

닫는 태그: 없음

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
alt | Text | 이미지를 표시할 수 없는 브라우저에서 보여줄 이미지 설명을 지정합니다. 이미지가 표시되는 브라우저에서는 툴팁으로 표시됩니다.
src | URI | 이미지의 URI를 지정합니다.
class | ClassName | CSS의 class 선택자를 지정합니다.
height | Length | 이미지의 높이를 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
ismap | ismap | 서버사이드 이미지 맵을 사용합니다.
lang | LanguageCode | 내용에서 사용할 언어를 지정합니다.
longdesc | Text | 자세한 설명을 담은 문서의 URI를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
usemap | URI | 이미지 맵의 URI를 지정합니다. map으로 명명된 MAP 요소가 같은 문서에 포함되어 있어야 합니다.
width | Length | 이미지의 너비를 지정합니다.
align | left right top bottom middle baseline texttop absmiddle absbottom | 정렬 방법을 지정합니다. 기본값은 left입니다.
border | Length | 테두리의 두께를 지정합니다.
hspace | Pixels | 세로 여백을 지정합니다.
vspace | Pixels | 가로 여백을 지정합니다.

예제

<P>나모 인터랙티브</P>
 <IMG src="images/namo.gif" alt="나모 인터랙티브" width="143" height="40">
IMG 요소를 이용하여 그림을 삽입한 예제입니다.

나모 인터랙티브

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all

참고

  • 웹 브라우저는 보통 GIF나 JPEG 형식의 이미지를 지원하며, PNG 형식을 지원하는 브라우저도 점차 늘어나고 있습니다. 웹 브라우저가 지원하지 않는 형식의 이미지를 삽입하려면 EMBED 요소나 OBJECT 요소를 사용해야 합니다.
  • width와 height 속성값을 그림 크기보다 작게 지정한 경우에는 브라우저에 따라 alt 텍스트가 잘려 보일 수도 있습니다.


<MAP>

MAP 요소는 클라이언트 사이드 이미지맵을 선언할 때 사용합니다. 이미지맵이란 하나의 이미지를 여러 영역으로 나누어 각각의 영역에 서로 다른 하이퍼링크를 지정한 것을 말합니다.

구문: <MAP>...</MAP>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에 사용할 언어를 지정합니다.
name | CDATA | 이미지맵의 이름을 지정합니다. 여기서 지정한 이름은 IMG, OBJECT 요소 usemap 속성의 앵커로 사용됩니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.

예제

 <P><IMG src="images/hand.gif" width="173" height="99" border="0" usemap="#ImageMap1"></P>
<MAP name="ImageMap1">
<AREA shape="rect" coords="8, 10, 86, 93" href="http://www.namo.co.kr" alt="나모 인터랙티브 한글 사이트">
<AREA shape="rect" coords="88, 12, 168, 94" href="http://www.namo.com" alt="나모 인터랙티브 영문 사이트">
</MAP>
MAP 요소는 하나 이상의 AREA 요소를 정의할 수 있습니다. AREA 요소는 이미지에서 핫존 영역의 좌표값을 지정합니다.

나모 인터랙티브 한글 사이트 나모 인터랙티브 영문 사이트

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML 3.2

참고

  • HTML 4.01에서는 MAP 요소의 기능이 확장되어 AREA 요소만이 아닌 하나 이상의 블록 요소(Block Element)를 가질 수 있습니다.


<AREA>

AREA 요소는 이미지 맵에서 핫 존 영역을 정의합니다. 핫 존이란 이미지 맵에서 서로 다른 URL로 이동하도록 설정된 영역을 말합니다.

구문: <AREA>

닫는 태그: 없음

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
alt | Text | 이미지 맵을 지원하지 않는 브라우저에서 표시할 대체 텍스트를 지정합니다.
class | ClassName | CSS의 class 선택자를 지정합니다.
coords | Coords | 이미지 맵의 좌표점을 지정합니다. shape 속성이 "default"일 때는 coords 속성을 사용할 필요가 없습니다.
dir | rtl ltr | 글자 방향을 지정합니다.
href | URI | 하이퍼링크로 연결할 문서의 URI를 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 링크 내용에 사용할 언어를 지정합니다.
name | CDATA | 요소의 이름을 지정합니다.
nohref | nohref | 하이퍼링크를 지정하지 않을 때 사용합니다. href 속성과 nohref 속성을 동시에 사용할 수 없습니다.
shape | default circle rect poly | 이미지 맵의 핫존 모양을 지정합니다. circle(원형), rect(사각형), poly(다각형)으로 지정할 수 있습니다.
style | StyleDesc | CSS 스타일을 지정합니다.
tabindex | Number | 링크의 탭 순서를 지정합니다. 0과 32767사이의 하나의 숫자를 사용하며 양수로 표시된 값이 낮은 숫자일수록 우선 순위가 되며, 값이 같을 때는 HTML 문서에서 먼저 나온 것이 우선 순위가 됩니다. 값이 '0'이거나 없는 경우는 가장 마지막 순서가 됩니다.
target | FrameTarget | 링크를 표시할 프레임을 지정합니다.
title | Text | 브라우저에서 툴팁으로 표시할 내용을 지정합니다.

예제

 <IMG src="map.gif" usemap="#map1">
 <MAP name="map1">
    <AREA shape=rect coords="12,20,64,71" href="rectangle.html" alt="사각형">
    <AREA shape=circle coords="175,91,56" href="circle.html" alt="원">
 </MAP>
사각형과 원 모양의 핫존을 갖는 이미지맵을 삽입한 예제입니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML 3.2

참고

  • AREA 요소와 사용할 수 있는 이벤트로는 onfocus와 onblur가 있습니다.
  • target 속성으로 지정한 프레임이 존재하지 않을 경우, 링크는 새 창에서 열립니다.
  • AREA 대신 A 요소를 사용하여 이미지 맵을 정의할 수도 있습니다. 자세한 사항은 A 요소 도움말의 예제 4를 참고하십시오.


<OBJECT>

OBJECT 요소는 HTML 문서에 객체, 즉 웹 브라우저에서 지원하지 않는 형식의 파일을 삽입할 때 사용합니다.

구문: <OBJECT>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
archive | CDATA | 필요한 라이브러리 파일을 지정합니다.
class | ClassName | CSS의 class 선택자를 지정합니다.
classid | URI | ActiveX 컨트롤의 classid를 지정합니다.
codebase | URI | 개체가 현재 HTML 문서와 다른 디렉토리에 있을 경우, 애플릿의 파일 경로를 지정합니다.
codetype | ContentTypes | MIME 타입을 지정합니다.
data | URI | 플러그인 파일의 URI를 지정합니다.
declare | Text | ActiveX 컨트롤을 선언합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
height | Length | 개체의 높이를 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에 사용할 언어를 지정합니다.
name | CDATA | 요소의 이름을 지정합니다.
standby | Text | 개체가 로딩되는 동안 먼저 표시될 텍스트를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
tabindex | Number | 링크의 탭 순서를 지정합니다. 0과 32767사이의 하나의 숫자를 사용하며 양수로 표시된 값이 낮은 숫자일수록 우선 순위가 되며, 값이 같을 때는 HTML 문서에서 먼저 나온 것이 우선 순위가 됩니다. 값이 '0'이거나 없는 경우는 가장 마지막 순서가 됩니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.
type | ContentTypes | MIME 타입을 지정합니다.
usemap | URI | 이미지 맵의 URI를 지정합니다. map으로 명명된 MAP 요소가 같은 문서에 포함되어 있어야 합니다.
usemap | URI | 컨트롤에 이미지 맵을 지정합니다.
width | Length | 개체의 너비를 지정합니다.
align | left right top bottom middle | 정렬 방법을 지정합니다.
border | Length | 테두리의 두께를 지정합니다.
hspace | Pixels | 세로 여백을 지정합니다.
vspace | Pixels | 가로 여백을 지정합니다.

예제

예제 1
 <OBJECT data="mlk.mov" type="video/quicktime"
 title="Martin Luther King's &quot;I Have a Dream&quot; speech" width="150" height="150">
 <PARAM name="pluginspage" value="http://quicktime.apple.com/">
 <PARAM name="autoplay" value="true">
 <OBJECT data="mlk.wav" type="audio/x-wav"
 title="Martin Luther King's &quot;I Have a Dream&quot; speech">
 <PARAM name="autostart" value="true">
 <PARAM name="hidden" value="true">
 <A href="mlk.htmll">Full text of Martin Luther King's "I Have a Dream" speech</A>
 </OBJECT>
 </OBJECT>
OBJECT 요소는 실행 초기 데이터를 제공하기 위해 PARAM 요소를 포함할 수 있습니다. 위 예제는 비디오 클립을 포함한 것으로, 비디오 클립을 보여줄 수 없을 경우 이를 대신하여 보여줄 콘텐츠로 오디오 클립을 지정하였고, PARAM 요소를 이용하여 오디오/비디오 플러그 인을 위한 매개 변수를 지정하였습니다.

예제 2
 <OBJECT
 classid="java:yahtzee.class"
 codetype="application/java"
 width="400" height="250"
 title="my yahtzee game"
 standby="Get ready to play Yahtzee!">
   Enable Java support to play!
</OBJECT>
위 예제는 OBJECT 요소를 사용하여 자바 애플릿을 삽입한 것입니다.

예제 3
 <OBJECT data="example.gif" title="Nice Photo" />
위 예제는 IMG 요소 대신 OBJECT 요소를 사용하여 그림을 삽입한 것입니다. title 속성은 IMG 요소의 alt 속성과 같은 역할을 합니다.

예제 4
<OBJECT
 classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628"
 id="Slider1"
 width="200" height="40"
 border="2">
  <PARAM name="BorderStyle" value="1" />
  <PARAM name="MousePointer" value="0" />
  <PARAM name="Enabled" value="1" />
  <PARAM name="Min" value="0" />
  <PARAM name="Max" value="10" />
</OBJECT>
위 예제는 OBJECT 요소를 사용하여 ActiveX 컨트롤을 삽입한 것입니다. classid의 값은 Windows 레지스트리의 CLSID를 참조한 것입니다. 여러 개의 PARAM 요소를 사용하여 ActiveX 컨트롤을 위한 매개 변수를 지정하였습니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE 3, NN n/a, HTML 4

참고

  • OBJECT 요소는 인라인 요소(Inline Element)와 블록 요소(Block Element) 안에 모두 쓰일 수 있습니다.
  • OBJECT 요소의 내용은 OBJECT 부모 요소 안에 포함될 수 있는 요소여야 합니다. 예를 들어 OBJECT가 A 요소 안에 포함되어 있다면, OBJECT는 블록 요소를 내용으로 포함할 수 없습니다.


<PARAM>

PARAM 요소는 OBJECT, EMBED, APPLET 요소의 매개 변수를 지정할 때 사용됩니다.

구문: <PARAM>

닫는 태그: 없음

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
name | CDATA | 변수의 이름을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
type | ContentType | MIME 타입을 지정합니다.
value | CDATA | 변수의 값을 지정합니다.
valuetype | data ref object | 변수의 값 타입을 지정합니다. 기본값은 data이고, 이는 속성값이 문자열로 되어있음을 나타냅니다. ref값은 속성값이 실행할 URI를 포함하고 있음을 나타내며, object값은 동일한 문서 내에서 value 속성이 다른 OBJECT 요소의 식별자를 정의한 경우에 사용됩니다.

예제

<OBJECT classid="java:Clock.class" codetype="application/java"
width="100" height="100" title="생생한 현재 시간!" standby="지금 몇시인가요?">
<PARAM name="TYPE" value="ANALOG">
<PARAM name="BGCOLOR" value="WHITE">
<PARAM name="FGCOLOR" value="NAVY">
</OBJECT>
OBJECT, EMBED, APPLET 요소는 여러 개의 PARAM 요소를 포함할 수 있습니다. 위 예제에서 Clock 애플릿은 시계의 특정한 스타일과 사용할 색깔을 지정하기 위해 3개의 매개 변수를 사용합니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE 3, NN 3, HTML 3.2


<Q>

Q 요소는 인용한 단어 또는 어구를 표시할 때 사용합니다.

구문: <Q>...</Q>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
cite | URI | 인용문의 출처를 표시합니다. 브라우저에서 지원되지는 않지만, 이 속성으로 인용문의 신뢰도를 확인하거나 연관된 정보를 찾을 수 있습니다.
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에서 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.

예제

 <P>미국의 W.S.Clark은 <Q>소년들이여, <EM>야망</EM>을 가져라!</Q>라는 말을 남겼다.</P>
Q 요소를 사용할 때는 인용문에 따옴표를 붙이지 않습니다. 그러나 Q 요소를 지원하지 않는 웹 브라우저를 고려하여 경우에 따라 따옴표를 삽입할 수도 있습니다.

미국의 W.S.Clark은 소년들이여, 야망을 가져라!라는 말을 남겼다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE 4, NN 6.2, HTML 4

참고

  • 문단 인용문을 표시할 때에는 BLOCKQUOTE 요소를 사용합니다.


<SPAN>

SPAN 요소는 단어나 구에 스타일을 적용하기 위해 사용합니다.

구문: <SPAN>...</SPAN>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.

예제

<P>그 전쟁은 <SPAN lang="fr" style="font-weight:bold">남북전쟁</SPAN>이라고 불립니다.
SPAN 요소에 스타일을 적용하면 B, I, TT, S 요소와 같은 모든 인라인 요소(Inline Element)와 동일한 모양으로 표시할 수 있습니다.

그 전쟁은 남북전쟁이라고 불립니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE 3, NN 4, HTML 4

참고

  • 단어나 구가 아닌 블록 요소(Block Element)에 스타일을 적용할 때는 DIV 요소를 사용합니다.


<SUB>

SUB 요소는 아래첨자를 표시할 때 사용합니다.

구문: <SUB>...</SUB>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에서 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.

예제

<P><VAR>x</VAR> = <VAR>x<SUB>1</SUB></VAR> + <VAR>x<SUB>2</SUB></VAR>
 + ... + <VAR>x<SUB>n</SUB></VAR></P>
<P>H<SUB>2</SUB>O (물)과 C<SUB>21</SUB>H<SUB>27</sub>NO (메타돈)</P>
SUB 요소는 어떤 의미를 나타내기 보다는 형태를 표시하기 위해 사용됩니다. 수학식이나 화학 공식 등을 표기할 때 유용합니다.

x = x1 + x2 + ... + xn

H2O (물)과 C21H27NO (메타돈)

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE 3, NN 2, HTML 3.2


<SUP>

SUP 요소는 위첨자를 표시할 때 사용합니다.

구문: <SUP>...</SUP>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에서 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.

예제

이차다항식의 예는 <STRONG>3<VAR>x</VAR><SUP>2</SUP> + 5<VAR>x</VAR> - 7</STRONG>입니다.
SUP 요소는 어떤 의미를 나타내기 보다는 형태를 표시하기 위해 사용됩니다. 수학의 지수 등을 표기할 때 유용합니다.
이차다항식의 예는 3x2 + 5x - 7입니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE 3, NN 2, HTML 3.2


<ABBR>

ABBR 요소는 축약형을 표기할 때 쓰입니다.

구문: <ABBR>...</ABBR>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 링크 내용에 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | title 속성은 ABBR 요소와 결합되어 축약형의 원래 형태를 표기하는데 사용되며 브라우저에서는 툴팁으로 표시됩니다.

예제

예제 1
 <ABBR title="United Nations">U.N.</ABBR>
읽는 이에 따라 한 단어로 읽히기도 하고 한 글자씩 읽히기도 하는 경우에는 대개 ACRONYM 보다 ABBR이 사용됩니다.

예제 2
 <ACRONYM title="North Atlantic Treaty Organization">NATO</ACRONYM>
축약형이 보편화된 하나의 축약단어로 쓰이는 경우에는 ABBR 대신 ACRONYM 요소를 사용합니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE n/a, NN 6.2, HTML 4


<ACRONYM>

ACRONYM 요소는 두문자어를 표기할 때 쓰입니다.

구문: <ACRONYM>...</ACRONYM>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 링크 내용에 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | title 속성은 ABBR 요소와 결합되어 축약형의 원래 형태를 표기하는데 사용되며 브라우저에서는 툴팁으로 표시됩니다.

예제

 <ACRONYM title="North Atlantic Treaty Organization">NATO</ACRONYM>
축약형이 보편화된 하나의 축약단어로 쓰이는 경우에는 ABBR 대신 ACRONYM 요소를 사용합니다. title 속성값은 브라우저에서 툴팁으로 표시됩니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE 4, NN 6.2, HTML 4


<CITE>

CITE 요소는 잡지나 신문의 제목, 참고 자료명 등을 표시할 때 사용합니다.

구문: <CITE>...</CITE>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에서 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.

예제

 제가 감명 깊게 읽은 소설은 황순원의 <CITE>소나기</CITE>입니다.
CITE 요소로 지정한 부분은 웹 브라우저에서 이탤릭체로 표시됩니다. 그러나 스타일 시트를 사용하여 형태를 변경할 수 있습니다.
제가 감명 깊게 읽은 소설은 황순원의 소나기입니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all


<CODE>

CODE 요소는 컴퓨터 코드 등을 표시할 때 사용합니다.

구문: <CODE>...</CODE>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에서 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.

예제

 <CODE>
class HelloWorld {
  public static void main(String[] args) {
    System.out.println("안녕하세요!");
  }
}
</CODE>
CODE 요소로 지정한 부분은 브라우저에서 고정폭 글자로 표시됩니다. 그러나 스타일 시트를 사용하여 다르게 표현할 수도 있습니다.
class HelloWorld {
  public static void main(String[] args) {
    System.out.println("안녕하세요!");
  }
}

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all

참고

  • 코드를 표시할 때는 가독성을 높이기 위해 형식을 유지하는 것이 중요합니다. PRE 요소 안에 CODE 요소를 사용하면 형식을 유지할 수 있습니다.


<DFN>

DFN 요소는 용어에 대한 정의를 나타낼 때 사용합니다.

구문: <DFN>...</DFN>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에서 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.

예제

<P><DFN>외부 스타일 시트</DFN>는 내부 스타일 시트와 달리 별도의 파일에 저장되며,
 여러 웹 페이지에 영향을 줄 수 있다.</P>
DFN 요소를 적용한 부분은 웹 브라우저에서 이탤릭체로 표시됩니다. 스타일 시트를 이용하면 다르게 표시할 수도 있습니다.

외부 스타일 시트는 내부 스타일 시트와 달리 별도의 파일에 저장되며, 여러 웹 페이지에 영향을 줄 수 있다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all

참고

  • DFN 요소는 구문 요소(Phrase Element)로서 용어의 정의라는 의미를 지니고 있으므로, 단순히 텍스트를 이탤릭체로 표시하려고 할 때에는 I 요소를 사용하는 것이 좋습니다.


<EM>

EM 요소는 내용을 강조할 때 사용합니다.

구문: <EM>...</EM>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에서 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.

예제

 제일 좋아하는 과일은 <EM>수박</EM>입니다.
EM 요소를 적용한 부분은 웹 브라우저에서 이탤릭체로 표시됩니다. 스타일 시트를 이용하면 다르게 표시할 수도 있습니다.
제일 좋아하는 과일은 수박입니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all

참고

  • EM 요소는 구문 요소(Phrase Element)로서 강조의 의미를 지니고 있으므로, 단순히 텍스트를 이탤릭체로 표시하려고 할 때에는 I 요소를 사용하는 것이 좋습니다.
  • EM 요소보다 더 강한 강조를 표시할 때는 STRONG 요소를 사용합니다.


<KBD>

KBD 요소는 키보드로 입력된 내용임을 표시할 때 사용됩니다.

구문: <KBD>...<KBD>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에서 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.

예제

<P>해당 사항이 없을 때에는 <KBD>N/A</KBD>라고 입력하십시오.</P>
KBD 요소를 적용한 부분은 웹 브라우저에서 타자체의 텍스트로 표시됩니다. 스타일 시트를 이용하면 형태를 변경할 수 있습니다.

해당 사항이 없을 때에는 N/A라고 입력하십시오.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all

참고

  • KBD 요소는 구문 요소(Phrase Element)로서 키보드로 입력하는 명령어 등을 나타낼 때 사용하며, 단순히 글자를 고정폭 글꼴로 표시하고자 할 때는 TT 요소를 사용합니다.


<SAMP>

SAMP 요소는 프로그램 또는 스크립트의 코드 샘플을 나타낼 때 사용합니다.

구문: <SAMP>...</SAMP>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에서 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.

예제

<P>이 경우 HTML Validator가 다음과 같은 에러 메시지를 표시합니다.</P>
<P><SAMP>C:\SP\BIN\NSGMLSU.EXE:test.html:4:7:E: element "FOOBAR" undefined</SAMP></P>
SAMP 요소로 처리된 부분은 웹 브라우저에서 고정폭 글꼴로 표시됩니다. 스타일 시트를 이용하면 형태를 변경할 수 있습니다.

이 경우 HTML Validator가 다음과 같은 에러 메시지를 표시합니다.

C:\SP\BIN\NSGMLSU.EXE:test.html:4:7:E: element "FOOBAR" undefined

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all

참고

  • SAMP 요소는 코드 샘플을 나타낼 때에만 사용하며, 단지 고정폭 글꼴로 표시하고자 할 때에는 TT 요소를 사용합니다.


<STRONG>

STRONG 요소는 내용의 특정한 부분을 강조할 때 사용됩니다.

구문: <STRONG>...</STRONG>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에서 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.

예제

<P>과거보다는 <STRONG>현재</STRONG>가 더 중요하다.</P>
STRONG 요소로 처리된 부분은 웹 브라우저에서 볼드체로 표시됩니다. 스타일 시트를 이용하면 형태를 변경할 수 있습니다.

과거보다는 현재가 더 중요하다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all

참고

  • STRONG 요소는 구문 요소(Phrase Element)로서 강조의 의미를 지니고 있으므로, 단순히 텍스트를 볼드체로 표시하려고 할 때에는 글자 스타일 요소인 B 요소를 사용하는 것이 좋습니다.
  • STRONG 요소보다 약한 강조를 표시할 때는 EM 요소를 사용합니다.


<VAR>

VAR 요소는 변수명을 표시할 때 사용합니다.

구문: <VAR>...</VAR>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에서 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.

예제

<P>HTML의 버전은 <VAR>x</VAR>.<VAR>x</VAR>와 같은 방식으로 표시된다.</P>
VAR 요소가 적용된 부분은 웹 브라우저에서 이탤릭체로 표시됩니다. 그러나 스타일 시트를 이용하면 형태를 변경할 수 있습니다.

HTML의 버전은 x.x와 같은 방식으로 표시된다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all

참고

  • VAR 요소는 구문 요소(Phrase Element)로서 변수명이라는 의미를 지니고 있으므로, 단순히 텍스트를 이탤릭체로 표시하려고 할 때에는 글자 스타일 요소인 I 요소를 사용하는 것이 좋습니다.


<B>

B 요소는 텍스트를 진하게 표시할 때 사용합니다.

구문: <B>...</B>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.

예제

 <b>이 문장은 진하게 표시됩니다.</b>
이 문장은 진하게 표시됩니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all

참고

  • 텍스트를 강조하려는 목적일 경우에는 구문 요소(Phrase Element)인 EM 또는 STRONG 요소를 사용하는 것이 좋습니다. 구문 요소는 텍스트의 의미를 좀더 명확하게 표현해 줍니다.
  • B 요소는 스타일 시트로 대체되어 HTML 4.01에서 권장하지 않는(deprecated) 요소입니다.


<BIG>

BIG 요소는 글자를 더 크게 표시하려고 할 때 사용합니다.

구문: <BIG>...</BIG>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 링크 내용에 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.

예제

 이 단어는 <big>크게</big> 표시됩니다.
BIG 요소는 <FONT size=+1>과 동일한 의미입니다.
이 단어는 크게 표시됩니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML 3.2

참고

  • 글자 크기를 정확하게 표시하려면 스타일 시트를 사용하는 것이 좋습니다.


<I>

I 요소는 텍스트를 이탤릭체로 표시할 때 사용합니다.

구문: <I>...</I>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 링크 내용에 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 브라우저에서는 툴팁으로 표시할 추가 설명을 지정합니다.

예제

 <I>이 문장은 이탤릭체로 표시됩니다.</I>
이 문장은 이탤릭체로 표시됩니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all

참고

  • 스타일 시트를 이용하면 형태를 자유롭게 변경할 수 있습니다.


<S>

S 요소는 텍스트의 가운데 줄을 그을 때 사용합니다.

구문: <S>...</S>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에서 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.

예제

 나의 가장 친한 친구는 <S>용준</S> 승헌입니다.
S 요소를 적용한 부분은 웹 브라우저에서 가운데 줄이 그어져 표시됩니다.
나의 가장 친한 친구는 용준 승헌입니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE 3, NN 3, HTML 3.2

참고

  • 단순히 가운데 줄이 그어진 텍스트를 표시하려고 할 때 S 요소를 사용하며, 삭제의 의미를 표시할 때는 DEL 요소를 사용합니다.
  • S 요소는 HTML 4.01에서 권장하지 않는(deprecated) 요소로서 이를 대신하여 스타일 시트의 text-decoration 속성을 사용하도록 권장하고 있습니다.


<SMALL>

SMALL 요소는 글자를 더 작게 표시할 때 사용합니다.

구문: <SMALL>...</SMALL>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에서 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.

예제

<P><SMALL>Copyright (c) 2002 (주) 나모 인터랙티브 All rights reserved.</SMALL></P>
SMALL 요소를 적용한 부분은 웹 브라우저에서 더 작게 표시됩니다. 위 예제에서와 같이 주로 저작권 등의 정보를 나타낼 때 유용합니다.

Copyright (c) 2002 (주) 나모 인터랙티브 All rights reserved.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE 3, NN 2, HTML 3.2

참고

  • 글자의 크기를 정확히 지정하려면 SMALL 요소보다 스타일 시트를 사용하는 것이 좋습니다.


<STRIKE>

STRIKE 요소는 텍스트의 가운데 줄을 그을 때 사용합니다.

구문: <STRIKE>...</STRIKE>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에서 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.

예제

 나의 가장 친한 친구는 <STRIKE>용준</STRIKE> 승헌입니다.
STRIKE 요소를 적용한 부분은 웹 브라우저에서 가운데 줄이 그어져 표시됩니다.
나의 가장 친한 친구는 용준 승헌입니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE 3, NN 3, HTML 3.2

참고

  • 단순히 가운데 줄이 그어진 텍스트를 표시하려고 할 때 STRIKE 요소를 사용하며, 삭제의 의미를 표시할 때는 DEL 요소를 사용합니다.
  • STRIKE 요소는 HTML 4.01에서 권장하지 않는(deprecated) 요소로서 이를 대신하여 스타일 시트의 text-decoration 속성을 사용하도록 권장하고 있습니다.


<TT>

TT 요소는 고정폭 글꼴로 표시할 때 사용합니다.

구문: <TT>...</TT>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에서 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.

예제

 내가 좋아하는 과일은 <TT>수박과 딸기</TT>입니다.
TT 요소를 적용한 부분은 웹 브라우저에서 고정폭 글꼴로 설정된 값으로 표시됩니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all

참고

  • 스타일 시트를 사용하면 TT 요소를 대신하거나 좀 더 보완할 수 있습니다.


<U>

U 요소는 글자에 밑줄을 그을 때 사용합니다.

구문: <U>...</U>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에서 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.

예제

 내가 가장 좋아하는 과일은 <U>딸기</U>입니다.
U 요소를 적용한 부분은 웹 브라우저에서 밑줄이 표시됩니다.
내가 가장 좋아하는 과일은 딸기입니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all

참고

  • 스타일 시트를 사용하면 U 요소를 대신하거나 좀 더 보완할 수 있습니다.
  • U 요소는 HTML 4.01에서 권장하지 않는(deprecated) 요소로서 이를 대신하여 스타일 시트의 text-decoration 속성을 사용할 것을 권장합니다.


<FRAME>

FRAME 요소는 프레임(프레임셋 문서 내에 있는 사각형 모양의 영역)을 정의합니다. FRAMESET 요소로 나눈 각각의 프레임을 지정할 때 사용합니다. FRAME 요소는 FRAMESET 요소 안에 사용해야 합니다.

구문: <FRAME>

닫는 태그: 없음

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
frameborder | 1 0 | 프레임 테두리를 표시할지 여부를 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에 사용할 언어를 지정합니다.
longdesc | Text | 프레임 내용에 대한 자세한 설명을 담은 문서의 URI를 지정합니다.
marginheight | Pixels | 프레임 안쪽의 세로 여백을 지정합니다.
marginwidth | Pixels | 프레임 안쪽의 가로 여백을 지정합니다.
name | CDATA | 프레임창의 이름을 지정합니다. 읽기 쉽고 프레임 내용에 기초한 것이 좋습니다.
noresize | noresize | 프레임창 크기를 변경할 수 없게 합니다.
scrolling | yes no auto | 스크롤이 가능하게 할지 여부를 지정합니다. 기본값인 auto는 필요한 경우에만 스크롤 막대를 표시합니다. yes는 항상 스크롤 막대를 표시하고, no는 스크롤 막대를 표시하지 않습니다.
src | URI | 프레임창에 표시될 문서의 URI를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.

예제

 <FRAMESET rows="*,100">
  <FRAMESET cols="40%,*">
    <FRAME name="menu" src="nav.html">
    <FRAME name="content" src="main.html">
  </FRAMESET>
  <FRAME name="ad" src="ad.html" noresize>
  <NOFRAMES>
    <BODY>
      <P>
        이 페이지를 보려면, 프레임을 볼 수 있는 브라우저가 필요합니다.
      </P>
    </BODY>
  </NOFRAMES>
 </FRAMESET>
위의 예제는 세 개의 프레임으로 구성된 프레임셋을 나타냅니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE all, NN all, HTML all

참고

  • 프레임 경계선을 없애려면 frameset 요소에서 border="0" frameborder="0" framespacing="0"과 같이 속성값을 지정하면 됩니다. 이것은 인터넷 익스플로러나 넷스케이프에서 지원되는 속성이지만 HTML 스펙에 포함되는 부분은 아닙니다.
  • 프레임 경계선을 없애면 이용자가 브라우저 상에서 프레임 크기를 조절할 수 없습니다.
  • IFRAME을 이용하면 프레임셋 문서가 아닌 일반 HTML 문서 안에 프레임을 삽입할 수 있습니다.


<NOFRAMES>

NOFRAMES 요소는 프레임을 지원하지 않는 웹 브라우저에서 보여줄 대체 컨텐츠를 지정하는 데 사용합니다. FRAMESET 요소 안에 사용되었을 때 NOFRAMES 요소는 BODY 요소를 포함해야 합니다.

구문: <NOFRAMES>...</NOFRAMES>

닫는 태그: 필요

속성

볼드체로 표시된 것은 필수 속성, 회색으로 표시된 것은 HTML 4.01에서 권장하지 않는(deprecated) 속성입니다.

속성 | 값 | 내용
class | ClassName | CSS의 class 선택자를 지정합니다.
dir | rtl ltr | 글자 방향을 지정합니다.
id | ElementID | CSS의 ID 선택자를 지정합니다.
lang | LanguageCode | 내용에 사용할 언어를 지정합니다.
style | StyleDesc | CSS 스타일을 지정합니다.
title | Text | 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.

예제

 <FRAMESET rows="*,100">
  <FRAMESET cols="40%,*">
    <FRAME name="Menu" src="nav.html" title="Menu">
    <FRAME name="Content" src="main.html" title="Content">
  </FRAMESET>
  <FRAME name="Ad" src="ad.html" title="Advertisement">
  <NOFRAMES>
    <BODY>
      <H1>목차</H1>
      <UL>
        <LI>
          <A href="reference/html401/">HTML 4.01 Reference</A>
        </LI>
        <LI>
          <A href="reference/wilbur/">HTML 3.2 Reference</A>
        </LI>
        <LI>
          <A href="reference/css/">CSS Guide</A>
        </LI>
      </UL>
      <P>
        <IMG src="ad.gif" alt="광고: 웹 저작도구의 표준, 나모 웹에디터">
      </P>
    </BODY>
  </NOFRAMES>
 </FRAMESET>
프레임셋 문서에는 반드시 의미있는 NOFRAMES 요소가 제공되어야 하며, 적어도 메인 프레임이나 다른 프레임의 링크를 포함하는 것이 좋습니다.

지원 브라우저/HTML 버전

이 태그를 지원하는 브라우저의 최소 버전은 아래와 같습니다.

IE 3, NN 2, HTML 4

참고

  • NOFRAMES 요소는 대부분의 블록 요소(Block Element) 안에서도 허용됩니다. 이를 이용하여 프레임셋에서 문서가 보이지 않을 때에만 표시되어야 하는 광고 등의 콘텐츠를 포함시킬 수 있습니다.


CSS Syntax

규칙(Rule)

기본적인 CSS 규칙은 선택자(selector)와 선언문(declaration)두 부분으로 구성됩니다. 선택자는 규칙을 어디에 적용할 것인지를 지정하고, 선언문은 CSS 속성 이름과 속성값으로 구성하여 규칙의 내용을 기술합니다. 아래 예제에서 선언한 CSS 규칙은 모든 blockquote 요소에 적용됩니다.

선언문은 { }로 표시되어야 하며, 하나 이상의 선언문을 사용할 때는 세미콜론(;)으로 구분해 주어야 합니다. 아래는 다중 선언문의 예제입니다.

blockquote
 { font: bold 18pt "Times New Roman";
   background-color: whitesmoke;
margin: 1em; padding: 0.5em; }

선택자(Selectors)

자주 사용되는 CSS 선택자에는 다음과 같은 것이 있습니다. 자세한 정보는 CSS2 Specification을 참고하십시오.

타입 선택자(Type selectors) : HTML 요소에 스타일을 지정할 때 사용합니다.

h1 { font-size: 24pt; font-weight: bold }
ol { list-style: upper-roman }

조건 선택자(Descendant selectors) : 먼저 지정한 선택자(selector) 안에 나중에 지정한 선택자가 오는 경우에 적용할 스타일을 지정할 때 사용합니다. 다음 예제는 blockquote 안에 나오는 em 요소에만 적용됩니다.

blockquote em { font-style: normal }

클래스 선택자(Class selectors) : 지정한 클래스 속성의 값을 가진 모든 요소에 적용되는 스타일을 지정합니다.

p.foo { margin:1em; padding:5px }

ID 선택자 ((ID selectors) : 지정한 ID 속성값을 갖는 요소에 적용되는 스타일을 지정합니다.

#i8 { position: absolute;>
top: 10px; left: 15em }

그룹 선택자(Group selectors) : 한꺼번에 여러 선택자에 대해 스타일을 적용할 때 사용합니다. 쉼표(,)로 구분하여 선택자를 표기합니다.

h1, h2, h3 { font-family: sans-serif }

일반 선택자(universal selector) : 모든 요소에 적용되는 스타일을 지정할 때 사용합니다. *로 표시합니다.

* { border: thin solid red }

가상 클래스(Pseudo-class)와 가상 요소(pseudo-element) : HTML 요소가 아니지만 가상으로(pseudo) 요소인 것처럼 속성을 지정하는 것을 가리킵니다.

a:link    { color: blue }
a:active  { color: red }
a:visited { color: gray }

p.foo:first-line   { font-size: 133% }
p.foo:first-letter { font-size: 200% }

p.note:before { content: "NOTE: " }

.q:before { content: open-quote }
.q:after  { content: close-quote }

스타일 시트(Style Sheets)

스타일 시트란 여러 개의 스타일을 모아 놓은 것으로, HTML 문서에 스타일을 사용하는 방법에는 세 가지가 있습니다.

인라인 스타일(Inline style)을 적용하는 방법

예를 들어 <P> 태그 안에 다음과 같이 style 속성을 이용하여 인라인 스타일을 적용할 수 있습니다. 다음은 스타일을 이용하여 문단의 속성을 파란색 글자에 점선 테두리가 나타나도록 지정한 경우입니다.

<P style="color:blue; margin:1; border-width:1; border-color:blue;
border-style:dotted;">스타일 이용하기</P>

STYLE 요소를 사용하는 방법

스타일이 문서 전체에 적용되도록 하려면 <HEAD> 태그 안에 <STYLE>을 사용하여 스타일을 정의합니다. 이렇게 정의한 스타일은 해당 문서에서 <BODY>에 입력된 내용에 적용됩니다. .yellow는 클래스로 스타일을 정의한 것이고, #black은 ID로 정의한 것입니다. 클래스로 정의한 스타일은 문서 안에서 선택하여 반복적으로 사용할 수 있습니다.

<STYLE>
P { color:blue; }
H1 { color: red; }
H2 { color:
green; }
.yellow { color:yellow; }
#black { color:black;
}
</STYLE>

외부 스타일 시트 파일을 연결하는 방법

<STYLE> 요소로 정의한 내용을 별로의 파일로 저장하여 관리할 수 있습니다. 이때 파일의 확장자는 *.css를 사용하며 HTML 문서에 적용하려면 css 파일을 연결시켜야 합니다. 앞에서 사용한 스타일을 'mystyle.css' 라는 이름의 파일로 저장했을 경우, 'mystyle.css' 파일의 내용은 다음과 같습니다.

P { color:blue; }
H1 { color: red; }
H2 { color: green; }
.yellow {
color:yellow; }
#black { color:black; }

HTML 문서에는 다음과 같이 <HEAD> 태그 안에 스타일 시트 파일을 연결시킵니다.

<LINK rel="stylesheet" type="text/css" href="mystyle.css">


CSS 속성값 형식

Intergers/Real Numbers

정수와 실수는 십진수에서만 지정됩니다. 정수는 0에서 9까지의 숫자 중 하나 이상의 숫자로 구성된 수를 의미합니다. Number는 정수일 수도 있고 0 또는 소수점이 있는 실수일 수도 있습니다. 정수와 실수는 음수(-)가 될 수도 있고 양수(+)가 될 수도 있습니다.

Length

길이값은 '부호('+' 또는 '-') + number + 길이 단위('px', 'deg'...)'와 같은 형식으로 사용됩니다. 부호는 생략할 수 있으며 기본값은 '+'입니다. 길이값이 '0'인 경우에는 길이 단위를 생략할 수 있습니다.

길이에는 상대 길이(relative)와 절대 길이(absolute)의 두 가지 유형이 있습니다. 상대 길이는 다른 length 속성에 따른 상대적인 길이를 의미합니다. 스타일 시트에서 길이를 상대 길이로 정의하면 보다 쉽게 미디어 간의 수치를 측정할 수 있습니다.

상대 단위:

  • em: font-size에 대한 상대적인 크기
  • ex: 알파벳 소문자 x의 높이
  • px: 화면 해상도에 따른 상대적 크기

'em'은 사용되는 font-size를 참조합니다. 만약 font-size 속성에 'em' 단위가 사용된 경우에는 부모 요소의 글꼴 크기를 참조합니다.

'ex'는 알파벳 소문자 x의 높이를 말합니다. 흔히 'x-높이(x-height)'라고 부르지만 알파벳 x 뿐만 아니라 x를 포함하고 있지 않은 문자에도 해당됩니다.

픽셀 단위는 화면 해상도에 따른 상대적 크기입니다.

상대적인 값은 상속되지 않습니다. 반면에 상대적인 값에 근거한 "산술값"은 상속됩니다.
body { font-size: 12pt;
       text-indent: 3em; }
  h1 { font-size: 15pt }

위의 예에서 text-indent값은 font-size의 상대적인 크기로 계산되기 때문에 12pt의 3배 크기인 36pt가 됩니다. body 요소의 모든 자식 요소는 이러한 "산술값"을 상속하게 됩니다. 따라서 H1 요소의 text-indent 값은 15pt의 3배인 45pt가 아니라 상속한 "산술값"인 36pt가 됩니다.

절대 단위:

  • in: 인치
  • cm: 센티미터
  • mm: 밀리미터
  • pt: 포인트 (1/72 인치)
  • pc: 파이카 (12 포인트)

절대 단위는 사용자들이 추정할 수 없는 단위기 때문에 가능하면 사용하지 않는 것이 좋습니다.

Percentages

퍼센트값은 '부호('+' 또는 '-') + number + %'와 같은 형식으로 사용됩니다. 부호는 생략할 수 있으며 기본값은 '+'입니다.

퍼센트값은 항상 다른 값에 대한 상대적인 값을 나타냅니다. 퍼센트값을 사용하는 속성을 정의할 때에는 상대적으로 퍼센트값을 계산하기 위해 참조할 대상도 함께 정의해야 합니다. 참조할 대상은 같은 요소 안의 다른 속성값이나 부모 요소의 속성값, 또는 블록 요소의 너비와 같은 서식과 관련된 값일 수도 있습니다.

자식 요소는 부모 요소의 산술된 "산술값"을 상속합니다. 다음 예제의 경우, P 요소의 자식 요소는 line-height에 지정된 120%를 상속받지 않고 120%를 근거로 계산된 산술값인 12pt를 상속받습니다.

p { font-size: 10pt;
    line-height: 120% }

URLs

URL은 웹에서 리소스의 위치를 나타냅니다. URL을 사용하는 형식은 다음과 같습니다.

예제:

    body { background-image: url(/images/foo.gif) }
p.before { content: url("beep.wav") }
     img { cursor: url('http:www.namo.com/hand.cur') }

위의 예제와 같이 'url('의 뒤에 공백 문자를 넣거나 넣지 않을 수 있고 마지막 ')' 앞에 공백 문자를 넣을 수도 있고 생략할 수도 있습니다. 경로를 나타낸 부분은 작은 따옴표('')나 큰따옴표("")로 묶어줄 수도 있고 생략할 수도 있습니다.

Strings

스트링은 작은 따옴표('')나 큰따옴표("")로 묶어서 표현합니다. 큰따옴표("")는 다시 큰따옴표("") 안에 사용할 수 없으나 꼭 필요한 경우에는 다음 예제와 같이 사용할 수 있습니다.

예제:

"this is a 'string'"
"this is a \"string\""
'this is a "string"'
'this is a \'string\''

스트링 안에서는 줄바꾸기를 직접 할 수 없습니다. 줄바꾸기를 해야 하는 경우에는 "\A"를 사용합니다. A의 16진수값은 Unicode에서 줄바꾸기를 나타냅니다.

스트링을 여러 줄로 나누려면 백슬래쉬(\)로 표현해 주어야 합니다.

예제:

a[title="a not s\
o very long title"] {/*...*/}
a[title="a not so very long title"] {/*...*/}

Colors

색깔을 나타냅니다. 16진수로 된 RGB 코드값 또는 16가지의 기본 색깔 이름으로 표기되며, 16진수로 표기할 때는 "#" 문자를 앞에 표기해야 합니다.

각 색깔의 RGB 코드값은 다음과 같습니다.

Color Name | sRGB Value
Black | #000000
Silver | #C0C0C0
Gray | #808080
White | #FFFFFF
Maroon | #800000
Red | #FF0000
Purple | #800080
Fuchsia | #FF00FF
Green | #008000
Lime | #00FF00
Olive | #808000
Yellow | #FFFF00
Navy | #000080
Blue | #0000FF
Teal | #008080
Aqua | #00FFFF

다음 색깔은 사용자의 운영 체제에 정의된 색깔을 참조하는 것입니다. 아래와 같은 색깔을 사용하면 좀 더 다양하게 문서를 꾸밀 수 있습니다.

Color Name | Corresponding UI Element
ActiveBorder | 활성 창틀
ActiveCaption | 활성 제목 표시줄
AppWorkspace | 여러 문서 인터페이스의 배경
Background | 바탕 화면
ButtonFace | 3차원 개체 표면
ButtonHighlight | 3차원 개체의 어두운 그림자 부분
ButtonShadow | 3차원 개체의 그림자 부분
ButtonText | 버튼 텍스트
CaptionText | 캡션, 크기 상자, 이동줄 상자 크기
GrayText | 비활성 텍스트
Highlight | 컨트롤에서 선택된 항목
HighlightText | 컨트롤에서 선택된 항목의 텍스트
InactiveBorder | 비활성 창틀
InactiveCaption | 비활성 제목 표시줄
InactiveCaptionText | 비활성 제목 텍스트
InfoBackground | 도구 설명 배경
InfoText | 도구 설명 텍스트
Menu | 메뉴 배경
MenuText | 메뉴 텍스트
Scrollbar | 이동줄 회색 부분
ThreeDDarkShadow | 3차원 개체의 어두운 그림자 부분
ThreeDFace | 3차원 개체 표면
ThreeDHighlight | 3차원 개체의 강조 부분
ThreeDLightShadow | 3차원 개체의 밝은 부분
ThreeDShadow | 3차원 개체의 어두운 그림자 부분
Window | 창 배경
WindowFrame | 창틀
WindowText | 창의 텍스트

Counters

카운터는 식별자로 표시합니다. (counter-increment 및 counter-reset 속성 참조) 카운터값을 참조하려면 'counter(identifier)' 또는 'counter(identifier, list-style-type)'와 같이 표시합니다. 기본 스타일은 'decimal'입니다.

같은 이름의 중첩된 카운터를 순서대로 참조하려면 'counters(identifier, string)' 또는 'counters(identifier, string, list-style-type)'와 같이 표시합니다.

CSS2에서는 카운터값은 content 속성에서만 참조될 수 있습니다. list-style-type 값으로 'none'을 사용할 수도 있습니다. 예를 들어 'counter(x, none)'으로 정의한 경우에는 빈 스트링이 표시됩니다.

counter-reset 범위를 벗어나는 카운터는 0으로 지정된 것으로 간주합니다.


캐스케이딩 및 상속

CSS 의 두가지 특별한 기능은 캐스케이딩과 상속입니다.

상속

CSS 속성 중의 일부 값은 부모 요소에서 자식 요소로 대물림됩니다. 이것을 상속이라 합니다. 각 속성에는 상속여부가 정의되어 있습니다.

예를들어 BODY요소의 font-family를 "굴림"으로 지정하면 지정된 body 내의 모든 요소들의 텍스트는 "굴림" 폰트를 나타냅니다. 마찬가지로 DIV 요소에 적용된 모든 상속 스타일은 DIV 내의 모든 요소에 적용됩니다. 그러나 자식 속성에 부모의 속성과는 다른 값이 지정된 경우에는 자식 속성에 지정된 값이 사용되며 부모의 값은 무시됩니다.

퍼센트값은 상속되지 않습니다. 반면에 퍼센트값에 근거한 "산술값"은 상속됩니다.

      body { font-size: 10pt }
blockquote { font-size: 80%  }
<blockquote>This wine is <em>very</em> good.</blockquote>

위와 같이 지정된 경우, blockquote의 폰트 크기는 8pt입니다. 즉, blockquote 내의 <em> 요소에 의하여 상속되는 것은 8pt이지 80%가 아닙니다.

캐스케이딩

스타일 정의는 저자, 사용자, 웹 브라우저의 세가지를 기본으로 정의됩니다.

  • 저자: 저자는 HTML 문서 내부에 외부 스타일 시트를 연결할 수 있고 HTML 정의를 할 때 선언문을 사용할 수도 있습니다.
  • 사용자: 사용자는 웹 브라우저의 기능을 사용하여 스타일을 지정할 수 있습니다.
  • 웹 브라우저: 웹 브라우저는 기본 설정 스타일 시트를 가지고 있으며 스타일 정보가 새로 주어지지 않으면 기본 설정을 적용시킵니다.

서로 다르게 지정한 스타일 규칙들이 충돌할 경우를 대비하여 CSS 스펙에 어떻게 이러한 충돌을 해결하고 어떤 규칙을 먼저 적용할 것인지 정의하고 있습니다. 몇 가지 기준에따라 더 중요한 규칙이 결정됩니다. 규칙들이 서로 충돌할 경우에는 중요도가 가장 큰 규칙이 우선 적용됩니다.

우선권을 부여하는 기준은 아래와 같습니다:

  1. "!important" 키워드

    선언문의 끝에 "!important" 라는 키워드를 추가할 경우, 규칙은 중요도를 부여받습니다. 타 규칙들이 동등한 중요도를 갖고 있지 않는한 우선 적용됩니다.

  2. 출처

    저자의 규칙과 사용자의 규칙이 동등한 중요도를 가지고 있고, "!important" 라는 표시가 없으면 사용자의 규칙이 우선 적용됩니다. 저자의 규칙과 사용자의 규칙은 모두 웹 브라우저의 규칙보다 우선 적용됩니다.

  3. 명확도

    더 명확한 규칙(선택자가 더 많은 규칙)일수록 덜 명확한 규칙에 우선합니다. 중요도 순서에서 명확도는 다음과 같은 사항에 영향을 받습니다: (1) 선택자에 얼마나 많은 ID 이름이 있는가, (2) 선택자에 얼마나 많은 클래스 이름이 있는가, (3) 선택자에 얼마나 많은 요소 이름이 있는가. 아래의 예는 낮은 중요도에서 높은 중요도 순서로 배열되어 있습니다.

        *         { color: black }
    p         { color: gray }
div p         { color: yellow }
    p.foo     { color: green }
    p.foo.goo { color: blue }
div p.foo.goo { color: fuscia }
    p#bob     { color: red }

    위의 규칙을 적용할 경우, 어떤 단락이 "foo" 와 "goo" 라는 클래스에 속해 있으며 동시에 "bob"이라는 ID 이름을 가지고 있다면 그 단락은 빨간색으로 나타납니다.

  4. 순서

    두 개의 충돌하는 규칙들이 동일한 중요도를 가지고 있을 경우에는 스타일 시트의 마지막에 있는 규칙이 우선 적용됩니다. 하지만 외부 스타일 시트 규칙은 내부의 스타일 시트 규칙보다 앞에 있는 것으로 간주됩니다. 또한 스타일 선언문은 다른 모든 규칙보다 뒤에 있는 것으로 간주됩니다.


background

요소의 배경색, 배경 그림, 배경 그림의 위치 등을 지정할 때 사용합니다.

기본 정보

초기값 | 각 속성의 초기값
상속 | no
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
background-color background-image background-repeat background-attachment background-position | 요소의 배경색, 배경 그림, 배경 그림의 반복 여부, 스크롤 여부, 위치를 지정합니다. 원하는 속성값을 공백 문자로 구분하여 지정하며 생략된 속성은 기본값으로 표시됩니다. 각 속성의 속성값을 참고하십시오. | 4.0 | 6.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

예제 1
body { background: #FF0000 }
배경색을 빨간색(#FF0000)으로 지정한 예제입니다.

예제 2
body { background: url(flowers.gif) no-repeat top }
배경 그림을 "flowers.gif"로 지정하고 그림이 반복 없이 위쪽에 한 번 표시되도록 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 6
CSS | 1

참고

  • 넷스케이프 4.0에서는 background-attachment, background-position 속성이 지원되지 않습니다.


background-attachment

배경 그림의 스크롤 여부를 지정할 때 사용합니다.

기본 정보

초기값 | scroll
상속 | no
적용 범위 | 모든 요소

속성값

값 설명 IE NN
scroll
배경 그림을 내용과 함께 스크롤 되도록 지정합니다.

4.0 6.0
fixed
내용을 스크롤해도 배경 그림이 고정되도록 지정합니다.

4.0 6.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

body { background-image: url(flower.gif); background-attachment: scroll }
배경 그림 "flower.gif"가 내용과 함께 스크롤 되도록 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 6
CSS | 1

참고

  • 넷스케이프 4.x에서 background-attchment 속성은 BODY 요소에만 적용됩니다.
  • background 속성을 이용하면 배경 그림, 위치, 스크롤 여부 등을 한꺼번에 지정할 수 있습니다.


background-color

요소의 배경색을 지정할 때 사용합니다.

기본 정보

초기값 | transparent
상속 | no
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
color | 배경색을 색깔 이름(red, yellow 등)이나 RGB 코드값(#ff0000 또는 rgb(255,0,0))으로 지정합니다. | 4.0 | 4.0
transparent | 배경을 투명하게 표시합니다. | 4.0 | 4.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

body { background-color: blue }
문서의 배경색을 파란색으로 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 4
CSS | 1

참고

  • background 속성을 이용하면 배경 그림, 위치, 스크롤 여부 등을 한꺼번에 지정할 수 있습니다.
  • 사용자가 정의한 스타일 시트와 혼동되지 않게 하려면 background-color가 사용되는 경우에만 background-image를 지정하도록 합니다. 대부분의 경우에는 background-image:none을 사용하면 됩니다.


background-image

요소의 배경 그림을 지정할 때 사용합니다.

기본 정보

초기값 | none
상속 | no
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
url | 배경으로 사용할 그림의 URL을 지정합니다. | 4.0 | 4.0
none | 배경 그림을 지정하지 않습니다. | 4.0 | 4.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

body { background-image: url(flowers.gif);
       background-color: #000000 }
문서의 배경색을 검은색, 배경 그림을 "flowers.gif"로 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 4
CSS | 1

참고

  • 배경 그림을 다운로드 받을 수 없는 경우를 대비하여, 배경 그림과 함께 background-color 속성으로 배경색을 함께 지정하는 것이 좋습니다.
  • background 속성을 이용하면 배경 그림, 위치, 스크롤 여부 등을 한꺼번에 지정할 수 있습니다.


background-position

배경 그림의 시작 위치를 지정할 때 사용합니다.

기본 정보

초기값 | top left (0% 0%)
상속 | no
적용 범위 | 모든 요소

속성값

값 설명 IE NN
[top | center | bottom] ||
[left | center | right]
배경 그림의 시작 위치를 지정합니다. 수평 위치와 수직 위치를 나타내는 2개의 값을 공백으로 구분하여 지정합니다. 값을 1개만 지정하면 수직 위치는 center로 적용됩니다. 4.0 6.0
% %
배경 그림의 시작 위치를 퍼센트로 지정합니다. 값을 1개만 지정하면 수직 위치는 50%로 적용됩니다. 4.0 6.0
length length
배경 그림의 시작 위치를 절대 길이 또는 상대 길이 단위로 지정합니다. 퍼센트와 길이 단위를 혼합하여 지정할 수도 있습니다. 4.0 6.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

body
{
  background-image:url(water.gif);
  background-repeat:no-repeat;
  background-position:top center;
}

table
{
  background-image:url(sky.gif);
  background-repeat:no-repeat;
  background-position:10% 20%;
}

td
{
  background-image:url(wood.gif);
  background-repeat:no-repeat;
  background-position:10px 20px;
}

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 6
CSS | 1

참고

  • background 속성을 이용하면 배경 그림, 위치, 스크롤 여부 등을 한꺼번에 지정할 수 있습니다.


background-repeat

배경 그림의 반복 여부를 지정할 때 사용합니다. 배경 그림이 적용할 요소에 비해 작은 경우에 유용하게 사용할 수 있습니다.

기본 정보

초기값 | repeat
상속 | no
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
repeat | 배경 그림을 가로, 세로로 반복합니다. | 4.0 | 4.0
repeat-x | 배경 그림을 가로로 반복합니다. | 4.0 | 4.0
repeat-y | 배경 그림을 세로로 반복합니다. | 4.0 | 4.0
no-repeat | 배경 그림을 반복하여 표시하지 않습니다. | 4.0 | 4.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

body { background-image: url(flowers.gif);
       background-color: #000000;
       background-repeat: repeat-x }
문서의 배경색을 검은색, 배경 그림을 "flowers.gif", 배경 그림이 가로로 반복되도록 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 4
CSS | 1

참고

  • background-position 속성을 이용하면 배경 그림이 반복해서 표시되는 시작 위치를 지정할 수 있습니다.
  • background 속성을 이용하면 배경 그림, 위치, 스크롤 여부 등을 한꺼번에 지정할 수 있습니다.


border

요소의 테두리 두께, 모양, 색깔을 지정할 때 사용합니다.

기본 정보

초기값 | 각 속성의 기본값
상속 | no
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
border-width border-style border-color | 테두리 속성을 지정합니다. 두께, 모양, 색깔 속성값을 공백 문자로 구분하여 지정합니다. 속성값의 순서를 바꾸거나 생략할 수 있습니다. 각 속성의 속성값을 참고하십시오. | 4.0 | 4.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

table { border: 2px dashed green}
테두리를 2픽셀, 점, 녹색으로 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 4
CSS | 1

참고

  • 인터넷 익스플로러 5.5 이상에서는 border 속성을 인라인 요소(Inline Element)에도 적용할 수 있습니다.


border-bottom

요소의 아래쪽 테두리 두께, 모양, 색깔을 지정할 때 사용합니다.

기본 정보

초기값 | 각 속성의 초기값
상속 | no
적용 범위 | 모든 요소, 블록 요소(IE)

속성값

값 | 설명 | IE | NN
border-bottom-width border-bottom-style border-bottom-color | 아래쪽 테두리 속성을 지정합니다. 두께, 모양, 색깔 중 원하는 속성값을 공백 문자로 구분하여 지정합니다. 각 속성의 속성값을 참고하십시오. | 4.0 | 6.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

table { border-bottom: 5px double red }
오른쪽 테두리를 5픽셀, 두 줄, 빨간색으로 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 6
CSS | 1

참고

  • 위, 아래, 오른쪽, 왼쪽 테두리 전체의 두께, 모양, 색깔을 동일하게 지정하려면 border 속성을 이용할 수 있습니다.
  • 인터넷 익스플로러 4.0 및 5.0에서는 이 속성을 인라인 요소(Inline Element)에 적용할 수 없습니다.


border-bottom-color

요소의 아래쪽 테두리 색깔을 지정할 때 사용합니다.

기본 정보

초기값 | 요소의 color 속성값
상속 | no
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
color | 색깔을 색깔 이름(red, yellow 등)이나 RGB 코드값(#ff0000 또는 rgb(255,0,0))으로 지정합니다. | 4.0 | 6.0
transparent | 테두리 색깔을 투명하게 만듭니다. 이 경우 지정한 두께만큼 테두리를 투명하게 만드는 것으로서 테두리 두께가 0인 것과는 다릅니다. | 6.0 | 7.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

div { border-bottom-color: blue }
아래쪽 테두리를 파란색으로 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 6
CSS | 2

참고

  • 인터넷 익스플로러 5.5 이상에서는 border-bottom-color 속성을 인라인 요소(Inline Element)에도 적용할 수 있습니다. 이전 버전의 인터넷 익스플로러에서 이 속성을 인라인 요소에 적용하려면 인라인 요소는 절대 좌표값 (Absolute position)을 가지고 있어야 합니다.
  • border-color 속성을 이용하면 테두리 색깔을 한꺼번에 지정할 수 있습니다.


border-bottom-style

요소의 아래쪽 테두리 모양을 지정할 때 사용합니다.

기본 정보

초기값 | none
상속 | no
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
none | 테두리를 표시하지 않습니다. | 4.0 | 6.0
hidden | 테두리를 숨깁니다. CSS2에서 추가된 항목입니다. | - | 6.0
dotted | 테두리를 점으로 표시합니다. | 5.5 | 6.0
dashed | 테두리를 점선으로 표시합니다. | 5.5 | 6.0
solid | 테두리를 실선으로 표시합니다. | 4.0 | 6.0
double | 테두리를 두 줄로 표시합니다. | 4.0 | 6.0
groove | 테두리를 오른쪽 아래에서 빛을 받은 액자 모양으로 표시합니다. | 4.0 | 6.0
ridge | 테두리를 왼쪽 위에서 빛을 받은 액자 모양으로 표시합니다. | 4.0 | 6.0
outset | 테두리를 속으로 움푹 파인 모양으로 표시합니다. | 4.0 | 6.0
inset | 테두리를 밖으로 불쑥 튀어 나온 모양으로 표시합니다. | 4.0 | 6.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

table { border-bottom-style: dashed }
아래쪽 테두리를 점선으로 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 6
CSS | 2

참고

  • border-style 속성을 이용하면 테두리 모양을 한꺼번에 지정할 수 있습니다.
  • 일부 브라우저에서는 border-style 속성을 먼저 지정했을 때에만 border-bottom-style 속성이 적용됩니다.
  • 인터넷 익스플로러 5.5 이상에서는 border-bottom-style 속성을 인라인 요소(Inline Element)에도 적용할 수 있습니다. 이전 버전의 인터넷 익스플로러에서 이 속성을 인라인 요소에 적용하려면 인라인 요소는 절대 좌표값(Absolute position)을 가지고 있어야 합니다.


border-bottom-width

요소의 아래쪽 테두리 두께를 지정할 때 사용합니다.

기본 정보

초기값 | medium(IE), 0px(NN)
상속 | no
적용 범위 | 모든 요소(CSS, NN), 블록 요소(IE)

속성값

값 | 설명 | IE | NN
thin medium thick | 두께를 나타내는 키워드입니다. 브라우저에 따라 조금씩 다르게 표시됩니다. | 4.0 | 4.0
length | 절대 길이 단위 또는 상대 길이 단위로 지정합니다. | 4.0 | 4.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

table { border-bottom-width: 5px }
아래쪽 테두리의 두께를 5픽셀로 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 4
CSS | 1

참고

  • border-width 속성을 이용하면 테두리 두께를 동일하게 한꺼번에 지정할 수 있습니다.
  • 일부 브라우저에서는 border-style 속성을 먼저 지정했을 때에만 border-bottom-width 속성이 적용됩니다.
  • 인터넷 익스플로러 4.0 및 5.0에서는 이 속성을 인라인 요소(Inline Element)에 적용할 수 없습니다.


border-color

요소의 테두리 색깔을 지정할 때 사용합니다. 위, 아래, 오른쪽, 왼쪽 테두리를 동일하게 혹은 서로 다르게 지정할 수 있습니다. 값을 4개까지 지정할 수 있습니다.

  • 1개 지정 : 테두리 전체에 동일하게 적용됨.
  • 2개 지정 : 첫 번째 값은 상하, 두 번째 값은 좌우 테두리에 적용됨.
  • 3개 지정 : 첫 번째 값은 위, 두 번째 값은 좌우, 세 번째 값은 아래 테두리에 적용됨.
  • 4개 지정 : 위쪽 테두리부터 시계 방향으로 적용됨.

기본 정보

초기값 | 요소의 color 속성값
상속 | no
적용 범위 | 모든 요소(CSS, NN), 블록 요소(IE)

속성값

값 | 설명 | IE | NN
color | 색깔을 색깔 이름(red, yellow 등)이나 RGB 코드값(#ff0000 또는 rgb(255,0,0))으로 지정합니다. | 4.0 | 4.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

예제 1
div { border-color: gray }
테두리 전체를 회색으로 지정한 예제입니다.

예제 2
div { border-color: #0000ff #00ff00 }
상하 테두리를 파란색, 좌우 테두리를 녹색으로 지정한 예제입니다.

예제 3
div { border-color: yellow green blue }
위쪽 테두리를 노란색, 좌우 테두리를 녹색, 아래쪽 테두리를 파란색으로 지정한 예제입니다.

예제 4
div { border-color: yellow green blue red }
위쪽 테두리를 노란색, 오른쪽 테두리를 녹색, 아래쪽 테두리를 파란색, 왼쪽 테두리를 빨간색으로 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 4
CSS | 1

참고

  • 넷스케이프에서는 border-color 속성값으로 1개만 지정할 수 있습니다.
  • 인터넷 익스플로러 5.5 이상에서는 border-color 속성을 인라인 요소(Inline Element)에도 적용할 수 있습니다. 이전 버전의 인터넷 익스플로러에서 이 속성을 인라인 요소에 적용하려면 인라인 요소는 절대 좌표값 (Absolute position)을 가지고 있어야 합니다.


border-left

요소의 왼쪽 테두리 두께, 모양, 색깔을 지정할 때 사용합니다.

기본 정보

초기값 | 각 속성의 초기값
상속 | no
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
border-bottom-width border-style color | 왼쪽 테두리 속성을 지정합니다. 두께, 모양, 색깔 중 원하는 속성값을 공백 문자로 구분하여 지정합니다. 각 속성의 속성값을 참고하십시오. | 4.0 | 6.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

table { border-left: 5px double red }
왼쪽 테두리를 5픽셀, 두 줄, 빨간색으로 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 6
CSS | 1

참고

  • 위, 아래, 오른쪽, 왼쪽 테두리 전체의 두께, 모양, 색깔을 동일하게 지정하려면 border 속성을 이용할 수 있습니다.


border-left-color

요소의 왼쪽 테두리 색깔을 지정할 때 사용합니다.

기본 정보

초기값 | 요소의 color 속성값
상속 | no
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
color | 색깔을 색깔 이름(red, yellow 등)이나 RGB 코드값(#ff0000 또는 rgb(255,0,0))으로 지정합니다. | 4.0 | 6.0
transparent | 테두리 색깔을 투명하게 만듭니다. 이 경우 지정한 두께만큼 테두리를 투명하게 만드는 것으로서 테두리 두께가 0인 것과는 다릅니다. | 6.0 | 7.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

div { border-left-color: blue }
왼쪽 테두리를 파란색으로 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 6
CSS | 2

참고

  • 인터넷 익스플로러 5.5 이상에서는 border-left-color 속성을 인라인 요소(Inline Element)에도 적용할 수 있습니다.
  • border-color 속성을 이용하면 테두리 색깔을 한꺼번에 지정할 수 있습니다.


border-left-style

요소의 왼쪽 테두리 모양을 지정할 때 사용합니다.

기본 정보

초기값 | none
상속 | no
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
none | 테두리를 표시하지 않습니다. | 4.0 | 6.0
hidden | 테두리를 숨깁니다. CSS2에서 추가된 항목입니다. | - | 6.0
dotted | 테두리를 점으로 표시합니다. | 5.5 | 6.0
dashed | 테두리를 점선으로 표시합니다. | 5.5 | 6.0
solid | 테두리를 실선으로 표시합니다. | 4.0 | 6.0
double | 테두리를 두 줄로 표시합니다. | 4.0 | 6.0
groove | 테두리를 오른쪽 아래에서 빛을 받은 액자 모양으로 표시합니다. | 4.0 | 6.0
ridge | 테두리를 왼쪽 위에서 빛을 받은 액자 모양으로 표시합니다. | 4.0 | 6.0
outset | 테두리를 속으로 움푹 파인 모양으로 표시합니다. | 4.0 | 6.0
inset | 테두리를 밖으로 불쑥 튀어 나온 모양으로 표시합니다. | 4.0 | 6.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

table { border-left-style: dashed }
왼쪽 테두리를 점선으로 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 6
CSS | 2

참고

  • border-style 속성을 이용하면 테두리 모양을 한꺼번에 지정할 수 있습니다.
  • 일부 브라우저에서는 border-style 속성을 먼저 지정했을 때에만 border-left-style 속성이 적용됩니다.


border-left-width

요소의 왼쪽 테두리 두께를 지정할 때 사용합니다.

기본 정보

초기값 | medium(IE), 0px(NN)
상속 | no
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
thin medium thick | 두께를 나타내는 키워드입니다. 브라우저에 따라 조금씩 다르게 표시됩니다. | 4.0 | 4.0
length | 절대 길이 단위 또는 상대 길이 단위로 지정합니다. | 4.0 | 4.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

table { border-left-width: 5px }
왼쪽 테두리의 두께를 5픽셀로 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 4
CSS | 1

참고

  • border-width 속성을 이용하면 테두리 두께를 동일하게 한꺼번에 지정할 수 있습니다.
  • 일부 브라우저에서는 border-style 속성을 먼저 지정했을 때에만 border-left-width 속성이 적용됩니다.


border-right

요소의 오른쪽 테두리 두께, 모양, 색깔을 지정할 때 사용합니다.

기본 정보

초기값 | 각 속성의 초기값
상속 | no
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
border-bottom-width border-style color | 오른쪽 테두리 속성을 지정합니다. 두께, 모양, 색깔 중 원하는 속성값을 공백 문자로 구분하여 지정합니다. 각 속성의 속성값을 참고하십시오. | 4.0 | 6.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

table { border-right: 2px dashed green }
오른쪽 테두리를 2픽셀, 점선, 녹색으로 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 6
CSS | 1

참고

  • 위, 아래, 오른쪽, 왼쪽 테두리 전체의 두께, 모양, 색깔을 동일하게 지정하려면 border 속성을 이용할 수 있습니다.


border-right-color

요소의 오른쪽 테두리 색깔을 지정할 때 사용합니다.

기본 정보

초기값 | 요소의 color 속성값
상속 | no
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
color | 색깔을 색깔 이름(red, yellow 등)이나 RGB 코드값(#ff0000 또는 rgb(255,0,0))으로 지정합니다. | 4.0 | 6.0
transparent | 테두리 색깔을 투명하게 만듭니다. 이 경우 지정한 두께만큼 테두리를 투명하게 만드는 것으로서 테두리 두께가 0인 것과는 다릅니다. | 6.0 | 7.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

div { border-right-color: blue }
오른쪽 테두리를 파란색으로 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 6
CSS | 2

참고

  • 인터넷 익스플로러 5.5 이상에서는 border-right-color 속성을 인라인 요소(Inline Element)에도 적용할 수 있습니다.
  • border-color 속성을 이용하면 테두리 색깔을 한꺼번에 지정할 수 있습니다.


border-right-style

요소의 오른쪽 테두리 모양을 지정할 때 사용합니다.

기본 정보

초기값 | none
상속 | no
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
none | 테두리를 표시하지 않습니다. | 4.0 | 6.0
hidden | 테두리를 숨깁니다. CSS2에서 추가된 항목입니다. | - | 6.0
dotted | 테두리를 점으로 표시합니다. | 5.5 | 6.0
dashed | 테두리를 점선으로 표시합니다. | 5.5 | 6.0
solid | 테두리를 실선으로 표시합니다. | 4.0 | 6.0
double | 테두리를 두 줄로 표시합니다. | 4.0 | 6.0
groove | 테두리를 오른쪽 아래에서 빛을 받은 액자 모양으로 표시합니다. | 4.0 | 6.0
ridge | 테두리를 왼쪽 위에서 빛을 받은 액자 모양으로 표시합니다. | 4.0 | 6.0
outset | 테두리를 속으로 움푹 파인 모양으로 표시합니다. | 4.0 | 6.0
inset | 테두리를 밖으로 불쑥 튀어 나온 모양으로 표시합니다. | 4.0 | 6.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

table { border-right-style: dashed }
오른쪽 테두리를 점선으로 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 6
CSS | 2

참고

  • border-style 속성을 이용하면 테두리 모양을 한꺼번에 지정할 수 있습니다.
  • 일부 브라우저에서는 border-style 속성을 먼저 지정했을 때에만 border-right-style 속성이 적용됩니다.


border-right-width

요소의 오른쪽 테두리 두께를 지정할 때 사용합니다.

기본 정보

초기값 | medium(IE), 0px(NN)
상속 | no
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
thin medium thick | 두께를 나타내는 키워드입니다. 브라우저에 따라 조금씩 다르게 표시됩니다. | 4.0 | 4.0
length | 절대 길이 단위 또는 상대 길이 단위로 지정합니다. | 4.0 | 4.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

table { border-right-width: 5px }
왼쪽 테두리의 두께를 5픽셀로 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 4
CSS | 1

참고

  • border-width 속성을 이용하면 테두리 두께를 동일하게 한꺼번에 지정할 수 있습니다.
  • 일부 브라우저에서는 border-style 속성을 먼저 지정했을 때에만 border-right-width 속성이 적용됩니다.


border-style

요소의 테두리 모양을 지정할 때 사용합니다. 위, 아래, 오른쪽, 왼쪽 테두리를 동일하게 혹은 서로 다르게 지정할 수 있습니다. 값을 4개까지 지정할 수 있습니다.

  • 1개 지정 : 테두리 전체에 동일하게 적용됨.
  • 2개 지정 : 첫 번째 값은 상하, 두 번째 값은 좌우 테두리에 적용됨.
  • 3개 지정 : 첫 번째 값은 위, 두 번째 값은 좌우, 세 번째 값은 아래 테두리에 적용됨.
  • 4개 지정 : 위쪽 테두리부터 시계 방향으로 적용됨.

기본 정보

초기값 | none
상속 | no
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
none | 테두리를 표시하지 않습니다. | 4.0 | 6.0
hidden | 테두리를 숨깁니다. CSS2에서 추가된 항목입니다. | - | 6.0
dotted | 테두리를 점으로 표시합니다. | 5.5 | 6.0
dashed | 테두리를 점선으로 표시합니다. | 5.5 | 6.0
solid | 테두리를 실선으로 표시합니다. | 4.0 | 6.0
double | 테두리를 두 줄로 표시합니다. | 4.0 | 6.0
groove | 테두리를 오른쪽 아래에서 빛을 받은 액자 모양으로 표시합니다. | 4.0 | 6.0
ridge | 테두리를 왼쪽 위에서 빛을 받은 액자 모양으로 표시합니다. | 4.0 | 6.0
outset | 테두리를 속으로 움푹 파인 모양으로 표시합니다. | 4.0 | 6.0
inset | 테두리를 밖으로 불쑥 튀어 나온 모양으로 표시합니다. | 4.0 | 6.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

예제 1
table { border-style: dashed }
테두리 전체를 점선으로 지정한 예제입니다.

예제 2
table { border-style: dashed solid }
상하 테두리를 점선, 좌우 테두리를 실선으로 지정한 예제입니다.

예제 3
table { border-style: dashed solid double }
위쪽 테두리를 점선, 좌우 테두리를 실선, 아래쪽 테두리를 두 줄로 지정한 예제입니다.

예제 4
table { border-style: dashed solid double dotted }
위쪽 테두리를 점선, 오른쪽 테두리를 실선, 아래쪽 테두리를 두 줄, 왼쪽 테두리를 점으로 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 6
CSS | 1

참고

  • 넷스케이프에서는 border-style 속성값으로 1개만 지정할 수 있습니다.
  • 인터넷 익스플로러 5.5 이상에서는 border-style 속성을 인라인 요소(Inline Element)에도 적용할 수 있습니다.


border-top

요소의 위쪽 테두리 두께, 모양, 색깔을 지정할 때 사용합니다.

기본 정보

초기값 | 각 속성의 초기값
상속 | no
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
border-bottom-width border-style color | 위쪽 테두리 속성을 지정합니다. 두께, 모양, 색깔 중 원하는 속성값을 공백 문자로 구분하여 지정합니다. 각 속성의 속성값을 참고하십시오. | 4.0 | 6.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

table { border-top: 2px dotted blue}
위쪽 테두리를 2픽셀, 점, 파란색으로 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 6
CSS | 1

참고

  • 위, 아래, 오른쪽, 왼쪽 테두리 전체의 두께, 모양, 색깔을 동일하게 지정하려면 border 속성을 이용할 수 있습니다.


border-top-color

요소의 위쪽 테두리 색깔을 지정할 때 사용합니다.

기본 정보

초기값 | 요소의 color 속성값
상속 | no
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
color | 색깔을 색깔 이름(red, yellow 등)이나 RGB 코드값(#ff0000 또는 rgb(255,0,0))으로 지정합니다. | 4.0 | 6.0
transparent | 테두리 색깔을 투명하게 만듭니다. 이 경우 지정한 두께만큼 테두리를 투명하게 만드는 것으로서 테두리 두께가 0인 것과는 다릅니다. | 6.0 | 7.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

div { border-top-color: blue }
위쪽 테두리를 파란색으로 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 6
CSS | 2

참고

  • 인터넷 익스플로러 5.5 이상에서는 border-top-color 속성을 인라인 요소(Inline Element)에도 적용할 수 있습니다.
  • border-color 속성을 이용하면 테두리 색깔을 한꺼번에 지정할 수 있습니다.


border-top-style

요소의 위쪽 테두리 모양을 지정할 때 사용합니다.

기본 정보

초기값 | none
상속 | no
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
none | 테두리를 표시하지 않습니다. | 4.0 | 6.0
hidden | 테두리를 숨깁니다. CSS2에서 추가된 항목입니다. | - | 6.0
dotted | 테두리를 점으로 표시합니다. | 5.5 | 6.0
dashed | 테두리를 점선으로 표시합니다. | 5.5 | 6.0
solid | 테두리를 실선으로 표시합니다. | 4.0 | 6.0
double | 테두리를 두 줄로 표시합니다. | 4.0 | 6.0
groove | 테두리를 오른쪽 아래에서 빛을 받은 액자 모양으로 표시합니다. | 4.0 | 6.0
ridge | 테두리를 왼쪽 위에서 빛을 받은 액자 모양으로 표시합니다. | 4.0 | 6.0
outset | 테두리를 속으로 움푹 파인 모양으로 표시합니다. | 4.0 | 6.0
inset | 테두리를 밖으로 불쑥 튀어 나온 모양으로 표시합니다. | 4.0 | 6.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

table { border-top-style: dashed }
위쪽 테두리를 점선으로 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 4
CSS | 2

참고

  • border-style 속성을 이용하면 테두리 모양을 한꺼번에 지정할 수 있습니다.
  • 일부 브라우저에서는 border-style 속성을 먼저 지정했을 때에만 border-top-style 속성이 적용됩니다.


border-top-width

요소의 위쪽 테두리 두께를 지정할 때 사용합니다.

기본 정보

초기값 | medium(IE), 0px(NN)
상속 | no
적용 범위 | 모든 요소(CSS, NN), 블록 요소(IE)

속성값

값 | 설명 | IE | NN
thin medium thick | 두께를 나타내는 키워드입니다. 브라우저에 따라 조금씩 다르게 표시됩니다. | 4.0 | 4.0
length | 절대 길이 단위 또는 상대 길이 단위로 지정합니다. | 4.0 | 4.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

table { border-top-width: 5px }
왼쪽 테두리의 두께를 5픽셀로 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 4
CSS | 1

참고

  • border-width 속성을 이용하면 테두리 두께를 동일하게 한꺼번에 지정할 수 있습니다.
  • 일부 브라우저에서는 border-style 속성을 먼저 지정했을 때에만 border-top-width 속성이 적용됩니다.


border-width

요소의 테두리 두께를 지정할 때 사용합니다. 위, 아래, 오른쪽, 왼쪽 테두리를 동일하게 혹은 서로 다르게 지정할 수 있습니다. 값을 4개까지 지정할 수 있습니다.

  • 1개 지정 : 테두리 전체에 동일하게 적용됨.
  • 2개 지정 : 첫 번째 값은 상하, 두 번째 값은 좌우 테두리에 적용됨.
  • 3개 지정 : 첫 번째 값은 위, 두 번째 값은 좌우, 세 번째 값은 아래 테두리에 적용됨.
  • 4개 지정 : 위쪽 테두리부터 시계 방향으로 적용됨.

기본 정보

초기값 | medium(IE), 0px(NN)
상속 | no
적용 범위 | 모든 요소(CSS, NN), 블록 요소( IE)

속성값

값 | 설명 | IE | NN
thin medium thick | 두께를 나타내는 키워드입니다. | 4.0 | 4.0
length | 절대 길이 단위 또는 상대 길이 단위로 지정합니다. | 4.0 | 4.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

예제 1
table { border-width: 5px }
테두리 전체를 5픽셀로 지정한 예제입니다.

예제 2
table { border-width: 5px 10px }
상하 테두리를 5픽셀, 좌우 테두리를 10픽셀로 지정한 예제입니다.

예제 3
table { border-width: 5px 10px 1px }
위쪽 테두리를 5픽셀, 좌우 테두리를 10픽셀, 아래쪽 테두리를 1픽셀로 지정한 예제입니다.

예제 4
table { border-width: 5px 10px 1px 3px }
위쪽 테두리를 5픽셀, 오른쪽 테두리를 10픽셀, 아래쪽 테두리를 1픽셀, 왼쪽 테두리를 3픽셀로 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 4
CSS | 1

참고

  • 인터넷 익스플로러에서는 border-style 속성을 먼저 지정했을 때에만 border-width 속성이 적용됩니다.
  • 인터넷 익스플로러 5.5 이상에서는 border-width 속성을 인라인 요소(Inline Element)에도 적용할 수 있습니다.
  • 넷스케이프에서는 border-width 속성값으로 1개만 지정할 수 있습니다.


clear

float 속성으로 좌우측에 정렬된 요소가 있을 때의 처리 방식을 지정합니다.

기본 정보

초기값 | none
상속 | no
적용 범위 | 블록 요소

속성값

값 | 설명 | IE | NN
left | 떠있는(floating) 요소가 왼쪽에 위치할 수 없도록 지정합니다. 따라서 요소가 새로운 줄에서 시작됩니다. | 4.0 | 4.0
right | 떠있는(floating) 요소가 오른쪽에 위치할 수 없도록 지정합니다. 따라서 요소가 새로운 줄에서 시작됩니다. | 4.0 | 4.0
both | 떠있는(floating) 요소가 왼쪽과 오른쪽에 위치할 수 없도록 지정합니다. 따라서 요소가 새로운 줄에서 시작됩니다. | 4.0 | 4.0
none | 떠있는(floating) 요소가 왼쪽과 오른쪽에 위치할 수 있습니다. | 4.0 | 4.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

H3 { clear: right }
ADDRESS { clear: both }
clear:none | clear:left
나모 웹에디터 6 편리하고 직관적인 편집 환경, 지능적인 사이트 구축과 관리, 정밀하고 효과적인 디자인 환경을 제공합니다. | 나모 웹에디터 6 편리하고 직관적인 편집 환경, 지능적인 사이트 구축과 관리, 정밀하고 효과적인 디자인 환경을 제공합니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 4
CSS | 1

참고

  • clear 속성이 float 속성과 함께 사용될 경우에는 의도한 대로 표시되지 않을 수 있습니다.인터넷 익스플로러 5 이상에서는 속성값을 퍼센트(%)로 지정할 수 있습니다.


cursor

요소 위에 마우스 포인터를 올려 놓았을 때 표시할 마우스 포인터의 모양을 지정합니다.

기본 정보

초기값 | auto
상속 | yes
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
URL | 사용자 정의 커서 파일이 있는 URL을 지정합니다. | - | 6.0
default | 화살표 모양의 기본 형태로 표시합니다. | 4.0 | 6.0
auto | 브라우저의 설정값에 따릅니다. | 4.0 | 6.0
crosshair | 십자가 모양으로 표시합니다. | 4.0 | 6.0
pointer | 링크를 나타내는 손 모양으로 표시합니다. | - | 6.0
move | 이동시킬 때 나타나는 모양으로 표시합니다. | 4.0 | 6.0
e-resize | 오른쪽 경계선 크기 조절을 나타내는 모양으로 표시합니다. | 4.0 | 6.0
ne-resize | 오른쪽 위 모서리를 이동하여 크기를 조절할 때 나타나는 모양으로 표시합니다. | 4.0 | 6.0
nw-resize | 왼쪽 위 모서리를 이동하여 크기를 조절할 때 나타나는 모양으로 표시합니다. | 4.0 | 6.0
n-resize | 위쪽 경계선 크기 조절을 나타내는 모양으로 표시합니다. | 4.0 | 6.0
se-resize | 오른쪽 아래 모서리를 이동하여 크기를 조절할 때 나타나는 모양으로 표시합니다. | 4.0 | 6.0
sw-resize | 왼쪽 아래 모서리를 이동하여 크기를 조절할 때 나타나는 모양으로 표시합니다. | 4.0 | 6.0
s-resize | 아래쪽 경계선 크기 조절을 나타내는 모양으로 표시합니다. | 4.0 | 6.0
w-resize | 왼쪽 경계선 크기 조절을 나타내는 모양으로 표시합니다. | 4.0 | 6.0
text | 글자를 가리키는 형태로 표시합니다. | 4.0 | 6.0
wait | 프로그램이 실행 중임을 나타내는 모양(보통 모래 시계)으로 표시합니다. | 4.0 | 6.0
help | 도움말을 가리키는 물음표나 풍선 모양으로 표시합니다. | 4.0 | 6.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

예제 1
H3 { cursor: crosshair }
ADDRESS { cursor : url("mycursor1.cur"), url("mycursor2.cur"), pointer }

예제 2
<P style="cursor: crosshair">마우스 포인터를 글자 위에 올려 놓으면 십자가 모양으로 바뀝니다.</P>

마우스 포인터를 글자 위에 올려 놓으면 십자가 모양으로 바뀝니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 6
CSS | 2

참고

  • cursor 속성값으로 URL을 지정할 때는, 지정한 파일을 사용할 수 없을 때 대체 사용할 커서 타입을 끝에 명시해 주어야 합니다.


display

요소의 기본 표시 형태를 지정할 때 사용합니다.

기본 정보

초기값 | inline
상속 | no
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
none | 요소를 표시하지 않습니다. | 4.0 | 4.0
inline | 인라인 요소로 표시합니다. 닫는 태그 뒤에 줄바꿈이 되지 않습니다. | 5.0 | 7.0
block | 블록 요소로 표시합니다. 닫는 태그 뒤에 줄바꿈이 됩니다. | 5.0 | 4.0
list-item | 목록으로 표시합니다. | 6.0 | 4.0
run-in | display 속성값이 run-in으로 지정된 요소의 다음 요소가 블록 요소라도 줄바꿈을 하지 않습니다. | - | -
compact | display 속성값이 compact로 지정된 요소의 다음 요소가 블록 요소라도 줄바꿈을 하지 않습니다. | - | -
marker | 요소의 내용 중 일부를 마커로 사용합니다. | 6.0 | 7.0
table | 표로 표시합니다. 표 뒤에 줄바꿈이 생깁니다. | - | 7.0
inline-table | 표를 인라인 요소처럼 표시합니다. 표 뒤에 줄바꿈이 생기지 않습니다. | - | 7.0
table-row-group | TBODY 요소와 같이 표의 가로줄 그룹으로 표시합니다. | - | 7.0
table-header-group | THEAD 요소처럼 표시합니다. | - | 7.0
table-footer-group | TFOOT 요소처럼 표시합니다. | - | 7.0
table-row | TR 요소처럼 표의 가로줄로 표시합니다. | - | 7.0
table-column-group | COLGROUP 요소처럼 표의 세로줄 그룹으로 표시합니다. | - | -
table-column | COL 요소처럼 표의 세로줄로 표시합니다. | - | -
table-cell | TD 또는 TH 요소처럼 표의 셀로 표시합니다. | - | 7.0
table-caption | CAPTION 요소처럼 표의 캡션으로 표시합니다. | - | 7.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

P { display: block }
LI { display: list-item }
COL { display: table-column }

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 4
CSS | 1

참고

  • display 속성값을 none으로 지정했을 경우, visibility 속성을 hidden으로 지정했을 때와 달리 요소가 차지하는 공간도 표시하지 않습니다.인터넷 익스플로러에서는 block을 display 속성의 초기값으로 사용하는 경우가 많습니다.
  • 넷스케이프 7.0에서는 table-column과 table-column-group 속성값을 지원하지 않습니다.


float

요소를 떠있는 형태로 왼쪽 또는 오른쪽에 정렬시킬 때 사용합니다. float 속성은 모든 요소에 적용된다는 점을 제외하면 HTML에서 그림의 align 속성과 그 기능이 같습니다.

기본 정보

초기값 | none
상속 | no
적용 범위 | position 속성을 사용하지 않은 모든 요소

속성값

값 | 설명 | IE | NN
none | 요소를 떠있는(floating) 형태로 표시하지 않습니다. | 4.0 | 4.0
left | 요소를 떠있는(floating) 형태로 왼쪽 정렬시킵니다. | 4.0 | 4.0
right | 요소를 떠있는(floating) 형태로 오른쪽 정렬시킵니다. | 4.0 | 4.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

<p>나모 웹에디터 6은 편리하고 직관적인 편집 환경뿐만 아니라
<span style="float:left;
             width=100px;
             color:red;
             text-align:left;">
파워 업그레이드 나모 웹에디터 6</span>
지능적인 사이트 구축과 관리,
정말하고 효과적인 디자인 환경을 제공합니다.</p>

나모 웹에디터 6은 편리하고 직관적인 편집 환경뿐만 아니라 파워 업그레이드 나모 웹에디터 6 지능적인 사이트 구축과 관리, 정말하고 효과적인 디자인 환경을 제공합니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 4
CSS | 1

참고

  • 넷스케이프 4.x에서는 float 속성이 인라인 요소, 표, 목록에 적용되지 않습니다.
  • 인터넷 익스플로러 5.0에서는 float 속성이 인라인 요소, 목록에 적용됩니다.
  • 인터넷 익스플로러에서는 float 속성을 적용하면, 요소에 지정된 position 속성을 무시합니다.


position

요소의 위치를 지정할 때 사용합니다.

기본 정보

초기값 | static
상속 | no
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
static | 특정 좌표를 지정하지 않습니다. 일반 위치에 표시됩다. | 4.0 | 4.0
relative | 부모 요소를 기준으로 상태 위치로 지정합니다. | 4.0 | 4.0
absolute | 절대 위치로 지정합니다. 웹 브라우저의 왼쪽 위를 기준으로 합니다. | 4.0 | 4.0
fixed | static과 비슷하나 스크롤해도 위치가 고정되지 않습니다. | - | 7.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

IMG { position:absolute;
      left:200;
      top:100  }

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 4
CSS | 2

참고

  • position 속성을 absolute로 지정하여 절대 위치를 사용할 경우 top 또는 left 속성을 반드시 명시해야 합니다.


visibility

요소의 보이기 속성 지정합니다.

기본 정보

초기값 | inherit
상속 | no
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
visible | 요소를 보이게 합니다. | 4.0 | 6.0
hidden | 요소를 보이지 않게 합니다. | 4.0 | 6.0
collapse | 표에 사용되면 표의 가로줄 또는 세로줄을 보이지 않게 합니다. 다른 요소에 사용될 경우 hidden과 같습니다. | - | 6.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

DIV { visibility: visible  }

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 6
CSS | 2

참고

  • visibility 속성은 다이나믹 HTML에서 스크립트와 함께 주로 사용됩니다.
  • visibility 속성을 hidden으로 지정할 경우, 요소 만큼의 공간이 여백으로 표시됩니다. 공백없이 요소를 보이지 않게 하려면 display 속성을 사용합니다.
  • 인터넷 익스플로러 4에서 자식 개체가 visible로 표시되려면 반드시 부모 개체도 visible로 지정되어 있어야 합니다.


height

요소의 높이를 지정할 때 사용합니다.

기본 정보

초기값 | auto
상속 | no
적용 범위 | 블록 요소

속성값

값 | 설명 | IE | NN
auto | 웹 브라우저의 기본값을 사용합니다. | 4.0 | 6.0
length | 절대 길이 단위 또는 상대 길이 단위로 지정합니다. | 4.0 | 6.0
% | 퍼센트 단위로 지정합니다. | 4.0 | 6.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

img { height: 200px }
이미지의 높이를 200픽셀로 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 6
CSS | 1

참고

  • 인터넷 익스플로러 5.0에서는 height 속성이 인라인 요소(Inline Element)에도 적용됩니다.
  • 요소에 지정된 height 속성값이 요소의 내용보다 작고 overflow 속성이 hidden이나 scroll이 아니면 내용이 잘리지 않고 요소의 바깥쪽에 내용이 표시됩니다.


line-height

줄간격을 지정할 때 사용합니다.

기본 정보

초기값 | normal
상속 | yes
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
normal | 웹 브라우저의 기본값을 사용합니다. | 3.0 | 4.0
number | 글자 크기의 배수로 줄간격을 지정합니다. | 4.0 | 4.0
length | 절대 길이 단위 또는 상대 길이 단위로 지정합니다. | 3.0 | 4.0
% | 퍼센트 단위로 지정합니다. | 3.0 | 4.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

p.1 { line-height: 2 }
p.2 { line-height: 12pt }
p.3 { line-height: 150% }
서로 다른 줄간격을 각 클래스로 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 4
CSS | 1

참고

  • 넷스케이프 4.0에서는 line-height 속성이 인라인 요소(Inline Element), 표, 그림, 목록에 적용되지 않습니다.


max-height

요소의 최대 높이를 지정할 때 사용합니다.

기본 정보

초기값 | 없음
상속 | no
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
none | 최대값을 제한하지 않습니다. | - | 7.0
length | 절대 길이 또는 상대 길이 단위로 최대값을 지정합니다. | - | 7.0
% | 현재 블록의 높이에 대한 비율로 최대값을 지정합니다. | - | 7.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

p { max-height: 100px }
최대 높이를 100픽셀로 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | n/a
넷스케이프 | 7
CSS | 2

참고

  • 요소 높이의 최소값은 min-height 속성으로 지정할 수 있습니다.


max-width

요소의 최대 너비를 지정할 때 사용합니다.

기본 정보

초기값 | 없음
상속 | no
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
none | 최대값을 제한하지 않습니다. | - | 7.0
length | 절대 길이 또는 상대 길이 단위로 최대값을 지정합니다. | - | 7.0
% | 현재 블록의 너비에 대한 비율로 최대값을 지정합니다. | - | 7.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

p { max-width: 100px }
최대 너비를 100픽셀로 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | -
넷스케이프 | 7
CSS | 2

참고

  • 요소 너비의 최소값은 min-width 속성으로 지정할 수 있습니다.


min-height

요소의 최소 높이를 지정할 때 사용합니다.

기본 정보

초기값 | 0
상속 | no
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
length | 절대 길이 또는 상대 길이 단위로 최소값을 지정합니다. | - | 7.0
% | 현재 블록의 높이에 대한 비율로 최소값을 지정합니다. | - | 7.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

p { min-height: 10px }
최소 높이를 10픽셀로 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | -
넷스케이프 | 7
CSS | 2

참고

  • 요소 높이의 최대값은 max-height 속성으로 지정할 수 있습니다.


min-width

요소의 최소 너비를 지정할 때 사용합니다.

기본 정보

초기값 | 웹 브라우저의 설정에 따라 다름
상속 | no
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
length | 절대 길이 또는 상대 길이 단위로 최소값을 지정합니다. | - | 7.0
% | 현재 블록의 너비에 대한 비율로 최소값을 지정합니다. | - | 7.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

p { min-width: 10px }
최소 너비를 10픽셀로 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | -
넷스케이프 | 7
CSS | 2

참고

  • 요소 너비의 최대값은 max-width 속성으로 지정할 수 있습니다.


width

요소의 너비를 지정할 때 사용합니다.

기본 정보

초기값 | auto
상속 | no
적용 범위 | 블록 요소

속성값

값 | 설명 | IE | NN
auto | 웹 브라우저의 기본값을 사용합니다. | 4.0 | 4.0
length | 절대 길이 단위 또는 상대 길이 단위로 지정합니다. | 4.0 | 4.0
% | 퍼센트 단위로 지정합니다. | 4.0 | 4.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

img { width: 200px }
이미지의 너비를 200픽셀로 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 4
CSS | 1

참고

  • 인터넷 익스플로러 5.0에서는 width 속성이 인라인 요소(Inline Element)에도 적용됩니다.


font

글자와 관련된 속성을 한꺼번에 지정할 때 사용합니다. 이 때 font-stretch와 font-size-adjust는 제외됩니다.

기본 정보

초기값 | 웹 브라우저의 설정에 따라 다름
상속 | yes
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
font-style font-variant font-weight font-size font-family | 글자의 속성을 공백 문자로 구분하여 지정합니다. font-size와 font-family는 반드시 설정해야 합니다. font-size는 /로 구분하여 line-height와 함께 지정할 수 있습니다. (예를 들어 12px/15px) line-height 속성은 줄간격을 의미합니다. 각 속성의 속성값을 참고하십시오. | 4.0 | 4.0
caption | 버튼이나 펼침 목록과 같이 캡션에 의해 사용되는 글자를 지정합니다. | 4.0 | 7.0
icon | 아이콘 라벨에서 사용되는 글자를 지정합니다. | 4.0 | 7.0
menu | 펼침 목록 메뉴에서 사용되는 글자를 지정합니다. | 4.0 | 7.0
message-box | 대화 상자에서 사용되는 글자를 지정합니다. | - | 7.0
small-caption | 작은 라벨에 사용되는 글자를 지정합니다. | - | 7.0
status-bar | 상황선에 사용되는 글자를 지정합니다. | - | 7.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

P.1 { font: italic bold }
 P.2 { font: italic small-caps bold 14px verdana }
 P.3 { font: oblique small-caps 800 12px/15px arial }
 P.4 { font: menu }

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 4
CSS | 1

참고

  • 넷스케이프 4.0에서는 font-variant 속성이 지원되지 않습니다.


font-family

글꼴의 종류를 지정할 때 사용합니다.

기본 정보

초기값 | 웹 브라우저의 설정에 따라 다름
상속 | yes
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
family-name | 글꼴의 이름(굴림, 바탕, 궁서 등)을 지정합니다. 2개 이상의 글꼴을 쉼표(,)로 구분하여 지정할 수 있습니다. 여러 개의 글꼴을 지정할 경우, 앞에서 지정한 글꼴이 없으면 다음에 지정한 글꼴을 사용합니다. 지정한 글꼴이 모두 없을 때에는 웹 브라우저의 기본값으로 표시됩니다. | 3.0 | 4.0
generic-family | 글꼴 분류명(serif, sans-serif, cursive, fantasy, monospace 등)을 지정합니다. | 3.0 | 4.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

예제 1
.font1 { font-family: 굴림 }
.font2 { font-family: 돋움 }
.font3 { font-family: 궁서, 바탕 }
여러 종류의 글꼴을 클래스로 지정한 예제입니다.

예제 2
P { font-family: serif, san-serif }
글꼴 분류명으로 P 요소의 글꼴을 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 3
넷스케이프 | 4
CSS | 1

참고

  • 공백이 들어간 글꼴 이름은 따옴표로 묶어서 표시해야 하며 글꼴 분류명은 키워드이므로 따옴표로 표시하지 말아야 합니다.
  • 넷스케이프 4.0에서 cursive는 serif로, fantasy는 san-serif로 표시됩니다.
  • font 속성을 이용하면 글자 관련 속성을 한꺼번에 지정할 수 있습니다.


font-size

글자 크기를 지정할 때 사용합니다.

기본 정보

초기값 | medium
상속 | yes
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
xx-small x-small small medium large x-large xx-large | 글꼴 크기를 나타내는 키워드입니다. xx-small이 제일 작고 xx-large가 제일 크며 medium은 12pt입니다. 브라우저에 따라 조금씩 다르게 표시됩니다. smaller는 상속된 값보다 작게, larger는 상속된 값보다 크게 표시합니다. | 3.0 | 4.0
smaller | 상속된 값보다 한 단계 작게 표시합니다. | 4.0 | 4.0
larger | 상속된 값보다 한 단계 크게 표시합니다. | 4.0 | 4.0
length | 절대 길이 또는 상대 길이 단위로 글자 크기를 지정합니다. 음수는 사용할 수 없습니다. | 3.0 | 4.0
% | 부모 요소에 대한 비율로 글자 크기를 지정합니다. | 3.0 | 4.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

<P style="font-size:xx-small">xx-small</P>
<P style="font-size:x-small">x-small</P>
<P style="font-size:small">small</P>
<P style="font-size:medium">medium</P>
<P style="font-size:large">large</P>
<P style="font-size:x-large">x-large</P>
<P style="font-size:xx-large">xx-large</P>
여러 가지 단위로 글자 크기를 지정한 예제입니다.

xx-small

x-small

small

medium

large

x-large

xx-large

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 3
넷스케이프 | 4
CSS | 1

참고

  • 넷스케이프에서 100% 이하의 퍼센트 단위로 글자 크기를 지정하면 글자색이 달라 보이거나 가독성이 떨어질 수 있으므로 주의합니다.
  • font 속성을 이용하면 글자 관련 속성을 한꺼번에 지정할 수 있습니다.


font-size-adjust

소문자의 높이를 기준으로 글자 크기를 조절할 때 사용합니다. font-size에서 지정된 높이와 소문자 x의 높이의 비율이 높을수록 글자가 작은 크기로 지정되었을 때 가독성이 높아집니다. 예를 들어 Verdana는 0.58(글자 크기가 100픽셀일때 소문자 x의 높이가 58픽셀)이고 Times New Roman은 0.46으로, Verdana가 Times New Roman보다 작은 크기에서 가독성이 높습니다.

기본 정보

초기값 | none
상속 | yes
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
none | 소문자 높이 비율을 지정하지 않습니다. | - | 7.0
number | 소문자 높이 비율을 0보다 큰 숫자로 지정합니다. 예를 들어 14pt Verdana의 font-size-adjust를 1로 지정하면(Verdana의 소문자 높이 비율 기본값은 0.58) 14*1/0.58pt의 크기(약 24pt)로 표시됩니다. | - | 7.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

h2 { font-size-adjust: 0.58 }

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | -
넷스케이프 | 7
CSS | 2

참고

  • 한글과 같이 대소문자가 없는 문자이거나 대소문자 기준선을 지정하지 않은 변형 글꼴에서는 font-size-adjust가 적용되지 않습니다.


font-stretch

글자의 장평을 지정할 때 사용합니다.

기본 정보

초기값 | normal
상속 | yes
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
normal | 글자의 장평을 보통 크기로 표시합니다. | - | -
wider | 글자의 장평을 한 단계 넓게 표시합니다. | - | -
narrower | 글자의 장평을 한 단계 좁게 표시합니다. | - | -
ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded | 글자의 장평을 지정하는 키워드입니다. ultra-condensed가 제일 좁고 ultra-expanded가 제일 넓습니다. | - | -

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

H3 { font-stretch: ultra-condensed }
 H4 { font-stretch: condensed }

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | -
넷스케이프 | -
CSS | 2


font-style

글자 모양을 지정할 때 사용합니다.

기본 정보

초기값 | normal (웹 브라우저의 설정에 따라 달라질 수 있음.)
상속 | yes
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
normal | 보통 글자 모양으로 표시합니다. | 3.0 | 4.0
italic | 글자를 이탤릭체로 표시합니다. | 3.0 | 4.0
oblique | 기울어진 글자 모양으로 표시합니다. | 4.0 | -

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

BODY { font-style: italic }
 H2 { font-style: normal }

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 4
CSS | 1

참고

  • 넷스케이프 4.0은 oblique를 지원하지 않으므로 기울어진 글자 모양으로 표시하려면 italic을 사용하는 것이 좋습니다.
  • font 속성을 이용하면 글자 관련 속성을 한꺼번에 지정할 수 있습니다.


font-variant

작은 대문자로 표시하도록 지정할 때 사용합니다.

기본 정보

초기값 | normal
상속 | yes
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
normal | 보통 글자 모양으로 표시합니다. | 3.0 | 6.0
small-caps | 대문자로 된 작은 글자로 표시합니다. | 3.0 | 6.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

This is <SPAN style="font-variant: small-caps">my car</SPAN>.
This is my car.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 6
CSS | 1

참고

  • font 속성을 이용하면 글자 관련 속성을 한꺼번에 지정할 수 있습니다.


font-weight

글자의 굵기를 지정할 때 사용합니다.

기본 정보

초기값 | normal
상속 | yes
적용 범위 | 모든 요소

속성값

값 설명 IE NN
normal
보통 글자 모양으로 표시합니다. 3.0 4.0
bold
글자를 굵게 표시합니다. 3.0 4.0
bolder
글자를 더 굵게 표시합니다. 4.0 4.0
lighter
글자를 가늘게 표시합니다. 4.0 4.0
100
200
300
400
500
600
700
800
900

굵기를 숫자로 지정합니다. 숫자가 커질수록 굵게 표시됩니다. 400은 normal과 같고, 700은 bold와 같습니다.

참고: 모든 폰트가 9개의 속성값을 갖는 것은 아닙니다. 따라서 지정한 속성값을 사용할 수 없을 때에는 다음과 같은 기준으로 다른 속성값이 적용됩니다.

  • 500은 400으로 바뀌어 적용되고 반대로 400은 500으로 바뀌어 적용됩니다.
  • 100-300은 바로 다음 단계의 더 가는 글자로 표시되거나 더 굵은 글자로 표시됩니다.
  • 600-900은 다음 단계의 더 굵은 글자로 표시되거나 더 가는 글자로 표시됩니다.
4.0 4.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

<P style="font-weight:normal">normal</P>
 <P style="font-weight:700">700</P>

normal

700

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 4
CSS | 1

참고

  • font 속성을 이용하면 글자 관련 속성을 한꺼번에 지정할 수 있습니다.


content

문서의 내용을 만듭니다. 요소의 앞뒤에 내용을 삽입하기 위해 :before 또는 :after 가상 요소(Pseudo elements)와 함께 사용됩니다.

기본 정보

초기값 | 빈 문자열
상속 | no
적용 범위 | :before와 :after 가상 요소(Pseudo-elements)

속성값

값 설명 IE NN
string
문자열을 정의합니다. - 7.0
url
URL을 지정합니다. - 7.0
counter(name)
counter(name, list-style-type)
counters(name, string)
counters(name, string, list-style-type)
카운터를 지정합니다. name은 카운터 이름이며 style은 list styles 중에 하나입니다. - -
attr(X)
지정된 HTML 속성값을 스트링으로 반환합니다. 요소에 속성이 지정되어 있지 않으면 빈 스트링이 반환됩니다. - 7.0
open-quote
이 값은 quotes 속성에서 정의된 스트링 중 적합한 것으로 대체됩니다. - 7.0
close-quote
이 값은 quotes 속성에서 정의된 스트링 중 적합한 것으로 대체됩니다. - 7.0
no-open-quote
아무것도 입력하지 않고 중첩된 quotes 단계의 증가치 또는 감소치만 입력합니다. - 7.0
no-close-quote
아무것도 입력하지 않고 중첩된 quotes 단계의 증가치 또는 감소치만 입력합니다. - 7.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

예제 1
P.note:before { content: "Note: " }
"Note: "라는 스트링을 note 클래스가 지정된 모든 문단 앞에 입력합니다.

예제 2
H1:before { content: url(star_1.gif) }
H1:after  { content: url(star_2.gif) }
H1 요소 앞과 뒤에 지정한 그림을 삽입합니다.

예제 3
P.numbered:before
  { counter-increment: para ;
    content: counter(para, upper-roman) ". " }
numbered 클래스가 지정된 문단 앞에 대문자 로마 문자와 마침표로 구성된 카운터가 삽입됩니다.

예제 4
.q:before { content: open-quote }
.q:after  { content: close-quote }
q 클래스가 지정된 모든 요소 앞과 뒤에 열기와 닫기 인용 문자를 삽입합니다.

예제 5
.show-id:before
  { content: "ID: " attr(id) }
show-id 클래스가 지정된 요소 앞에 요소의 id 속성값을 삽입합니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | n/a
넷스케이프 | 7
CSS | 2


counter-increment

요소의 번호를 매길 때 :before 또는 :after 가상 요소(Pseudo elements)와 함께 사용됩니다.

기본 정보

초기값 | none
상속 | no
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
none | 변수 증가치를 지정하지 않습니다. | - | -
identifier number | identifier는 변수를 증가시킬 식별자(selector), 클래스(class), 아이디(id)를 지정합니다. number는 변수를 어느 정도 증가시킬 것인지 지정합니다. 양수, 0, 음수로 지정할 수 있습니다. | - | -

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

예제 1
H1:before {content: "Section " counter(section) " ";
           counter-increment: section; }
변수가 1씩 증가됩니다.

예제 2
H1:before {content: "Section " counter(section) " ";
           counter-increment: section 2; }
변수가 2씩 증가됩니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | n/a
넷스케이프 | n/a
CSS | 2

참고

  • display 속성이 none일 때는 counter-increment를 지정할 수 없습니다.


counter-reset

counter-increment 속성으로 지정한 변수값을 0으로 만들 때 사용합니다. :before 또는 :after 가상 클래스(Pseudo class)와 함께 사용됩니다.

기본 정보

초기값 | none
상속 | no
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
none | 변수를 0으로 초기화하지 않습니다. | - | -
identifier number | identifier는 변수를 초기화시킬 식별자(selector), 클래스(class), 아이디(id)를 지정합니다. number는 변수를 몇 회 초시화 시킬 것인지 지정합니다. 양수, 0, 음수로 지정할 수 있습니다. | - | -

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

예제 1
H1:before { content: "Section " counter(section) ". ";
            counter-increment: section;
            counter-reset: section; }

H2:before { content: counter(section) "." counter(sub-section) " ";
            counter-increment: sub-section; }
상위 섹션의 변수가 초기화 되어 서브섹션의 번호가 1, 1.1, 1.2와 같이 매겨집니다.

예제 2
DIV { counter-reset: a b 2 }
각 DIV 요소마다 카운터 "a"는 0으로 지정되고 카운터 "b"는 2로 지정됩니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | -
넷스케이프 | -
CSS | 2


quotes

인용 부호의 종류를 지정할 때 사용합니다.

기본 정보

초기값 | 1
상속 | yes
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
none | content 속성의 open-quote와 close-quote가 인용 부호를 표시하지 않습니다. | - | -
string string string string | 사용할 인용 부호를 지정합니다. 처음 두 개의 속성값은 첫 번째 레벨의 인용 부호을 지정하고, 다음 두 개의 속성값은 두 번째 레벨의 인용 부호를 지정합니다. | - | -

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

예제 1
Q:lang(en) { quotes: '"' '"' "'" "'" }
위 스타일을 아래와 같은 HTML 문서에 적용합니다.

예제 2
<HTML lang="en">
<HEAD></HEAD>
<BODY>
<P><Q>This is a <Q>big</Q> tree.</Q></Q>
</BODY>
</HTML>
"This is a 'big' tree."

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | -
넷스케이프 | -
CSS | 2


list-style

목록에서 사용할 항목 표시자의 모양, 위치를 한꺼번에 지정할 때 사용합니다.

기본 정보

초기값 | 각 속성의 초기값
상속 | yes
적용 범위 | UL, OL, LI, DT, DD 요소

속성값

값 | 설명 | IE | NN
list-style-type list-style-position list-style-image | 항목 표시자의 모양, 위치, 그림 속성을 공백 문자로 구분하여 지정합니다. 각 속성의 속성값을 참고하십시오. | 4.0 | 6.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

OL { list-style: decimal inside }
UL { list-style: disc outside }

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 6
CSS | 1

참고

  • 넷스케이프 4.0에서는 list-style-position 속성만 지원합니다.


list-style-image

항목 표시자로 사용할 그림을 지정합니다. 지정한 그림을 사용할 수 없을 때에는 list-style-type에 지정된 모양이 표시됩니다.

기본 정보

초기값 | none
상속 | yes
적용 범위 | UL, OL, LI, DT, DD 요소

속성값

값 | 설명 | IE | NN
none | 항목 표시자로 그림을 사용하지 않습니다. | 4.0 | 6.0
url | 항목 표시자로 사용할 그림 파일의 위치를 지정합니다. | 4.0 | 6.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

OL { list-style-image: url(ball.gif);
     list-style-type: circle }

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 6
CSS | 1

참고

  • 항목 표시자로 지정한 그림을 사용할 수 없을 때 표시할 수 있도록 list-style-type 속성으로 대체 모양을 지정해주는 것이 좋습니다.
  • list-style 속성을 이용하면 항목 표시자의 모양과 위치를 한꺼번에 지정할 수 있습니다.


list-style-position

항목 표시자의 위치를 지정합니다.

기본 정보

초기값 | outside
상속 | yes
적용 범위 | UL, OL, LI, DT, DD 요소

속성값

값 | 설명 | IE | NN
inside | 항목 표시자를 블럭 안쪽에 표시합니다. | 4.0 | 6.0
outside | 항목 표시자를 블럭 바깥쪽에 표시합니다. | 4.0 | 6.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

OL.IN  { list-style-position: inside }
OL.OUT { list-style-position: outside }
outside inside
  1. 첫 번째 항목입니다.
  2. 두 번째 항목입니다.
  3. 세 번째 항목입니다.
  1. 첫 번째 항목입니다.
  2. 두 번째 항목입니다.
  3. 세 번째 항목입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 6
CSS | 1

참고

  • list-style 속성을 이용하면 항목 표시자의 모양과 위치를 한꺼번에 지정할 수 있습니다.


list-style-type

항목 표시자의 모양을 지정합니다.

기본 정보

초기값 | disc(UL 요소), decimal(OL 요소)
상속 | yes
적용 범위 | UL, OL, LI, DT, DD 요소

속성값

값 | 설명 | IE | NN
none | 항목 표시자를 사용하지 않습니다. | 4.0 | 4.0
disc | 속이 찬 원으로 표시합니다. | 4.0 | 4.0
circle | 속이 빈 원으로 표시합니다. | 4.0 | 4.0
square | 속이 찬 사각형으로 표시합니다. | 4.0 | 4.0
decimal-leading-zero | 0으로 시작하는 두 자리 숫자로 표시합니다. (01, 02, 03...) | - | -
lower-roman | 로마자 소문자로 표시합니다. (i, ii, iii, iv, v...) | 4.0 | 4.0
upper-roman | 로마자 대문자로 표시합니다. (I, II, III, IV, V...) | 4.0 | 4.0
lower-alpha | 알파벳 소문자로 표시합니다. (a, b, c, d, e...) | 4.0 | 4.0
upper-alpha | 알파벳 대문자로 표시합니다. (A, B, C, D, E...) | 4.0 | 4.0
lower-greek | 그리스 문자 소문자로 표시합니다. (alpha, beta, gamma...) | - | 7.0
lower-latin | 알파벳 소문자로 표시합니다. (a, b, c, d, e...) | - | 7.0
upper-latin | 알파벳 대문자로 표시합니다. (A, B, C, D, E...) | - | 7.0
hebrew | 히브리어로 표시합니다. | - | 7.0
armenian | 아르메니아어로 표시합니다. | - | 7.0
georgian | 그루지야어로 표시합니다. (an, ban, gan...) | - | 7.0
cjk-ideographic | 표의 문자로 표시합니다. | - | 7.0
hiragana | 일본어 히라가나로 표시합니다. (a, i, u, e, o, ka, ki...) | - | 7.0
katakana | 일본어 카타카나로 표시합니다. (A, I, U, E, O, KA, KI...) | - | 7.0
hiragana-iroha | 일본어 히라가나 이로하로 표시합니다. (i, ro, ha, ni, ho, he, to...) | - | 7.0
katakana-iroha | 일본어 카타카나 이로하로 표시합니다. (I, RO, HA, NI, HO, HE, TO...) | - | 7.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

예제 1
OL { list-style-type: upper-roman }
UL { list-style-type: square }

예제 2
p.list
  { display: list-item;
    list-style-type: hiragana }

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 4
CSS | 1

참고

  • 일부 브라우저는 순서없는 항목 표시자의 모양으로 disc값만 지원합니다.
  • list-style 속성을 이용하면 항목 표시자의 모양과 위치를 한꺼번에 지정할 수 있습니다.


marker-offset

항목 표시자와 블럭 사이의 간격을 지정합니다.

기본 정보

초기값 | auto
상속 | no
적용 범위 | display 속성값이 marker인 요소

속성값

값 | 설명 | IE | NN
length | 항목 표시자와 블럭 사이의 간격을 절대 길이 또는 상대 길이 단위로 지정합니다. | - | -
auto | 웹 브라우저가 자동으로 설정합니다. | - | -

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

li:before
  { display: marker;
    marker-offset: 2em;
    content: url(marker.gif) }

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | -
넷스케이프 | -
CSS | 2


margin

요소의 바깥쪽 여백을 지정할 때 사용합니다. 위, 아래, 오른쪽, 왼쪽 동일하게 혹은 서로 다르게 지정할 수 있습니다. 값을 4개까지 지정할 수 있습니다.

  • 1개 지정 : 전체 여백에 동일하게 적용됨.
  • 2개 지정 : 첫 번째 값은 상하, 두 번째 값은 좌우 여백에 적용됨.
  • 3개 지정 : 첫 번째 값은 위, 두 번째 값은 좌우, 세 번째 값은 아래 여백에 적용됨.
  • 4개 지정 : 위쪽 여백부터 시계 방향으로 적용됨.

기본 정보

초기값 | 0
상속 | no
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
margin-top margin-right margin-bottom margin-left | 요소의 바깥쪽 여백을 지정합니다. | 4.0 | 4.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

예제 1
TABLE { margin: 2in }
표의 상하좌우 전체 여백을 2인치로 지정한 예제입니다.

예제 2
DIV  { margin: 10px 30px }
상하 여백은 10픽셀, 좌우 여백은 30픽셀로 지정한 예제입니다.

예제 3
.myclass { margin: 10em 20em 30em }
위쪽 여백은 10em, 좌우 여백은 20em, 아래쪽 여백은 30em으로 지정한 예제입니다.

예제 4
P.mymargin { margin: 10pt 20pt 30pt 40pt }
위쪽 여백은 10pt, 오른쪽 여백은 20pt, 아래쪽 여백은 30pt, 왼쪽 여백은 40pt로 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 4
CSS | 1

참고

  • 인터넷 익스플로러 5.5 이상에서는 margin 속성을 인라인 요소(Inline Element)에도 적용할 수 있습니다.


margin-bottom

요소의 아래쪽 바깥 여백을 지정할 때 사용합니다.

기본 정보

초기값 | 0
상속 | no
적용 범위 | 모든 요소(CSS), 블록 요소(IE, NN)

속성값

값 | 설명 | IE | NN
auto | 웹 브라우저의 기본값으로 여백을 지정합니다. | 4.0 | 4.0
length | 아래쪽 바깥 여백을 상대 길이 또는 절대 길이 단위로 지정합니다. 음수값으로 지정할 수도 있습니다. | 4.0 | 4.0
% | 문서 전체의 길이에 대한 비율로 아래쪽 바깥 여백을 지정합니다. | 4.0 | 4.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

예제 1
H2 { margin-bottom: 10px }
제목2의 아래쪽 바깥 여백을 10픽셀로 지정한 예제입니다.

예제 2
H3 { margin-bottom: -1em }
제목3의 아래쪽 바깥 여백을 -1em으로 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 4
CSS | 1

참고

  • 인터넷 익스플로러 5.5 이상에서는 margin-bottom 속성을 인라인 요소(Inline Element)에도 적용할 수 있습니다.
  • margin 속성을 이용하면 바깥 여백을 한꺼번에 지정할 수 있습니다.


margin-left

요소의 왼쪽 바깥 여백을 지정할 때 사용합니다.

기본 정보

초기값 | 0
상속 | no
적용 범위 | 모든 요소(CSS), 블록 요소(IE, NN)

속성값

값 | 설명 | IE | NN
auto | 웹 브라우저의 기본값으로 여백을 지정합니다. | 4.0 | 4.0
length | 왼쪽 바깥 여백을 상대 길이 또는 절대 길이 단위로 지정합니다. 음수값으로 지정할 수도 있습니다. | 4.0 | 4.0
% | 문서 전체의 길이에 대한 비율로 왼쪽 바깥 여백을 지정합니다. | 4.0 | 4.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

예제 1
H2 { margin-left: 10px }
제목2의 왼쪽 바깥 여백을 10픽셀로 지정한 예제입니다.

예제 2
H3 { margin-left: -1em }
제목3의 왼쪽 바깥 여백을 -1em으로 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 4
CSS | 1

참고

  • 인터넷 익스플로러 5.5 이상에서는 margin-left 속성을 인라인 요소(Inline Element)에도 적용할 수 있습니다.
  • margin 속성을 이용하면 바깥 여백을 한꺼번에 지정할 수 있습니다.


margin-right

요소의 오른쪽 바깥 여백을 지정할 때 사용합니다.

기본 정보

초기값 | 0
상속 | no
적용 범위 | 모든 요소(CSS), 블록 요소(IE, NN)

속성값

값 | 설명 | IE | NN
auto | 웹 브라우저의 기본값으로 여백을 지정합니다. | 4.0 | 4.0
length | 오른쪽 바깥 여백을 상대 길이 또는 절대 길이 단위로 지정합니다. 음수값으로 지정할 수도 있습니다. | 4.0 | 4.0
% | 문서 전체의 길이에 대한 비율로 오른쪽 바깥 여백을 지정합니다. | 4.0 | 4.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

예제 1
H2 { margin-right: 10px }
제목2의 오른쪽 바깥 여백을 10픽셀로 지정한 예제입니다.

예제 2
H3 { margin-right: -1em }
제목3의 오른쪽 바깥 여백을 -1em으로 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 4
CSS | 1

참고

  • 인터넷 익스플로러 5.5 이상에서는 margin-right 속성을 인라인 요소(Inline Element)에도 적용할 수 있습니다.
  • margin 속성을 이용하면 바깥 여백을 한꺼번에 지정할 수 있습니다.


margin-top

요소의 위쪽 바깥 여백을 지정할 때 사용합니다.

기본 정보

초기값 | 0
상속 | no
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
auto | 웹 브라우저의 기본값으로 여백을 지정합니다. | 4.0 | 4.0
length | 위쪽 바깥 여백을 상대 길이 또는 절대 길이 단위로 지정합니다. 음수값으로 지정할 수도 있습니다. | 4.0 | 4.0
% | 문서 전체의 길이에 대한 비율로 위쪽 바깥 여백을 지정합니다. | 4.0 | 4.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

예제 1
H2 { margin-top: 10px }
제목2의 위쪽 바깥 여백을 10픽셀로 지정한 예제입니다.

예제 2
H3 { margin-top: -1em }
제목3의 위쪽 바깥 여백을 -1em으로 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 4
CSS | 1

참고

  • 인터넷 익스플로러 5.5 이상에서는 margin-top 속성을 인라인 요소(Inline Element)에도 적용할 수 있습니다.
  • margin 속성을 이용하면 바깥 여백을 한꺼번에 지정할 수 있습니다.


outline

아웃라인의 색깔, 모양, 두께를 한꺼번에 지정할 때 사용합니다.

기본 정보

초기값 | 각 속성의 초기값
상속 | no
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
outline-color outline-style outline-width | 아웃라인의 색깔, 모양, 길이 속성값을 공백 문자로 구분하여 지정합니다. 각 속성의 속성값을 참고하십시오. | - | -

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

BUTTON { outline: blue solid thin }

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | -
넷스케이프 | -
CSS | 2

참고

  • outline 속성으로 그린 테두리는 border와 달리 좌표 지정이나 블럭 요소의 크기에 포함되지 않으며 사각형이 아닐 수 있습니다. 주로 버튼, 입력칸, 이미지 맵 등의 테두리를 나타낼 때 사용됩니다.


outline-color

아웃라인의 색깔을 지정합니다.

기본 정보

초기값 | 요소의 color 속성값
상속 | no
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
color | 색깔을 색깔 이름(red, yellow 등)이나 RGB 코드값(#ff0000 또는 rgb(255,0,0))으로 지정합니다. | - | -
invert | 보색으로 표시합니다. 배경색과 관계없이 테두리 색깔이 항상 표시되도록 할 수 있습니다. | - | -

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

BUTTON { outline-color: red }

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | -
넷스케이프 | -
CSS | 2

참고

  • outline 속성으로 그린 테두리는 border와 달리 좌표 지정이나 블럭 요소의 크기에 포함되지 않으며 사각형이 아닐 수 있습니다. 주로 버튼, 입력칸, 이미지 맵 등의 테두리를 나타낼 때 사용됩니다.


outline-style

아웃라인의 모양을 지정합니다.

기본 정보

초기값 | none
상속 | no
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
none | 테두리를 표시하지 않습니다. | - | -
dotted | 테두리를 점으로 표시합니다. | - | -
dashed | 테두리를 점선으로 표시합니다. | - | -
solid | 테두리를 실선으로 표시합니다. | - | -
double | 테두리를 두 줄로 표시합니다. | - | -
groove | 테두리를 오른쪽 아래에서 빛을 받은 액자 모양으로 표시합니다. | - | -
ridge | 테두리를 왼쪽 위에서 빛을 받은 액자 모양으로 표시합니다. | - | -
outset | 테두리를 속으로 움푹 파인 모양으로 표시합니다. | - | -
inset | 테두리를 밖으로 불쑥 튀어 나온 모양으로 표시합니다. | - | -

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

BUTTON { outline-style: solid }

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | -
넷스케이프 | -
CSS | 2

참고

  • outline 속성으로 그린 테두리는 border와 달리 좌표 지정이나 블럭 요소의 크기에 포함되지 않으며 사각형이 아닐 수 있습니다. 주로 버튼, 입력칸, 이미지 맵 등의 테두리를 나타낼 때 사용됩니다.


outline-width

아웃라인의 두께를 지정합니다.

기본 정보

초기값 | medium
상속 | no
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
thin medium thick | 두께를 나타내는 키워드입니다. | - | -
length | 절대 길이 또는 상대 길이 단위로 지정합니다. | - | -

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

BUTTON { outline-width: medium }

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | -
넷스케이프 | -
CSS | 2

참고

  • outline 속성으로 그린 테두리는 border와 달리 좌표 지정이나 블럭 요소의 크기에 포함되지 않으며 사각형이 아닐 수 있습니다. 주로 버튼, 입력칸, 이미지 맵 등의 테두리를 나타낼 때 사용됩니다.


padding

요소의 안쪽 여백을 지정할 때 사용합니다. 위, 아래, 오른쪽, 왼쪽 동일하게 혹은 서로 다르게 지정할 수 있습니다. 값을 4개까지 지정할 수 있습니다.

  • 1개 지정 : 전체 여백에 동일하게 적용됨.
  • 2개 지정 : 첫 번째 값은 상하, 두 번째 값은 좌우 여백에 적용됨.
  • 3개 지정 : 첫 번째 값은 위, 두 번째 값은 좌우, 세 번째 값은 아래 여백에 적용됨.
  • 4개 지정 : 위쪽 여백부터 시계 방향으로 적용됨.

기본 정보

초기값 | 0
상속 | no
적용 범위 | 모든 요소(CSS), 블록 요소(IE, NN)

속성값

값 | 설명 | IE | NN
padding-top padding-right padding-bottom padding-left | 요소의 안쪽 여백을 지정합니다. | 4.0 | 4.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

예제 1
H3 { padding: 15px }
제목3의 전체 안쪽 여백을 15픽셀로 지정한 예제입니다.

예제 2
DIV { padding: 10px 20px}
상하 안쪽 여백은 10픽셀, 좌우 안쪽 여백은 30픽셀로 지정한 예제입니다.

예제 3
.myclass { padding: 10em 20em 30em }
위 안쪽 여백은 10em, 좌우 안쪽 여백은 20em, 아래 안쪽 여백은 30em으로 지정한 예제입니다.

예제 4
P.mypadding { padding: 10pt 20pt 30pt 40pt }
안쪽 여백을 위쪽 10pt, 오른쪽 20pt, 아래쪽 30pt, 왼쪽 40pt로 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 4
CSS | 1

참고

  • 인터넷 익스플로러 5.5 이상에서는 padding 속성을 인라인 요소(Inline Element)에도 적용할 수 있습니다.


padding-bottom

요소 아래쪽의 안쪽 여백을 지정할 때 사용합니다.

기본 정보

초기값 | 0
상속 | no
적용 범위 | 모든 요소(CSS), 블록 요소(IE, NN)

속성값

값 | 설명 | IE | NN
length | 요소 아래쪽의 안쪽 여백을 상대 길이 또는 절대 길이 단위로 지정합니다. 음수값은 지정할 수 없습니다. | 4.0 | 4.0
% | 가장 근접한 요소의 길이에 대한 비율로 요소 아래쪽의 안쪽 여백을 지정합니다. | 4.0 | 4.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

예제 1
H2 { padding-bottom: 10px }
제목2의 아래쪽 안쪽 여백을 10픽셀로 지정한 예제입니다.

예제 2
H3 { padding-bottom: -1em }
제목3의 아래쪽 안쪽 여백을 -1em으로 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 4
CSS | 1

참고

  • 인터넷 익스플로러 5.5 이상에서는 padding-bottom 속성을 인라인 요소(Inline Element)에도 적용할 수 있습니다.
  • padding 속성을 이용하면 안쪽 여백을 한꺼번에 지정할 수 있습니다.


padding-left

요소의 왼쪽 안쪽 여백을 지정할 때 사용합니다.

기본 정보

초기값 | 0
상속 | no
적용 범위 | 모든 요소(CSS), 블록 요소(IE, NN)

속성값

값 | 설명 | IE | NN
length | 왼쪽 안쪽 여백을 상대 길이 또는 절대 길이 단위로 지정합니다. 음수값은 지정할 수 없습니다. | 4.0 | 4.0
% | 가장 근접한 요소의 길이에 대한 비율로 왼쪽 안쪽 여백을 지정합니다. | 4.0 | 4.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

예제 1
H2 { padding-left: 10px }
제목2의 왼쪽 안쪽 여백을 10픽셀로 지정한 예제입니다.

예제 2
H3 { padding-left: -1em }
제목3의 왼쪽 안쪽 여백을 -1em으로 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 4
CSS | 1

참고

  • 인터넷 익스플로러 5.5 이상에서는 padding-left 속성을 인라인 요소(Inline Element)에도 적용할 수 있습니다.
  • padding 속성을 이용하면 안쪽 여백을 한꺼번에 지정할 수 있습니다.


padding-right

요소의 오른쪽 안쪽 여백을 지정할 때 사용합니다.

기본 정보

초기값 | 0
상속 | no
적용 범위 | 모든 요소(CSS), 블록 요소(IE, NN)

속성값

값 | 설명 | IE | NN
length | 오른쪽 안쪽 여백을 상대 길이 또는 절대 길이 단위로 지정합니다. 음수값은 지정할 수 없습니다. | 4.0 | 4.0
% | 가장 근접한 요소의 길이에 대한 비율로 오른쪽 안쪽 여백을 지정합니다. | 4.0 | 4.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

예제 1
H2 { padding-right: 10px }
제목2의 오른쪽 안쪽 여백을 10픽셀로 지정한 예제입니다.

예제 2
H3 { padding-right: -1em }
제목3의 오른쪽 안쪽 여백을 -1em으로 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 4
CSS | 1

참고

  • 인터넷 익스플로러 5.5 이상에서는 padding-right 속성을 인라인 요소(Inline Element)에도 적용할 수 있습니다.
  • padding 속성을 이용하면 안쪽 여백을 한꺼번에 지정할 수 있습니다.


padding-top

요소 위쪽의 안쪽 여백을 지정할 때 사용합니다.

기본 정보

초기값 | 0
상속 | no
적용 범위 | 모든 요소(CSS), 블록 요소(IE, NN)

속성값

값 | 설명 | IE | NN
length | 요소 위쪽의 안쪽 여백을 상대 길이 또는 절대 길이 단위로 지정합니다. 음수값은 지정할 수 없습니다. | 4.0 | 4.0
% | 가장 근접한 요소의 길이에 대한 비율로 요소 위쪽의 안쪽 여백을 지정합니다. | 4.0 | 4.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

예제 1
H2 { padding-top: 10px }
제목2의 위쪽 안쪽 여백을 10픽셀로 지정한 예제입니다.

예제 2
H3 { padding-top: -1em }
제목3의 위쪽 안쪽 여백을 -1em으로 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 4
CSS | 1

참고

  • 인터넷 익스플로러 5.5 이상에서는 padding-top 속성을 인라인 요소(Inline Element)에도 적용할 수 있습니다.
  • padding 속성을 이용하면 안쪽 여백을 한꺼번에 지정할 수 있습니다.


bottom

요소의 아래쪽 좌표를 지정합니다.

기본 정보

초기값 | auto
상속 | no
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
auto | 웹 브라우저에 의해 아래쪽 위치가 자동으로 결정됩니다. | 5.0 | 6.0
% | 요소의 위치를 퍼센트 단위로 지정합니다. | 5.0 | 6.0
length | 절대 단위 또는 상대 단위로 지정합니다. 음수값으로 지정할 수도 있습니다. | 5.0 | 6.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

DIV { position: absolute;
      bottom: -10px }

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 5
넷스케이프 | 6
CSS | 2

참고

  • position 속성값이 "static"일 경우 bottom 속성이 적용되지 않습니다.


clip

요소의 특정 부분만 표시할 때 사용합니다. overflow 속성값이 visible일 경우 clip 속성이 적용되지 않습니다.

기본 정보

초기값 | auto
상속 | no
적용 범위 | 블록 요소

속성값

값 | 설명 | IE | NN
auto | 웹 브라우저가 자동으로 요소의 모양을 결정합니다. | 4.0 | 6.0
shape | 요소의 모양을 지정합니다. 사용 가능한 속성값은 rect(top, right, bottom, left)로 위쪽 값부터 시계 방향으로 차례로 지정합니다. | 4.0 | 4.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

div {
  position: absolute;
  top: 0px; left: 0px;
  overflow: hidden;
  background: lightgrey;
  border: thin solid red
  }
div#a {
  clip: auto;
  }
div#b {
  clip: rect(0px, 120px, 90px, 0px);
  }
div#c {
  clip: rect(20px, 120px, 90px, 30px);
  }

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 6
CSS | 2

참고

  • clip 속성을 사용하려면 position 속성이 absolute로 지정되어 있어야 합니다.


left

요소의 왼쪽 위 모서리 좌표를 지정합니다. 부모 요소의 왼쪽 위치를 기준으로 하여 지정한 거리만큼 오른쪽으로 이동시켜 표시합니다.

기본 정보

초기값 | auto
상속 | no
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
auto | 웹 브라우저에 의해 자동으로 결정됩니다. | 4.0 | 4.0
% | 부모 요소의 왼쪽 모서리를 기준으로 퍼센트 단위로 지정합니다. | 4.0 | 4.0
length | 절대 단위 또는 상대 단위로 지정합니다. 음수값으로 지정할 수도 있습니다. | 4.0 | 4.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

.foo {
  position:absolute;
  top:10px; left:30%;
  }
foo 요소의 위치는 페이지 위쪽에서 10 픽셀 아래, 페이지 너비의 30%가 되는 수치만큼 왼쪽에서 들어온 위치입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 4
CSS | 1

참고

  • position 속성값이 static일 경우 left 속성이 적용되지 않습니다.


overflow

height 속성으로 지정한 요소의 높이보다 요소 안의 내용이 많을 때의 처리 방법을 지정합니다.

기본 정보

초기값 | visible
상속 | no
적용 범위 | 블록 요소, 객체 요소

속성값

값 | 설명 | IE | NN
auto | 요소 안의 내용이 요소의 높이보다 많을 경우 자동으로 스크롤바를 표시합니다. | 4.0 | 6.0
visible | 내용이 잘리지 않습니다. 요소의 바깥쪽에 내용이 표시됩니다. | 4.0 | 6.0
hidden | 요소의 내용이 잘립니다. 이 경우 웹 브라우저가 스크롤바를 표시하지 않기 때문에 잘려진 내용을 볼 수 없습니다. | 4.0 | 6.0
scroll | 요소의 내용이 잘려 보이지만 웹 브라우저가 스크롤바를 표시하기 때문에 나머지 내용을 볼 수 있습니다. | 4.0 | 6.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

div { width: 80px; height: 80px }

div.noclip { overflow: visible }
div.clip   { overflow: hidden }
div.scroll { overflow: scroll }
visible | hidden | scroll

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 6
CSS | 2

참고

  • 넷스케이프 4.0에서는 좌표가 지정된 블록 요소에만 overflow 속성이 적용됩니다.


right

요소의 오른쪽 위 모서리 좌표를 지정합니다. 부모 요소의 오른쪽 위치를 기준으로 하여 지정한 거리만큼 왼쪽으로 이동시켜 표시합니다.

기본 정보

초기값 | auto
상속 | no
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
auto | 웹 브라우저에 의해 자동으로 결정됩니다. | 5.0 | 7.0
% | 요소의 위치를 퍼센트 단위로 지정합니다. | 5.0 | 7.0
length | 절대 단위 또는 상대 단위로 지정합니다. 음수값으로 지정할 수도 있습니다. | 5.0 | 7.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

DIV { position: absolute;
      right: 30px }

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 5
넷스케이프 | 7
CSS | 2

참고

  • position 속성값이 static일 경우 right 속성이 적용되지 않습니다.


top

요소의 위쪽 좌표를 지정합니다. 부모 요소의 위쪽 위치를 기준으로 하여 지정한 거리만큼 위로 또는 아래로 이동시켜 표시합니다.

기본 정보

초기값 | auto
상속 | no
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
auto | 웹 브라우저에 의해 위쪽 위치가 자동으로 결정됩니다. | 4.0 | -
% | 부모 요소를 기준으로 퍼센트 단위로 지정합니다. | 4.0 | -
length | 절대 단위 또는 상대 단위로 지정합니다. 음수값으로도 지정할 수 있습니다. | 4.0 | 4.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

예제 1
DIV { position: absolute;
      bottom: -10px }

예제 2
DIV { position: absolute;
      bottom: 10px }

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 4
CSS | 2

참고

  • position 속성값이 static일 경우 top 속성이 적용되지 않습니다.


z-index

요소의 겹치기 순서를 지정합니다. 겹치기 순서가 높은 것이 위쪽에 놓여집니다.

기본 정보

초기값 | auto
상속 | no
적용 범위 | 좌표가 지정된 요소

속성값

값 | 설명 | IE | NN
auto | 부모 요소와 겹치기 순서가 같습니다. | 4.0 | 6.0
integer | 요소의 겹치기 순서를 숫자로 지정합니다. | 4.0 | 4.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

div   { display: inline;
        position: relative;
        width: 80px; height: 80px;
      }

div#a { top: 0; left: 20;
        background: yellow;
        z-index: auto
      }
div#b { top: 20; left: -80;
        background: aqua;
        z-index: -1
      }
div#c { top: 40; left: -120;
        background: lightgrey;
        z-index: 1
      }
세 개의 DIV 요소에 서로 다른 z-index 값을 지정한 예제입니다.
a
b
c

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 6
CSS | 2

참고

  • position 속성이 static일 경우에는 z-index 속성으로 지정한 겹치기 순서가 동작하지 않습니다.


vertical-align

요소의 수직 정렬 방식을 지정합니다.

기본 정보

초기값 | baseline
상속 | no
적용 범위 | 인라인 요소, TD 요소

속성값

값 | 설명 | IE | NN
baseline | 부모 요소의 기준선에 맞춰 정렬합니다. | 4.0 | 4.0
sub | 위첨자와 같이 정렬합니다. | 4.0 | 7.0
super | 아래첨자와 같이 정렬합니다. | 4.0 | 7.0
top | 위쪽으로 정렬합니다. | 4.0 | 4.0
text-top | 부모 요소의 글자 위쪽에 맞춰 정렬합니다. | 4.0 | 4.0
middle | 가운데로 정렬합니다. | 4.0 | 4.0
bottom | 아래쪽으로 정렬합니다. | 4.0 | 4.0
text-bottom | 부모 요소의 글자 아래쪽에 맞춰 정렬합니다. | 4.0 | 4.0
% | line-height 속성을 기준으로 퍼센트 단위로 지정합니다. | - | 7.0
length | 절대 단위 또는 상대 단위로 지정합니다. | - | 7.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

IMG { vertical-align: bottom }

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 4
CSS | 1

참고

  • 넷스케이프에서는 vertical-align 속성이 IMG 요소에만 적용됩니다.


border-collapse

표에서 셀 테두리의 표시 방법을 지정합니다.

기본 정보

초기값 | collapse(CSS), seperate(IE)
상속 | yes
적용 범위 | TABLE 요소

속성값

값 | 설명 | IE | NN
seperate | 셀의 테두리를 구분하여 표시합니다. | 5.0 | 7.0
collapse | 인접한 셀의 테두리를 합쳐서 표시합니다. | 5.0 | 7.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

예제 1
table { border-collapse: seperate }
셀 테두리가 분리되어 표시되도록 지정한 예제입니다.

예제 2
table { border-collapse: collapse }
인접한 셀 테두리가 합쳐서 표시되도록 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 5
넷스케이프 | 7
CSS | 2

참고

  • 인터넷 익스플로러 5.0에서는 seperate를 border-collapse의 초기값으로 사용합니다.


border-spacing

셀 테두리를 분리하여 표시하도록(border-collapse 속성을 seperate으로 지정) 한 경우, 인접한 셀 테두리 사이의 간격을 지정합니다. 값을 2개까지 지정할 수 있습니다.

  • 1개 지정 : 수평/수직 간격에 동일하게 적용됨.
  • 2개 지정 : 첫 번째 값은 수평, 두 번째 값은 수직 간격에 적용됨.

기본 정보

초기값 | 0
상속 | yes
적용 범위 | TABLE 요소

속성값

값 | 설명 | IE | NN
length | 셀 테두리가 분리된 표에서, 인접한 셀 테두리 사이의 간격을 양수값으로 지정합니다. | - | 7.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

TABLE { border: outset 10pt;
        border-collapse: separate;
        border-spacing: 15pt }
TD { border: inset 5pt }
셀 테두리가 15pt 간격으로 분리되어 표시되도록 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | n/a
넷스케이프 | 7
CSS | 2

참고

  • border-spacing에 의해 지정된 셀 사이의 간격은 표의 배경으로 채워집니다.


caption-side

캡션 위치를 지정합니다.

기본 정보

초기값 | top
상속 | yes
적용 범위 | CAPTION 요소

속성값

값 | 설명 | IE | NN
top | 캡션을 표의 위쪽에 위치시킵니다. | - | 7.0
bottom | 캡션을 표의 아래쪽에 위치시킵니다. | - | 7.0
left | 캡션을 표의 왼쪽에 위치시킵니다. | - | -
right | 캡션을 표의 오른쪽에 위치시킵니다. | - | -

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

CAPTION { caption-side: bottom;
          width: auto;
          text-align: left }
캡션이 표와 같은 너비로 표 아래쪽 왼쪽에 위치하도록 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | -
넷스케이프 | 7
CSS | 2


empty-cells

셀 테두리를 분리하여 표시하도록(border-collapse 속성을 seperate으로 지정) 한 경우, 내용이 없는 셀 테두리를 표시할 것인지 여부를 지정합니다.

기본 정보

초기값 | show
상속 | yes
적용 범위 | TABLE 요소

속성값

값 | 설명 | IE | NN
show | 내용이 없는 셀의 테두리를 표시합니다. | - | 6.2
hide | 내용이 없는 셀의 테두리를 표시하지 않습니다. | - | 6.2

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

TABLE { border-collapse: separate;
        empty-cells: show }
내용이 없는 셀의 테두리도 표시하도록 지정한 예제입니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | n/a
넷스케이프 | 6.2
CSS | 2

참고

  • W3C 스펙과는 다르게 넷스케이프 7.0에서는 empty-cells 속성의 초기값으로 hide를 사용합니다.
  • 공백 문자나 &nbsp;가 있는 셀은 내용이 없는 셀이 아닙니다.


table-layout

표의 크기를 셀의 내용에 따라 변하게 할 것인지 여부를 지정합니다.

기본 정보

초기값 | auto
상속 | no
적용 범위 | TABLE 요소

속성값

값 | 설명 | IE | NN
auto | 셀의 내용에 따라 표의 크기가 변합니다. | 5.0 | 7.0
fixed | 셀 내용과 관계없이 표의 크기가 고정됩니다. 표의 너비는 width 속성으로 지정할 수 있습니다. | 5.0 | 7.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

table.auto  { table-layout: auto }
table.fixed { table-layout: fixed }
표의 너비를 250 픽셀로 지정하고 셀 크기는 지정하지 않았을 때의 예제입니다.
table-layout: auto
나모 웹에디터 깔끔한 사용자 인터페이스

table-layout: fixed
나모 웹에디터 깔끔한 사용자 인터페이스

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 5
넷스케이프 | 7
CSS | 2


color

요소의 글자색을 지정할 때 사용합니다.

기본 정보

초기값 | 브라우저에 따라 다름
상속 | yes
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
color | 색깔을 색깔 이름(red, yellow 등)이나 RGB 코드값(#ff0000 또는 rgb(255,0,0))으로 지정합니다. | 4.0 | 4.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

H1 { color: olive }
H2 { color: #808000 }
H3 { color: rgb(128,128,0) }

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 3
넷스케이프 | 4
CSS | 1

참고

  • 넷스케이프 4.x에서는 폼 필드, DT, DD, HR, TABLE 요소에서 color 속성이 지원되지 않습니다.
  • 인터넷 익스플로러 3.0에서 폼 필드에서 color 속성이 지원되지 않습니다.
  • 색깔 이름은 브라우저에 따라 제대로 인식하지 못하는 경우가 있으므로 RGB 코드값을 사용하는 것이 좋습니다.


direction

글자의 방향을 지정할 때 사용합니다.

기본 정보

초기값 | ltr
상속 | yes
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
ltr | 내용을 왼쪽에서 오른쪽으로 표시합니다. | - | 7.0
rtl | 내용을 오른쪽에서 왼쪽으로 표시합니다. | - | 7.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

P { direction: rtl }

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | -
넷스케이프 | 7.0
CSS | 2

참고

  • 인터넷 익스플로러 5.0에서 부분적으로 지원되어, BDO 요소에 direction 속성을 사용할 수 있습니다.
  • direction 속성을 인라인-레벨 요소에 적용하려면 unicode-bidi 속성값이 "embed" 또는 "override"로 지정되어야 합니다.


letter-spacing

글자 간격을 지정할 때 사용합니다.

기본 정보

초기값 | normal
상속 | yes
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
normal | 글자 간격을 보통으로 지정합니다. | 4.0 | 6.0
length | 절대 길이 또는 상대 길이 단위로 원하는 글자 간격을 지정합니다. 음수값을 지정할 수도 있습니다. | 4.0 | 6.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

P { letter-spacing: 1pt }
DIV { letter-spacing: -0.5em }

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 6
CSS | 1

참고

  • 단어 사이의 간격을 지정하려면 word-spacing 속성을 이용합니다.


text-align

글자의 정렬 방식을 지정할 때 사용합니다.

기본 정보

초기값 | left
상속 | yes
적용 범위 | 블록 요소

속성값

값 | 설명 | IE | NN
left | 글자를 왼쪽으로 정렬합니다. | 3.0 | 4.0
right | 글자를 오른쪽으로 정렬합니다. | 3.0 | 4.0
center | 글자를 가운데로 정렬합니다. | 3.0 | 4.0
justify | 글자를 양쪽 정렬합니다. | 4.0 | 4.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

P { text-align: right }
DIV { text-align: left }

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 4
CSS | 1


text-decoration

글자의 꾸미기 모양을 지정할 때 사용합니다.

기본 정보

초기값 | none
상속 | no
적용 범위 | 블록 요소

속성값

값 | 설명 | IE | NN
none | 글자를 보통 모양으로 표시합니다. | 3.0 | 4.0
underline | 밑줄이 그어진 모양으로 표시합니다. underline | 3.0 | 4.0
overline | 글자 위에 줄이 그어진 모양으로 표시합니다. overline | 4.0 | 6.0
line-through | 가운데선이 그어진 모양으로 표시합니다. line-through | 3.0 | 4.0
blink | 글자를 깜박이게 표시합니다. | - | 4.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

P.line1 { text-decoration: underline }
 P.line2 { text-decoration: overline }

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 4
CSS | 1

참고

  • A, U, INS 요소는 text-decoration 속성의 기본값으로 underline을 사용하며, STRIKE, S, SEL 요소는 line-through 를 사용합니다.


text-indent

첫 줄의 들여쓰기 간격을 지정할 때 사용합니다.

기본 정보

초기값 | 0
상속 | yes
적용 범위 | 블록 요소

속성값

값 | 설명 | IE | NN
length | 절대 길이 또는 상대 길이 단위로 원하는 글자 간격을 지정합니다. 음수값도 지정할 수 있습니다. | 4.0 | 4.0
% | 부모 요소의 너비에 대한 비율로 첫 줄 들여쓰기 간격을 지정합니다. | 3.0 | 4.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

P { text-indent: 15px }
DIV { text-indent: 5em }

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 4
CSS | 1


text-shadow

글자에 그림자 효과를 줄 때 사용합니다.

기본 정보

초기값 | none
상속 | no
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
none | 글자에 그림자 효과를 적용하지 않습니다. | - | -
color | 그림자 색깔을 색깔 이름(red, yellow 등)이나 RGB 코드값(#ff0000 또는 rgb(255,0,0))으로 지정합니다. | - | -
length | 그림자 효과의 수직 시작점(vertical offset), 수평 시작점(horizontal offset), 반경(blur radius)을 공백 문자로 구분하여 지정합니다. | - | -

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

P { text-shadow: red 2px 2px 3px }
H2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px }
text-shadow의 색깔 속성값이 생략되었을 때는 요소의 색깔 속성으로 표시됩니다.

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | -
넷스케이프 | -
CSS | 2


text-transform

대소문자 쓰기 방식을 지정할 때 사용합니다.

기본 정보

초기값 | none
상속 | yes
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
none | 대소문자를 그대로 표시합니다. | 4.0 | 4.0
capitalize | 첫 글자만 대문자로 표시합니다. | 4.0 | 4.0
uppercase | 모든 글자를 대문자로 표시합니다. | 4.0 | 4.0
lowercase | 모든 글자를 소문자로 표시합니다. | 4.0 | 4.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

P { text-transform: uppercase }
DIV { text-transform: capitalize }

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 4
넷스케이프 | 4
CSS | 1


unicode-bidi

유니코드 Bi-Direction 알고리즘을 설정할 때 사용합니다.

기본 정보

초기값 | normal
상속 | no
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
normal | 기본값으로 표시합니다. | 5.0 | 7.0
embed | direction 속성에서 지정한 형태로 표시합니다. | 5.0 | 7.0
bidi-override | 해당 요소가 인라인 요소이거나 인라인 요소만을 포함한 블록 요소일 경우 속성을 덮어 씁니다.(override) | 5.0 | 7.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

H1.hebrew {direction: rtl; unicode-bidi: embed}
H1.english {direction: ltr; unicode-bidi: embed}

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 5
넷스케이프 | 7
CSS | 2


white-space

여러 개의 공백 문자 처리 방식을 지정할 때 사용합니다.

기본 정보

초기값 | normal
상속 | yes
적용 범위 | 블록 요소

속성값

값 | 설명 | IE | NN
normal | 여러 개의 공백 문자를 하나의 공백 문자로 처리합니다. | 5.5 | 4.0
pre | 여러 개의 공백 문자를 그대로 표시합니다. PRE 요소를 사용했을 때와 같습니다. | - | 4.0
nowrap | 자동 줄바꿈( word-wrap) 기능을 사용하지 않습니다. BR 요소를 사용하여 명시적으로 줄바꿈을 했을 때에만 줄바꿈이 됩니다. | 5.5 | 6.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

<table border="1">
 <colgroup span="3" width="100">
 <tr>
 <th>normal</th>
 <th>pre</th>
 <th>nowrap</th>
 </tr>
 <tr>
 <td style="white-space:normal">웹
 저작
 도구의
 표준</td>
 <td style="white-space:pre">웹
 저작
 도구의
 표준</td>
 <td style="white-space:nowrap">웹
 저작
 도구의
 표준</td>
 </tr>
 </table>

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 5.5
넷스케이프 | 4
CSS | 1


word-spacing

단어 사이의 간격을 지정할 때 사용합니다.

기본 정보

초기값 | normal
상속 | yes
적용 범위 | 모든 요소

속성값

값 | 설명 | IE | NN
normal | 글자 간격을 보통으로 지정합니다. | 6.0 | 6.0
length | 절대 길이 또는 상대 길이 단위로 원하는 글자 간격을 지정합니다. 음수값을 지정할 수도 있습니다. | 6.0 | 6.0

IE = 이 값을 지원하는 인터넷 익스플로러의 최소 버전
NN = 이 값을 지원하는 넷스케이프의 최소 버전

예제

P { word-spacing: 15pt }
DIV { word-spacing: 2em }

지원 브라우저/CSS 버전

이 CSS를 지원하는 브라우저와 CSS의 최소 버전은 아래와 같습니다.

인터넷 익스플로러 | 6
넷스케이프 | 6
CSS | 1

참고

  • 글자 사이의 간격을 지정하려면 letter-spacing 속성을 이용합니다.


HTML/CSS 레퍼런스란?

기능 문의 게시판

(주)세중 나모 인터랙티브 웹 사이트를 통해 기술적인 질문에 대한 답변을 얻을 수 있습니다.

도움말에서 궁금한 사항을 찾을 수 없는 경우에는 온라인 기술 지원 서비스를 이용하십시오. 기능 문의를 할 때에는 좀더 빠른 문제 해결을 위해 꼼꼼하게 문제점을 적는 것이 좋습니다. 문의하신 사항에 대해서는 휴일을 제외하고 24시간 안에 답변을 드립니다.

기능 문의 게시판으로 이동하려면 여기를 누르십시오.