일단, 티스토리 블로그에 애드센스 광고를 붙이는 방법 알려드리겠습니다...

먼저, 애드센스에서 광고코드를 받으신 후, 광고를 달아놓을 블로그에서 스킨을 바꿔줍니다...
skin.html 에서 <div class="article"> 를 찾으신 뒤, <div class="article"> 의 바로 아랫줄에 애드센스에서 받은 광고코드를 써넣습니다.
만약, 양쪽에 광고를 두개 부착하고 싶으시다면, 아래의 코드대로 넣어주세요.

<table align="center">
<tr>
<td>
구글애드센스에서 받은 스크립트 광고코드
</td>

<td>
구글애드센스에서 받은 스크립트 광고코드
</td>
</tr>
</table>

위의 형식대로 넣으신 후, 적용하기 누르시면 양쪽에 광고 2개가 붙여 보여집니다...
하지만, 블로그의 글 넓이를 애드센스 광고스타일의 넓이 2개의 합보다 낮게 설정하시면, 아래와같이,
양쪽으로 붙지않고, 아래로 내려가버리게 됩니다..;
그러므로, 애드센스에서 광고스킨을 설정하실 때, 티스토리 블로그의 스킨 중, 게시글의 넓이의 1/2정도로 설정하셔야 합니다..

사용자 삽입 이미지

구글 애드센스의 광고넓이는  바꾸고싶지 않다, 티스토리 블로그의 스킨 넓이를 넓히고싶다, 블로그 넓이 넓히는 방법을 알려달라' 하시는 분들에게 블로그 넓이 넓히는 방법을 알려드리겠습니다...
의외로 간단하니,, 잘만 따라해주신다면 성공하실 수 있습니다~


먼저,
1. 스킨을 넓히실 블로그의 (http://블로그주소/owner/skin/edit) 로 들어가신 후, style.css 수정하는곳으로 내려가주세요.
2. style.css 에서 .article 혹은, *@post-width=* 를 찾아주세요
3. 찾으셨으면, *@post-width=* 의 뒷부분에 숫자가 보이실겁니다~( ***px )
4. 여기서 이 세자리 숫자가 블로그 게시글의 넓이입니다. 원하는 사이즈로 숫자를 수정해주세요
5. 수정하셨으면 마지막으로 적용 -> 블로그로 돌아가셔서 마음에 드는지, 확인해주세요...






끝입니다...
꽤나 간단한방법으로 블로그 넓이를 넓히는게 가능합니다.



이 아래는 구글 애드센스가 옆으로 붙여보여지는게 아니라, 아래로 정렬되어 보여지는 잘못된 소스입니다.
원래는 구글 애드센스 광고의 스크립트 두개를 이어붙여써넣어도 옆으로 이어져 붙여보여졌었는데요,,
소스를 바꾼건지, 몇달 전부터는 스크립트 두개를 이어붙이니, 뒤의 광고가 내려가 보여지더군요...


사용자 삽입 이미지

구글 애드센스 광고를 옆으로 붙여 보이게 하기 위해서는 테이블 소스가 필요합니다.
아래의 소스를 참고해주세요..
구글애드센스에서 받은 스크립트 광고코드 부분은 광고를 붙이실분이 받으신 광고 소스코드를 이야기하는겁니다..
구글애드센스에서 받은 스크립트 광고코드 부분에 <script>~ 부터의 모든 소스를 넣으시면 됩니다.

<table align="center">
<tr>
<td>
구글애드센스에서 받은 스크립트 광고코드
</td>

<td>
구글애드센스에서 받은 스크립트 광고코드
</td>
</tr>
</table>


수고하셨습니다~



구글 애드센스 부착에 어려움이 있으신분은 댓글 남겨주세요~
성심 성의껏 도와드리도록 하겠습니다~^^,,,
Posted by 승호/

<!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>  (0) 2009.01.15
html 주석 <!--...-->  (0) 2009.01.15
html 최상위 태그 <FRAMESET>  (0) 2009.01.15
html 최상위 태그 <BODY>  (0) 2009.01.15
html 최상위 태그 <HEAD>  (0) 2009.01.15
html 최상위 태그 <HTML>  (0) 2009.01.15
스크롤바 제작기 공개  (4) 2008.12.31
Posted by 승호/

<!--...-->

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

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

닫는 태그: 없음

속성

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

예제

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

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

지원 브라우저/HTML 버전

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

IE 3, NN 3

'html 태그 배우기' 카테고리의 다른 글

html 선언문 <!DOCTYPE>  (0) 2009.01.15
html 주석 <!--...-->  (0) 2009.01.15
html 최상위 태그 <FRAMESET>  (0) 2009.01.15
html 최상위 태그 <BODY>  (0) 2009.01.15
html 최상위 태그 <HEAD>  (0) 2009.01.15
html 최상위 태그 <HTML>  (0) 2009.01.15
스크롤바 제작기 공개  (4) 2008.12.31
Posted by 승호/

<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* (i는 정수)로 표시합니다. 예를 들어 ROWS="3*,*"이라고 정의한 프레임셋(*은i*과 동일)은 첫 번째 프레임의 높이가 두 번째 프레임 높이의 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 요소와 함께 사용할 수 있는 이벤트로는 onloadonunload가 있습니다.
  • 픽셀 길이를 사용할 때는 다양한 창 크기를 처리할 수 있도록 상대 길이와 함께 사용하는 것이 좋습니다. 픽셀 길이는 단지 크기가 고정된 그림이나 그 외 개체가 들어있는 프레임의 크기를 정할 때에만 사용되어야 합니다.
  • FRAMESET 요소는 또한 onloadonunload 속성을 이용하여 프레임이 읽히거나 제거될 때 클라이언트의 스크립트가 작동하도록 설정할 수 있습니다.

'html 태그 배우기' 카테고리의 다른 글

html 선언문 <!DOCTYPE>  (0) 2009.01.15
html 주석 <!--...-->  (0) 2009.01.15
html 최상위 태그 <FRAMESET>  (0) 2009.01.15
html 최상위 태그 <BODY>  (0) 2009.01.15
html 최상위 태그 <HEAD>  (0) 2009.01.15
html 최상위 태그 <HTML>  (0) 2009.01.15
스크롤바 제작기 공개  (4) 2008.12.31
Posted by 승호/

<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), 이를 대신하여 스타일시트를 사용하는 것이 좋습니다.

'html 태그 배우기' 카테고리의 다른 글

html 선언문 <!DOCTYPE>  (0) 2009.01.15
html 주석 <!--...-->  (0) 2009.01.15
html 최상위 태그 <FRAMESET>  (0) 2009.01.15
html 최상위 태그 <BODY>  (0) 2009.01.15
html 최상위 태그 <HEAD>  (0) 2009.01.15
html 최상위 태그 <HTML>  (0) 2009.01.15
스크롤바 제작기 공개  (4) 2008.12.31
Posted by 승호/
TAG <BODY>, html

<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 요소는 반드시 사용해야 합니다.

'html 태그 배우기' 카테고리의 다른 글

html 주석 <!--...-->  (0) 2009.01.15
html 최상위 태그 <FRAMESET>  (0) 2009.01.15
html 최상위 태그 <BODY>  (0) 2009.01.15
html 최상위 태그 <HEAD>  (0) 2009.01.15
html 최상위 태그 <HTML>  (0) 2009.01.15
스크롤바 제작기 공개  (4) 2008.12.31
태그연습장 공개  (0) 2008.12.31
Posted by 승호/
TAG <HEAD>, 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 요소는 HEADBODY로 구성된 HTML 문서 내용 전체를 포함합니다.

지원 브라우저/HTML 버전

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

IE all, NN all, HTML all

참고

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

'html 태그 배우기' 카테고리의 다른 글

html 최상위 태그 <FRAMESET>  (0) 2009.01.15
html 최상위 태그 <BODY>  (0) 2009.01.15
html 최상위 태그 <HEAD>  (0) 2009.01.15
html 최상위 태그 <HTML>  (0) 2009.01.15
스크롤바 제작기 공개  (4) 2008.12.31
태그연습장 공개  (0) 2008.12.31
html 일반 속성  (0) 2008.10.02
Posted by 승호/
TAG <html>, html

제가 사용하고있는 설정대로 일단 넣어보겠습니다~


<head> 와 </head> 사이에 넣어주세요~


  • <style type="text/css">
    .cate_scroll-list {
    position: absolute;
    top: 12px;
    left: 0px;
    border: 1px solid #ccc;
    background-color: #fff;
    width: 200px;
    height: 0px;
    overflow: auto;
    scrollbar-face-color: #DBDBDB;
    scrollbar-track-color: #F4F4F4;
    scrollbar-highlight-color: #DBDBDB;
    scrollbar-3dlight-color: #DBDBDB;
    scrollbar-shadow-color: #DBDBDB;
    scrollbar-darkshadow-color: #DBDBDB;
    scrollbar-arrow-color: #606060;
    }
    </style>


<body> 와 </body> 사이에 넣어주세요~

  • <SCRIPT LANGUAGE="JavaScript">
    <!--
    function startCateScrollScroll() {
    setTimeout("slideCateScroll()", 1);
    }
    function slideCateScroll() {
    var Sel_Height=195; //셀렉트 박스의 세로 크기 지정
    el = document.getElementById("cate_scroll-list");
    if (el.heightPos == null || (el.isDone && el.isOn == false)) {
    el.isDone = false;
    el.heightPos = 1;
    el.heightTo = Sel_Height;
    } else if (el.isDone && el.isOn){
    el.isDone = false;
    el.heightTo = 0; //셀렉트 영역이 닫힐때 크기 지정
    }
    if (Math.abs(el.heightTo - el.heightPos) > 1) {
    el.heightPos += (el.heightTo - el.heightPos) / 10;
    el.style.height = el.heightPos + "px";
    startCateScrollScroll();
    } else {
    if (el.heightTo == Sel_Height) {
    el.isOn = true;
    } else {
    el.isOn = false;
    }
    el.heightPos = el.heightTo;
    el.style.height = el.heightPos + "px";
    el.isDone = true;
    }
    }
    //-->
    </SCRIPT>




메뉴를 보여줄 위치에 넣어주세요~

<div id="cate_scroll" style="background-repeat:no-repeat; position:relative; left:0; top:0px;">
<span style="width:100%;height:45px;cursor: pointer" onclick="slideCateScroll()"><font color=black><b>메뉴 열기/닫기</b></span>
<div id="cate_scroll-list" class="cate_scroll-list" style="line-height:17px; padding-top:5; padding-right:5; padding-bottom:5; padding-left:20; overflow: auto;">


<table style="border:solid 1px silver;" cellpadding="1" cellspacing="1" width="200"bgcolor="white">
                <tr>
                <td width="200" style="border-bottom:1px silver solid" bgcolor="white" align=center><p>
<a href="http://jihansome.tistory.com">Home</a>
</p>    
</td>
                </tr>
                <tr>
                <td width="200" style="border-bottom:1px silver solid" bgcolor="white" align=center><p>
<a href="http://jihansome.tistory.com/guestbook">Guest Book</a>
</p>
</td>
                </tr>
                <tr>
                <td width="200" style="border-bottom:1px silver solid" bgcolor="white" align=center><p><a href="http://jihansome.tistory.com/rss">RSS</a></p>     </td>
                </tr>
                <tr>
                <td width="200" style="border-bottom:1px silver solid" bgcolor="white" align=center><p><a href=# onClick="window.external.AddFavorite(parent.location.href, document.title);">Favorite</a> </p>     </td>
                </tr>
                <tr>
                <td width="200" style="border-bottom:1px silver solid" bgcolor="white" align=center><p><a href="http://jihansome.tistory.com/tag">Tag Log</a></p>
</td>
                </tr>
                <tr>
                <td width="200" style="border-bottom:1px silver solid" bgcolor="white" align=center><p><a href="http://jihansome.tistory.com/owner">Admin</a></p>     </td>
                </tr>
                <tr>
                <td width="200" style="border-bottom:1px silver solid" bgcolor="white" align=center><p><a href="http://jihansome.tistory.com/owner/entry/post">New post</a></p>     </td>
                </tr>
        </table>

<br>

<table style="border:solid 1px silver;" cellpadding="1" cellspacing="1" width="200"bgcolor="white">
                <tr>
                <td width="200" style="border-bottom:1px silver solid" bgcolor="white" align=center>
<a href="http://cfs.tistory.com/custom/blog/12/121120/skin/images/tagnote.html" target=_blank>태그연습장</a>
                </td>
                </tr>

                <tr>
                <td width="200" style="border-bottom:1px silver solid" bgcolor="white" align=center>
<a href="http://cfs.tistory.com/custom/blog/12/121120/skin/images/scrollbar_maker.html" target=_blank>스크롤바 제작</a>
                </td>
                </tr>
        </table>

</div>
</div>

Posted by 승호/

일반 속성

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"은 오른쪽에서 왼쪽 방향을 의미합니다.

'html 태그 배우기' 카테고리의 다른 글

html 최상위 태그 <HTML>  (0) 2009.01.15
스크롤바 제작기 공개  (4) 2008.12.31
태그연습장 공개  (0) 2008.12.31
html 일반 속성  (0) 2008.10.02
html 이벤트 속성  (0) 2008.10.02
html 특수 인라인태그 <SUP>  (2) 2008.09.28
html 특수 인라인태그 <SUB>  (0) 2008.09.28
Posted by 승호/

이벤트 속성

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

예를들어 IMG 요소는 onmouseoveronmouseout 속성을 가지고 있는 경우, 이 속성은 자바스크립트 함수(문서의 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)되었을 때

윈도우 이벤트

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

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

'html 태그 배우기' 카테고리의 다른 글

스크롤바 제작기 공개  (4) 2008.12.31
태그연습장 공개  (0) 2008.12.31
html 일반 속성  (0) 2008.10.02
html 이벤트 속성  (0) 2008.10.02
html 특수 인라인태그 <SUP>  (2) 2008.09.28
html 특수 인라인태그 <SUB>  (0) 2008.09.28
html 특수 인라인태그 <SPAN>  (0) 2008.09.28
Posted by 승호/
<body> 와 </body> 사이에 넣어주시면 됩니다~~



<!-- box start -->
<table width=100% border=0  cellpadding=0 cellspacing=0
bgcolor=''
cellpadding=0 cellspacing=0>
<tr><td>
<!-- 간단한 계산기 -->
<center>
<table border=0 width=100% valign=top><tr><td align=center bgcolor=e5e5e5 height=30>
<b>간단한 계산기</b>
</td></tr>
<tr><td align=center>
<form name="Calculator">
<table border="2" cellspacing="3" bordercolor="black" bordercolorlight="black" bordercolordark="black">
<tr>
  <td colspan=4>
   <input type="text" name="answer" size="15" value="">
  </td>
</tr>
<tr valign="top">
  <td>
   <input type="button" name="times" size="80" value=" * " onClick="document.Calculator.answer.value += '*'">
  </td>
  <td>
   <input type="button" name="divided" size="80" value=" / " onClick="document.Calculator.answer.value += '/'">
  </td>
  <td>
   <input type="button" name="minus" size="80" value=" - " onClick="document.Calculator.answer.value += '-'">
  </td>
  <td>
   <input type="button" name="minus" size="80" value=" C " onClick="document.Calculator.answer.value = ''">
  </td>
</tr>
<tr valign="top">
  <td>
   <input type="button" name="seven" size="80" value=" 7 " onClick="document.Calculator.answer.value += '7'">
  </td>
  <td>
   <input type="button" name="eight" size="80" value=" 8 " onClick="document.Calculator.answer.value += '8'">
  </td>
  <td>
   <input type="button" name="nine" size="80" value=" 9 " onClick="document.Calculator.answer.value += '9'">
  </td>
  <td>
   <input type="button" name="zero" size="80" value=" 0 " onClick="document.Calculator.answer.value += '0'">
  </td>
</tr>
<tr>
  <td>
   <input type="button" name="four" size="80" value=" 4 " onClick="document.Calculator.answer.value += '4'">
  </td>
  <td>
   <input type="button" name="five" size="80" value=" 5 " onClick="document.Calculator.answer.value += '5'">
  </td>
  <td>
   <input type="button" name="six" size="80" value=" 6 " onClick="document.Calculator.answer.value += '6'">
  </td>
  <td>
   <input type="button" name="equals" size="80" value=" = " onClick="document.Calculator.answer.value = eval(document.Calculator.answer.value)">
  </td>
</tr>
<tr>
  <td>
   <input type="button" name="one" size="80" value=" 1 " onClick="document.Calculator.answer.value += '1'">
  </td>
  <td>
   <input type="button" name="two" size="80" value=" 2 " onClick="document.Calculator.answer.value += '2'">
  </td>
  <td>
   <input type="button" name="three" size="80" value=" 3 " onClick="document.Calculator.answer.value += '3'">
  </td>
  <td>
   <input type="button" name="plus" size="80" value=" + " onClick="document.Calculator.answer.value += '+'">
  </td>
</tr>
</table>

</td></tr></table>
<!-- 간단한 계산기 -->
</td></tr>
<tr height=22><td bgcolor=''><a href='' target=''></a></td></tr>

</td></tr></table>
<!-- box end -->

'비공개 > 종료' 카테고리의 다른 글

웃긴 사진 모음 033  (0) 2008.10.02
웃긴 사진 모음 032  (0) 2008.10.02
웃긴 사진 모음 031  (0) 2008.10.02
html 스크립트 - 계산기  (0) 2008.09.29
html 스크립트 - 상태바의 링크주소 숨기기  (0) 2008.09.29
웃긴 사진 모음 030  (0) 2008.09.28
웃긴 사진 모음 029  (0) 2008.09.28
Posted by 승호/
링크에 마우스를 대면 상태바에 링크주소가 보입니다.
이것을 가려주는 자바스크립트 소스입니다.

<body>와 </body> 사이에 넣어주세요~~

<script language="JavaScript">
<!--
function hidestatus()
{
window.status=''
return true
}
if (document.layers)
document.captureEvents(Event.mouseover | Event.mouseout)
document.onmouseover=hidestatus
document.onmouseout=hidestatus
// -->
</script>

모든 링크에 적용됩니다~

'비공개 > 종료' 카테고리의 다른 글

웃긴 사진 모음 032  (0) 2008.10.02
웃긴 사진 모음 031  (0) 2008.10.02
html 스크립트 - 계산기  (0) 2008.09.29
html 스크립트 - 상태바의 링크주소 숨기기  (0) 2008.09.29
웃긴 사진 모음 030  (0) 2008.09.28
웃긴 사진 모음 029  (0) 2008.09.28
웃긴 사진 모음 028  (0) 2008.09.28
Posted by 승호/

<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

'html 태그 배우기' 카테고리의 다른 글

태그연습장 공개  (0) 2008.12.31
html 일반 속성  (0) 2008.10.02
html 이벤트 속성  (0) 2008.10.02
html 특수 인라인태그 <SUP>  (2) 2008.09.28
html 특수 인라인태그 <SUB>  (0) 2008.09.28
html 특수 인라인태그 <SPAN>  (0) 2008.09.28
html 특수 인라인태그 <SCRIPT>  (0) 2008.09.28
Posted by 승호/
TAG <SUP>, html

<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

'html 태그 배우기' 카테고리의 다른 글

html 일반 속성  (0) 2008.10.02
html 이벤트 속성  (0) 2008.10.02
html 특수 인라인태그 <SUP>  (2) 2008.09.28
html 특수 인라인태그 <SUB>  (0) 2008.09.28
html 특수 인라인태그 <SPAN>  (0) 2008.09.28
html 특수 인라인태그 <SCRIPT>  (0) 2008.09.28
html 특수 인라인태그 <Q>  (0) 2008.09.28
Posted by 승호/
TAG <SUB>, html

<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 요소를 사용합니다.

'html 태그 배우기' 카테고리의 다른 글

html 이벤트 속성  (0) 2008.10.02
html 특수 인라인태그 <SUP>  (2) 2008.09.28
html 특수 인라인태그 <SUB>  (0) 2008.09.28
html 특수 인라인태그 <SPAN>  (0) 2008.09.28
html 특수 인라인태그 <SCRIPT>  (0) 2008.09.28
html 특수 인라인태그 <Q>  (0) 2008.09.28
html 특수 인라인태그 <PARAM>  (0) 2008.09.28
Posted by 승호/
TAG <SPAN>, html

<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 요소를 사용합니다.
Posted by 승호/
TAG <SCRIPT>, html

<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 요소를 사용합니다.
Posted by 승호/
TAG <Q>, html

<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

Posted by 승호/
TAG <PARAM>, html

<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.html">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는 블록 요소를 내용으로 포함할 수 없습니다.
Posted by 승호/
TAG <OBJECT>, html

<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="http://wstatic.naver.com/t/2008/0911/20080911113522.gif" usemap="#map1">
 <MAP name="map1">
    <AREA shape=rect coords="12,20,64,71"
href="http://jihansome.tistory.com" alt="사각형"> <AREA shape=circle coords="175,91,56" href="http://www.naver.com" alt="원"> </MAP>
사각형과 원 모양의 핫존을 갖는 이미지맵을 삽입한 예제입니다.

지원 브라우저/HTML 버전

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

IE all, NN all, HTML 3.2

참고

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

<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)를 가질 수 있습니다.
Posted by 승호/
TAG <MAP>, html

<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="http://sstatic.naver.com/search/images11/logo_naver.gif"
alt="네이버" width="143" height="40">
IMG 요소를 이용하여 그림을 삽입한 예제입니다.

네이버

네이버

지원 브라우저/HTML 버전

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

IE all, NN all, HTML all

참고

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

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

지원 브라우저/HTML 버전

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

IE 3, NN 6, HTML 4

참고

  • 스타일 시트의 vertical-alignfloat 속성을 이용하면 인라인 프레임을 보다 자유롭게 정렬할 수 있습니다.
Posted by 승호/
TAG <IFRAME>, html

<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)입니다. 따라서 PTABLE과 같은 블록 요소(Block Element)는 포함할 수 없습니다. 스타일 시트를 사용하면 글자 스타일을 좀 더 자유롭게 표현할 수 있습니다.

글자 크기를 크게

붉은색으로 표시


지원 브라우저/HTML 버전

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

IE all, NN all, HTML 3.2

참고

  • FONT 요소는 스타일 시트로 대체되어 HTML 4.01에서 권장하지 않는(deprecated) 요소입니다.
Posted by 승호/
TAG <FONT>, html

<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 속성을 사용하는 것이 좋습니다.
Posted by 승호/
TAG <BR>, html

<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

Posted by 승호/
TAG <BDO>, html

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

'html 태그 배우기' 카테고리의 다른 글

html 특수 인라인태그 <FONT>  (0) 2008.09.28
html 특수 인라인태그 <BR>  (0) 2008.09.28
html 특수 인라인태그 <BDO>  (0) 2008.09.28
html 특수 인라인태그 <BASEFONT>  (0) 2008.09.28
html 특수 인라인태그 <APPLET>  (0) 2008.09.28
html 특수 인라인태그 <A>  (0) 2008.09.28
html 속성값 형식  (0) 2008.09.28
Posted by 승호/

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

'html 태그 배우기' 카테고리의 다른 글

html 특수 인라인태그 <BR>  (0) 2008.09.28
html 특수 인라인태그 <BDO>  (0) 2008.09.28
html 특수 인라인태그 <BASEFONT>  (0) 2008.09.28
html 특수 인라인태그 <APPLET>  (0) 2008.09.28
html 특수 인라인태그 <A>  (0) 2008.09.28
html 속성값 형식  (0) 2008.09.28
html 태그연습장  (2) 2008.09.27
Posted by 승호/
TAG <APPLET>, html

<A>

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

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

닫는 태그: 필요

속성

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

속성 내용
href URI 하이퍼링크로 연결할 문서의 URI를 지정합니다. 하이퍼링크를 만들 때 반드시 지정해야 합니다. URI는 절대경로 또는 상대경로로 지정할 수 있습니다. 절대경로는 "http://jihansome.tistory.com"과 같이 주소 전체를 표시한 것을 말하고 상대경로는 "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://jihansome.tistory.com">블로그입니다~</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="test.html#chapter1">과 같이 책갈피를 지정한 파일 이름을 명시해 주어야 합니다.

지원 브라우저/HTML 버전

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

IE all, NN all, HTML all

참고

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

'html 태그 배우기' 카테고리의 다른 글

html 특수 인라인태그 <BDO>  (0) 2008.09.28
html 특수 인라인태그 <BASEFONT>  (0) 2008.09.28
html 특수 인라인태그 <APPLET>  (0) 2008.09.28
html 특수 인라인태그 <A>  (0) 2008.09.28
html 속성값 형식  (0) 2008.09.28
html 태그연습장  (2) 2008.09.27
html 글씨체 바꾸기  (8) 2008.04.15
Posted by 승호/
TAG <A>, html

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://jihansome.tistory.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 : 프레임 없는 전체 창에 표시합니다.

'html 태그 배우기' 카테고리의 다른 글

html 특수 인라인태그 <BASEFONT>  (0) 2008.09.28
html 특수 인라인태그 <APPLET>  (0) 2008.09.28
html 특수 인라인태그 <A>  (0) 2008.09.28
html 속성값 형식  (0) 2008.09.28
html 태그연습장  (2) 2008.09.27
html 글씨체 바꾸기  (8) 2008.04.15
html 마우스 커서  (14) 2008.04.11
Posted by 승호/