빛을 담자

$work_date = Date("Y-m-d");
 
  $split_date = split('-', $work_date);
  $small_date = substr($split_date[0], 2).$split_date[1].$split_date[2];
  $before_date = mktime(0, 0, 0, $split_date[1], $split_date[2], $split_date[0])-86000;
  $before_date = date("Y-m-d", $before_date);
  $split_date = split('-', $before_date);
  $before_date = substr($split_date[0], 2).$split_date[1].$split_date[2];

mktime으로 하루날짜를 뺀 후 다시 date를 하면 된다.

스트링형식의 날짜 "2007-12-24"를 받아
이전 일과 다음 일을 계산하는 간단한 스크립트를 만들어 보았습니다.

function moveDay(date) {
     
      var date_array = date.value.split("-"); //날짜를 쪼개 배열로 만든다.
      
      var month = parseInt(date_array[1], 10); //숫자형으로 변환, 10진수
      var day = parseInt(date_array[2], 10); //숫자형으로 변환, 10진수
      
      month--; //new date시 한달을 적게 넣어줘야 한다. 0이 1월이므로....
      day--; //하루 적게 (여러날을 빼거나 더해줘도 된다.)
        
      do_day = new Date(date_array[0], month, day); //날짜 초과분이나 부족분은 date에서 알아서 계산해준다. 그러므로 원하는 날짜에서 ?일후/?일전는 몇일을 손쉽게 계산할 수 있다.
        
      alert(do_day.getFullYear());
      alert(do_day.getMonth()+1);
      alert(do_day.getDate());

<input type='radio' name='sex' value='U' checked onClick="radioCheck(this.value)">전체</input>&nbsp;
<input type='radio' name='sex' value='M' onClick="radioCheck(this.value)">남자</input>&nbsp;
<input type='radio' name='sex' value='F' onClick="radioCheck(this.value)">여자</input>&nbsp;

function radioCheck(val) {
      document.getElementById("sex").value = val;

      alert(document.getElementById("sex").value);
}

플레쉬를 생성하면 같이 나오는 html코드를 보면 다음과 같은 부분이 있다.

<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="../chart/AC_RunActiveContent.js" language="javascript"></script>

<script language="javascript">
 if (AC_FL_RunContent == 0) {
  alert("이 페이지에는 AC_RunActiveContent.js가 필요합니다.");
 } else {
  AC_FL_RunContent(
   'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
   'width', '800',
   'height', '420',
   'src', 'bargraph',
   'quality', 'high',
   'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
   'align', 'middle',
   'play', 'true',
   'loop', 'true',
   'scale', 'showall',
   'wmode', 'window',
   'devicefont', 'false',
   'id', 'bargraph',
   'bgcolor', '#ffffff',
   'name', 'bargraph',
   'menu', 'true',
   'allowFullScreen', 'false',
   'allowScriptAccess','sameDomain',
   'movie', 'bargraph',
   'salign', ''
   ); //end AC code
 }
</script>

또한 다음과 같은 js파일도 생성된다.
AC_RunActiveContent.js 파일과 같이
출력하고 싶은 부분에서 상단에 <script>~~~~</script>를 사용하면 된다.

위 방법이 마음에 들지 않으면 이런 방법으로도 사용할 수 있다.

function drawFlash() {
    var flash = "<object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' ";
    flash += "codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0' ";
    flash == "width='800' height='420' id='bargraph' align='middle'>";
    flash += "<param name='allowScriptAccess' value='sameDomain' />";
    flash += "<param name='allowFullScreen' value='false' />";
    flash += "<param name='movie' value='../chart/bargraph.swf' /><param name='quality' value='high' />";
    flash += "<param name='bgcolor' value='#ffffff' />";
    flash += "<embed src='bargraph.swf' quality='high' bgcolor='#ffffff' width='800' height='420' ";
    flash += "name='bargraph' align='middle' allowScriptAccess='sameDomain' allowFullScreen='false' ";
    flash += "type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' />";
   
    document.write(flash);
  }

 원하는 부분에서
 <script>drawFlash();</script>

function changeClass(classname) {
  document.getElementById("text_div").className = classname;
}

<style>
    .text1 {
        ...
    }

    .text2 {
        ...
    }
</style>

<div id="text_div">변화될 부분</div>

<input type="button" onClick="changeClass('text1');" value="text1">
<input type="button" onClick="changeClass('text2');" value="text2">

이런 식으로 적용가능하다.

<input type='text' name='search_value'
        style='border-bottom:#C0C0C0 1px solid; border-left:#C0C0C0 1px solid; border-top:#C0C0C0 1px solid; border-right:#C0C0C0 1px solid;
        width:100;height:16'>

solid, dashed 등이 있어염 ^^;;

▣속성
• align="값" (값 = left / center / right)
-----표의 정렬 상태를 설정 합니다. 3.0, 3.0 이상
• backgroungd="이미지 파일 경로"
-----배경이 될 이미지 파일의 경로를 지정해 줍니다. 3.0, 4.0 이상
• bgcolor="값" (값 = 색이름 / SRGB)
-----배경 색상을 지정해 줍니다. 3.0, 3.0 이상
• bordercolor="값" (값 = 색이름 / SRGB)
-----표의 외곽선의 색상을 지정해 줍니다. 3.0, 3.0 이상
• border="픽셀"
-----표의 외곽선의 두께를 설정하며, 값이 "0"이면 외곽선이 보이지 않습니다.
• bordercolordark="값" (값 = 색이름 / SRGB)
-----표의 외곽선을 3차원으로 만들때 사용되는 어두운 색을 지정 3.0 이상
• bordercolorlight="값" (값 = 색이름 / SRGB)
-----표의 외곽선을 3차원으로 만들 때 사용되는 밝은 색을 지정 3.0 이상
• cellpadding="픽셀"
-----셀 경계와 셀 안의 내용과의 간격을 지정 3.0, 3.0 이상
• cellspacing="픽셀"
-----셀과 셀 사이의 간격을 지정 3.0, 3.0 이상
• cols="숫자"
-----표에 들어갈 열의 개수를 지정 4.0, 4.0 이상
• class="클래스 이름"
-----스타일 시트의 서식을 적용 4.0, 4.0 이상
• frame="값" (값 = above / below / border / hsides / Lhs / rhs / vside / void)
-----표 외곽선의 형태를 지정 border="1" 이상일 때 사용할 수 있습니다. 3.0 이상

above	바깥쪽 경계선 중 윗쪽만 나타남
below	바깥쪽 경계선 중 아래쪽만 나타남
border	기본적인 외곽선
hsides	바깥쪽 경계선 중 위아래만 나타남
Lhs	바깥쪽 경계선 중 왼쪽만 나타남
rhs	바깥쪽 경계선 중 오른쪽만 나타남
vside	바깥쪽 경계선 중 좌우만 나타남
void	외곽선이 나타 나지 않습니다.

• height="픽셀"
-----표의 높이를 설정
• hspace="픽셀"
-----표 위아래로 표 외곽 내용들과의 간격을 설정합니다. 3.0 이상
• id="id 이름"
-----class와 동일한 기능. 다만 홈페이지 내에서 한번만 명시 할 수 있습니다. 4.0, 4.0 이상
• rules="값" (값 = cols / rows / none / all / group)
-----표에서 셀 사이에 경계선을 설정합니다. 3.0 이상

cols	열 사이의 경계선만 그린다.
rows	행들 사이의 경계선만 그린다.
none	표 외곽선을 제외한 내부 셀 경계를 모두 지운다.
all	표 외곽선을 포함한 내부 셀 경계를 모두 그린다.
group	<TBODY>, <TFOOT>등 그룹들 안의 경계선을설정

• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 4.0, 4.0 이상
• title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우저에서는 풍선 도움말로 표시 4.0, 4.0 이상
• width="픽셀/(%)"
-----표의 너비를 설정 하며, 브라우저를 대비한 비율을 퍼센트로 사용 하기도 합니다.

예제:

<html> <head> <title>TABLE 태그</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> </head> <body bgcolor="white"> <table style="border: #000000 1px solid"> <caption align="TOP">style="border: #000000 1px solid"</caption> <tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr> <tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr> </table> <p> <table border="0"> <caption align="TOP">BORDER="0"</caption> <tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr> <tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr> </table> <p> <table border="1"> <caption align="TOP">BORDER="1"</caption> <tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr> <tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr> </table> <p> <table border="4"> <caption align="TOP">BORDER="4"</caption> <tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr> <tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr> </table> </body> </html>

결과:

style="border: #000000 1px solid"

a	b	c
x	y	z

BORDER="0"

a	b	c
x	y	z

BORDER="1"

a	b	c
x	y	z

BORDER="4"

a	b	c
x	y	z

<html> <head> <title>TABLE 태그</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> </head> <body bgcolor="white"> <table border="1" width="500" bgcolor="#999999"> <caption align="TOP">WIDTH="500" bgcolor="#999999"</caption> <tr><td>a</td><td>b</td><td>c</td></tr> <tr><td>x</td><td>y</td><td>z</td></tr> </table> <p> <table border="1" width=80%> <caption align="TOP">WIDTH=80% (500px의 80%)</caption> <tr><td>a</td><td>b</td><td>c</td></tr> <tr><td>x</td><td>y</td><td>z</td></tr> </table> </body> </html>

결과:

WIDTH="500" BGCOLOR="#999999" a b c x y z WIDTH=80% (500px의 80%) a b c x y z

<html> <head> <title>TABLE 태그</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> </head> <body bgcolor="white"> <table border="1" > <caption align="TOP">FRAME 속성을 사용하지 않을 때 </caption> <tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr> <tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr> </table> <p> <table border="1" frame=VOID> <caption align="TOP">FRAME=VOID</caption> <tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr> <tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr> </table> <p> <table border="1" frame=BORDER> <caption align="TOP">FRAME=BORDER</caption> <tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr> <tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr> </table> <p> <table border="1" frame=ABOVE> <caption align="TOP">FRAME=ABOVE</caption> <tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr> <tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr> </table> <p> <table border="1" frame=BELOW> <caption align="TOP">FRAME=BELOW</caption> <tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr> <tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr> </table> </body> </html>

결과:

FRAME 속성을 사용하지 않을 때

a	b	c
x	y	z

FRAME=VOID

a	b	c
x	y	z

FRAME=BORDER

a	b	c
x	y	z

FRAME=ABOVE

a	b	c
x	y	z

FRAME=BELOW

a	b	c
x	y	z

<html> <head> <title>TABLE 태그</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> </head> <body bgcolor="white"> <table border="1" frame=HSIDES> <caption align="TOP">FRAME=HSIDES</caption> <tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr> <tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr> </table> <p> <table border="1" frame=LHS> <caption align="TOP">FRAME=LHS</caption> <tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr> <tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr> </table> <p> <table border="1" frame=RHS> <caption align="TOP">FRAME=RHS</caption> <tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr> <tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr> </table> <p> <table border="1" frame=VSIDES> <caption align="TOP">FRAME=VSIDES</caption> <tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr> <tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr> </table> <p> <table border="1" BOX> <caption align="TOP">FRAME=BOX</caption> <tr><td width="150">a</td><td width="150">b</td><td width="150">c</td> </tr> <tr><td width="150">x</td><td width="150">y</td><td width="150">z</td> </tr> </table> </body> </html>

결과:

FRAME=HSIDES

a	b	c
x	y	z

FRAME=LHS

a	b	c
x	y	z

FRAME=RHS

a	b	c
x	y	z

FRAME=VSIDES

a	b	c
x	y	z

FRAME=BOX

a	b	c
x	y	z

▣원어 : Table Row / 시작태그:필요 함 / 종료태그:필요 없음
표의 행을 만드는 태그 입니다.
<TABLE>안에 들어가며 <TR>태그가 들어갈 때 마다 행이 바뀌고 이 태그 안에는 <TD>가 들어가 셀을 만들어 줍니다.

▣속성
• align="값" (값 = left / center / right / justify / char)
-----행에 들어갈 내용의 정렬 상태를 설정 합니다. 3.0, 3.0 이상
• bgcolor="값" (값 = 색이름 / SRGB)
-----배경 색상을 지정해 줍니다. 3.0, 3.0 이상
• bordercolor="값" (값 = 색이름 / SRGB)
-----표의 외곽선의 색상을 지정해 줍니다. 3.0 이상
• bordercolordark="값" (값 = 색이름 / SRGB)
-----표의 외곽선을 3차원으로 만들때 사용되는 어두운 색을 지정 3.0 이상
• bordercolorlight="값" (값 = 색이름 / SRGB)
-----표의 외곽선을 3차원으로 만들 때 사용되는 밝은 색을 지정 3.0 이상
• char="기준 알파벳"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• charoff="문자 개수"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• class="클래스 이름"
-----스타일 시트의 서식을 적용 4.0, 4.0 이상
• id="id 이름"
-----class와 동일한 기능. 다만 홈페이지 내에서 한번만 명시 할 수 있습니다. 4.0, 4.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 4.0, 4.0 이상
• title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우저에서는 풍선 도움말로 표시 4.0, 4.0 이상
• nowrap
-----한 행의 줄바꿈 기능을 해제합니다. 3.0, 3.0 이상
• valign="값" (값 = top / bottom / center / baseline)
-----행에 들어가는 내용의 정렬 방식을 위아래를 기준으로 설정 4.0, 4.0 이상

예제:

<html> <head> <title>TR 태그</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> </head> <body bgcolor="white"> 표에 행을 삽입한다. 즉 TR 태그가 삽입이 될 때마다 행이 바뀐다.<p> <table border="1"> <caption align="TOP">TR 태그의 정렬방식</caption> <tr align="left" valign="top"> <th colspan="3" align="CENTER">정렬방식</th> </tr> <tr align="left" valign="top"> <td width="200" height="50">LEFT, TOP</td> <td width="200" height="50" valign="middle">LEFT, MIDDLE</td> <td width="200" height="50" valign="bottom">LEFT, BOTTOM</td> </tr> <tr align="center" valign="middle"> <td width="200" height="50" valign="top">CENTER, TOP</td> <td width="200" height="50">CENTER, MIDDLE</td> <td width="200" height="50" valign="bottom">CENTER, BOTTOM</td> </tr> <tr align="right" valign="bottom"> <td width="200" height="50" valign="top">RIGHT, TOP</td> <td width="200" height="50" valign="middle">RIGHT, MIDDLE</td> <td width="200" height="50">RIGHT, BOTTOM</td> </tr> </table> </body> </html>

결과:

표에 행을 삽입 합니다. 즉 TR 태그가 삽입이 될 때마다 행이 바뀝니다.

TR 태그의 정렬방식

정렬방식
LEFT, TOP	LEFT, MIDDLE	LEFT, BOTTOM
CENTER, TOP	CENTER, MIDDLE	CENTER, BOTTOM
RIGHT, TOP	RIGHT, MIDDLE	RIGHT, BOTTOM

▣원어 : Table Data cell / 시작태그:필요 함 / 종료태그:필요 없음
표 내에 셀을 삽입 하며, <TD> 태그는 반드시 <TR> 태그 안에 들어가야 합니다.

▣속성
• align="값" (값 = left / center / right / justify / char)
-----행에 들어갈 내용의 정렬 상태를 설정 합니다. 3.0, 3.0 이상
• axis="셀 이름"
-----셀의 이름을 설정합니다. IE40, 4.0 이상
• axes="관련 내용"
-----셀의 내용과 부합하는 이름을 나열합니다. IE40, 4.0 이상
• backgroungd="이미지 파일 경로"
-----셀 안에 배경이 될 이미지 파일의 경로를 지정 3.0, 4.0 이상
• bgcolor="값" (값 = 색이름 / SRGB)
-----셀의 배경 색상을 지정 3.0, 3.0 이상
• bordercolor="값" (값 = 색이름 / SRGB)
-----셀 경계선에 색상을 지정 3.0 이상
• bordercolordark="값" (값 = 색이름 / SRGB)
-----셀 경계선을 3차원으로 만들때 사용되는 어두운 색을 지정 3.0 이상
• bordercolorlight="값" (값 = 색이름 / SRGB)
-----셀 경계선을 3차원으로 만들 때 사용되는 밝은 색을 지정 3.0 이상
• char="기준 알파벳"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• charoff="문자 개수"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• class="클래스 이름"
-----스타일 시트의 서식을 적용 4.0, 4.0 이상
• colspan="숫자"
-----두개 이상의 열의 공간을 하나의 열로 만들 때 사용 3.0, 3.0 이상
• id="id 이름"
-----class와 동일한 기능. 다만 홈페이지 내에서 한번만 명시 할 수 있습니다. 4.0, 4.0 이상
• rowspan="숫자"
----두개 이상의 행의 공간을 하나의 행으로 만들 때 사용. 3.0, 3.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 4.0, 4.0 이상
• title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우저에서는 풍선 도움말로 표시 4.0, 4.0 이상
• nowrap
-----셀 안의 줄바꿈 기능을 해제합니다. 3.0, 3.0 이상
• valign="값" (값 = top / bottom / center / baseline)
-----행에 들어가는 내용의 정렬 방식을 위아래를 기준으로 설정 4.0, 4.0 이상

예제:

<html> <head> <title>TD 태그</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> </head> <body bgcolor="white"> <table border="1"> <caption align="TOP">셀의 배경으로 그림</caption> <tr> <td width="170" align="left" valign="top">a </td> <td width="170" align="center" valign="middle">b </td> <td width="170" align="right" valign="bottom">c </td> </tr> <tr> <td width="170" height="50" background="image1.gif"> </td> <td width="170" height="50" background="image2.gif"> </td> <td width="170" height="50" background="image3.gif" > </td> </tr> </table> <p> <table border="1"> <caption align="TOP">셀의 배경으로 색 </caption> <tr> <td width="170" height="50" align="left" valign="top">왼쪽 위 정렬</td> <td width="170" height="50" align="center" valign="middle">가운데 정렬</td> <td width="170" height="50" align="right" valign="bottom">오른쪽 아래 정렬</td> </tr> <tr> <td width="170" height="50" bgcolor="#CCCCCC" align="left" valign="top">a</td> <td width="170" height="50" bgcolor="#66CCFF" align="center" valign="center">b</td> <td width="170" height="50" bgcolor="#FFCCCC" align="right" valign="bottom">c</td> </tr> </table> </body> </html>

결과:

셀의 배경으로 그림

a	b	c

셀의 배경으로 색

왼쪽 위 정렬	가운데 정렬	오른쪽 아래 정렬
a	b	c

▣원어 : Table BODY / 시작태그:필요 없음 / 종료태그:필요 없음
           Table FOOTer / 시작태그:필요 함 / 종료태그:필요 없음
           Table HEADer / 시작태그:필요 함 / 종료태그:필요 없음
테이블을 머리말, 본문, 꼬리말로 나누었을 때 <THEAD>는 머리말, <TBODY>는 본문에 해당하며 그리고 <TFOOT>는 꼬리말에 해당 합니다. 이 태그는 시작 태그만 사용해도 무방합니다.

▣속성
• align="값" (값 = left / center / right / justify / char)
-----들어갈 내용의 정렬 상태를 설정 합니다. 3.0 이상
• id="id 이름"
-----class와 동일한 기능. 다만 홈페이지 내에서 한번만 명시 할 수 있습니다. 4.0 이상
• char="기준 알파벳"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• charoff="문자 개수"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• class="클래스 이름"
-----스타일 시트의 서식을 적용 4.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 4.0 이상
• valign="값" (값 = top / bottom / center / baseline)
-----열에 들어가는 내용의 정렬 방식을 위아래를 기준으로 설정 4.0 이상

예제:

<html> <head> <title>T(HEAD, BODY, FOOT)태그</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> </head> <body bgcolor="white"> <table border="1" width=500> <caption>TBODY 태그</caption> <thead> <tr bgcolor="#FF9999"><td>THEAD<td>THEAD<td>THEAD</tr> <tfoot> <tr bgcolor="#99CCFF"><td>TFOOT<td>TFOOT<td>TFOOT</tr> <tbody> <tr bgcolor="#0099CC"><td>TBODY<td>TBODY<td>TBODY</tr> <tr bgcolor="#0099CC"><td colspan="3">TBODY</tr> </tbody> <tbody> <tr bgcolor="#0099CC"><td colspan="3">TBODY</tr> <tr bgcolor="#0099CC"><td>TBODY<td>TBODY<td>TBODY</tr> </tbody> </table> </body> </html>

결과를 보면 TFOOT은 먼저 기술 하여도 제일 마지막에 나타나고 TBODY는 본문에 해당하는 중간에 나타납니다.

TBODY 태그

THEAD	THEAD	THEAD
TFOOT	TFOOT	TFOOT
TBODY	TBODY	TBODY
TBODY
TBODY
TBODY	TBODY	TBODY

▣원어 : Table Header cell / 시작태그:필요 함 / 종료태그:필요 없음
보통은 표에 가장 윗 줄에 위치하며 각 열의 제목을 나타낼 때 쓰며, 태그자 적용되면 글꼴이 굵게 되고 가운데 정렬이 됩니다.

▣속성
• align="값" (값 = left / center / right / justify / char)
-----행에 들어갈 내용의 정렬 상태를 설정 합니다. 3.0, 3.0 이상
• axis="셀 이름"
-----셀의 이름을 설정합니다. IE40, 4.0 이상
• axes="관련 내용"
-----셀의 내용과 부합하는 이름을 나열합니다. IE40, 4.0 이상
• backgroungd="이미지 파일 경로"
-----셀 안에 배경이 될 이미지 파일의 경로를 지정 3.0, 4.0 이상
• bgcolor="값" (값 = 색이름 / SRGB)
-----셀의 배경 색상을 지정 3.0, 3.0 이상
• bordercolor="값" (값 = 색이름 / SRGB)
-----셀 경계선에 색상을 지정 3.0 이상
• bordercolordark="값" (값 = 색이름 / SRGB)
-----셀 경계선을 3차원으로 만들때 사용되는 어두운 색을 지정 3.0 이상
• bordercolorlight="값" (값 = 색이름 / SRGB)
-----셀 경계선을 3차원으로 만들 때 사용되는 밝은 색을 지정 3.0 이상
• char="기준 알파벳"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• charoff="문자 개수"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• class="클래스 이름"
-----스타일 시트의 서식을 적용 4.0, 4.0 이상
• colspan="숫자"
-----두개 이상의 열의 공간을 하나의 열로 만들 때 사용 3.0, 3.0 이상
• id="id 이름"
-----class와 동일한 기능. 다만 홈페이지 내에서 한번만 명시 할 수 있습니다. 4.0, 4.0 이상
• rowspan="숫자"
-----두개 이상의 행의 공간을 하나의 행으로 만들 때 사용 3.0, 3.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 4.0, 4.0 이상
• title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우저에서는 풍선 도움말로 표시 4.0, 4.0 이상
• nowrap
-----셀 안의 줄바꿈 기능을 해제합니다. 3.0, 3.0 이상
• valign="값" (값 = top / bottom / center / baseline)
-----행에 들어가는 내용의 정렬 방식을 위아래를 기준으로 설정 4.0, 4.0 이상

예제:

<html> <head> <title>TH 태그</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> </head> <body bgcolor="white"> <table border="1"> <caption align="TOP">TH 태그와 TD 태그 비교</caption> <tr> <th>TH</th> <th>TH</th> <th>TH</th> </tr> <tr> <td width="150">TD</td> <td width="150">TD</td> <td width="150">TD</td> </tr> <tr> <td width="150">TD</td> <td width="150">TD</td> <td width="150">TD</td> </tr> <tr> <td width="150">TD</td> <td width="150">TD</td> <td width="150">TD</td> </tr> </table> </body> </html>

결과를 보면 TH 태그는 진하고 굵게 표시되며 가운데 정렬이 되고, TD 태그는 디폴트를 형성합니다.

TH 태그와 TD 태그 비교

TH	TH	TH
TD	TD	TD
TD	TD	TD
TD	TD	TD

▣원어 : table CAPTION / 시작태그:필요 함 / 종료태그:필요 함
이 태그는 <TABLE>태그 내에서만 사용 되며, 테이블에 대한 제목이나 설명을 기재 할 때 사용합니다. HTML 3.2 표준이지만 Netscape에서는 Align 속성이 적용되지 않습니다.

▣속성
• align="값" (값 = top / bottom / left / right)
-----caption 태그의 내용의 정렬 방식을 지정 3.0
• id="id 이름"
-----class와 동일한 기능. 다만 홈페이지 내에서 한번만 명시 할 수 있습니다. 4.0, 4.0 이상
• class="클래스 이름"
-----스타일 시트의 서식을 적용 4.0, 4.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 4.0, 4.0 이상
• title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우저에서는 풍선 도움말로 표시 4.0, 4.0 이상

예제:

<html> <head> <title>CAPTION 태그</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> </head> <body bgcolor="white"> <table border="1"> <caption align="top">CAPTION</caption> <tr> <td width="150">TOP</td> <td width="150">caption 정렬 방식</td> </tr> </table><p> <table border="1"> <caption align="bottom">CAPTION</caption> <tr> <td width="150">BOTTOM</td> <td width="150">caption 정렬 방식</td> </tr> </table><p> <table border="1"> <caption align="left">CAPTION</caption> <tr> <td width="150">LEFT</td> <td width="150">caption 정렬 방식</td> </tr> </table><p> <table border="1"> <caption align="right">CAPTION</caption> <tr> <td width="150">RIGHT</td> <td width="150">caption 정렬 방식</td> </tr> </table> </body> </html>

결과는 caption 태그의 정렬 방식입니다.

CAPTION

TOP	caption 정렬 방식

CAPTION

BOTTOM

caption 정렬 방식

CAPTION

LEFT	caption 정렬 방식

CAPTION

RIGHT

caption 정렬 방식

▣원어 : table COLumn GROUP / 시작태그:필요 함 / 종료태그:필요 없음
테이블의 그룹에 대한 속성을 설정 하며, 시작 태그만 사용 합니다. HTML 3.2 표준이지만 Netscape에서는 Align 속성이 적용되지 않습니다.

▣속성
• align="값" (값 = top / bottom / left / right)
-----colgroup태그의 내용이 어느 쪽에 정렬할 것인지를 지정 3.0
• id="id 이름"
-----class와 동일한 기능. 다만 홈페이지 내에서 한번만 명시 할 수 있습니다. 4.0, 4.0 이상
• char="기준 알파벳"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• charoff="문자 개수"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• span="열 개수"
-----열의 개수를 지정 3.0, 4.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 4.0, 4.0 이상
• width="픽셀"
-----열의 셀 너비를 설정 4.0, 4.0 이상
• valign="값" (값 = top / bottom / center / baseline)
-----열에 들어가는 내용들의 정렬 방식을 위아래 기준으로 설정 4.0, 4.0 이상

예제:

<html> <head> <title>COLGROUP 태그</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> </head> <body bgcolor="white"> <table border="1"> <caption align="TOP"> COLGROUP 태그 </caption> <colgroup> <col align="left"> <col align="center"> <colgroup span="2" align="right"> <tr> <td width="200">Align="Left"</td> <td width="200">Align="Center"</td> <td width="200">Align="Right"</td> </tr> <tr> <td width="200">a</td> <td width="200">b</td> <td width="200">c</td> </tr> <tr> <td width="200">a</td> <td width="200">b</td> <td width="200">c</td> </tr> <tr> <td width="200">a</td> <td width="200">b</td> <td width="200">c</td> </tr> </table> </body> </html>

결과:

COLGROUP 태그

Align="Left"	Align="Center"	Align="Right"
a	b	c
a	b	c
a	b	c

▣원어 : table COLumn / 시작태그:필요 함 / 종료태그:사용 금지
각 열에 대한 속성을 설정 하며, 시작 태그만 사용 합니다. HTML 3.2 표준이지만 Netscape에서는 Align 속성이 적용되지 않습니다.

▣속성
• align="값" (값 = top / bottom / left / right)
-----col태그의 내용이 어느 쪽에 정렬할 것인지를 지정 3.0
• id="id 이름"
-----class와 동일한 기능. 다만 홈페이지 내에서 한번만 명시 할 수 있습니다. 4.0, 4.0 이상
• char="기준 알파벳"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• charoff="문자 개수"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• span="열 개수"
-----열의 개수를 지정 3.0, 4.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 4.0, 4.0 이상
• width="픽셀"
-----열의 셀 너비를 설정 4.0, 4.0 이상
• valign="값" (값 = top / bottom / center / baseline)
-----열에 들어가는 내용들의 정렬 방식을 위아래 기준으로 설정 4.0, 4.0 이상

예제:

<html> <head> <title>COL 태그</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> </head> <body bgcolor="white"> <table border=1> <caption align="top">COL 태그</caption> <colgroup> <col align="right"> <col align="center"> <tr> <td width="300">ALIGN="RIGHT"</td> <td width="300">ALIGN="CENTER"</td> </tr> </table> </body> </html>

결과를 보면 다음과 같습니다...^^

COL 태그

ALIGN="RIGHT"

ALIGN="CENTER"

date() 포멧---------------------------------------------------------------------

a : "am" or "pm" 표시
A : "AM" or "PM" 표시
d : 오늘이 몇일인지 표시 "01" to "31"
D : 영문으로 요일을 표시 "Mon", "Fri"
F : 영문으로 달을 표시 "January", "July"
h : 12시간을 표시. 오후 3시라도 03으로 표시. "01" to "12"
H : 24시간을 표시. 오후 3시 경우 15로 표시. "00" to "23"
g : 12시간을 표시. h와 다른 점은 0이 없다. "1" to "12"
G : 24시간을 표시. H와 다른점은 0이 없다. "0" to "23"
i : 분을 표시. "00" to "59"
j : 오늘이 몇일인지 표시. d와 다른 점은 0이 앞에 없다. "1" to "31"
l(소문자 엘) : "Friday"식으로 표시
m : 달(month)을 표시. "01" to "12"
n : 달을 표시. 0없이 "1" to "12"
M : "Jan"으로 표시
s : 초(sec)를 표시 "00" to "59"
t : 이번 달의 마지막 표시 "28" 부터 "31"일 까지
U : 기준 시점(GMT 1970년 1월 1일 00:00:00)으로부터 지난 시간을 초로 표시
w : 이번 주를 숫자로 표시 "0"(일요일) 부터 "6"(토요일)로 표시
Y : 연도(year)를 4자리로 표시. "2001"
y : 연도를 2자리로 표시. "01"
z : 올해부터의 날(day) 표시. "0" 부터 "365" 로 표시

--------------------------------------------------------------------------------

도저히 못외우겠다.