'HTML태그'에 해당되는 글 1건


 

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

 

<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>

닫는 태그: 필요

속성

볼드체로 표시된것은 필수 속성,회색으로 표시된 것은 HTML4.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


 

<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 요소를 사용하는 것이 좋습니다.

 

<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에 대한 상대 경로로 표시됩니다.

 

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

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


Posted by 굿프랜
1

굿프랜