<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) 요소입니다.

 

<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 속성으로 지정한 프레임이 존재하지 않을 경우, 링크는 새 창에서 열립니다.

 

<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


 

<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

참고

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

 

<BLOCKQUOTE>

BLOCKQUOTE 요소는 인용한 단락을 표시할 때 사용합니다. BLOCKQUOTEQ 요소와는 달리 PTABLE과 같은 블록 요소를 포함할 수 있습니다. 하지만 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 요소를 사용하는 것은 좋지 않습니다.

 

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

 

<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 속성을 사용하는 것이 좋습니다.

 

<BUTTON>

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

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

닫는 태그: 필요

속성

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

속성 내용
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 요소와 사용할 수 있는 이벤트로는 onfocusonblur가 있습니다.

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


Posted by 굿프랜

 

<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

참고

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

 

<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-leftmargin-right를 "auto"로 지정)을 지원하지 않을 때 CENTER 요소가 표를 가운데 정렬하는 데 유용하게 사용됩니다.
  • CENTER 요소는 스타일 시트로 대체되어 HTML 4.01에서 권장하지 않는(deprecated) 요소입니다.

 

<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 요소를 사용하면 형식을 유지할 수 있습니다.

 

<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 요소가 지원되지 않기 때문에 너비와 정렬 속성을 지정은 TDTH 요소 안에서 해줍니다.
  • 인터넷 익스플로러에서는 align="char"를 지원하지 않습니다.

 

<COLGROUP>

COLGROUP 요소는 표의 세로줄 그룹을 만들 때 사용합니다. COLGROUP 요소는 TABLE 요소 내에서 CAPTIONTHEAD 앞에 위치해야 합니다. 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 속성보다 우선합니다.

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


Posted by 굿프랜

 

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

 

<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 속성을 사용하도록 권장하고 있습니다.

 

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

 

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

     

    <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 요소가 있습니다.

     

    <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>인라인 요소</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


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


    Posted by 굿프랜

    굿프랜