<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)를 가질 수 있습니다.

 

<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 요소를 사용할 것을 권장합니다.

     

    <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 요소를 이용하여 정의할 수 있습니다.


    출처 : 웹 디자인 그룹"(Web Design Group), Copyright ⓒ 2003-2005 (주)세중 나모 인터랙티브


    Posted by 굿프랜

     

    <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) 안에서도 허용됩니다. 이를 이용하여 프레임셋에서 문서가 보이지 않을 때에만 표시되어야 하는 광고 등의 콘텐츠를 포함시킬 수 있습니다.

     

    <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 요소의 내용을 표시하지 않습니다.


    출처 : 웹 디자인 그룹"(Web Design Group), Copyright ⓒ 2003-2005 (주)세중 나모 인터랙티브


    Posted by 굿프랜

     

    <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 부모 요소 안에 포함될 수 있는 요소여야 합니다. 예를 들어 OBJECTA 요소 안에 포함되어 있다면, OBJECT는 블록 요소를 내용으로 포함할 수 없습니다.

     

    <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 속성을 이용하면 보다 자유롭게 항목 스타일을 지정할 수 있습니다.

     

    <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> 
    OPTGROUPSELECT에 나열된 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 요소를 포함시키면 관련 옵션을 그룹으로 만들 수 있습니다.


    출처 : 웹 디자인 그룹"(Web Design Group), Copyright ⓒ 2003-2005 (주)세중 나모 인터랙티브


    Posted by 굿프랜

    굿프랜