♧강의목록1♧/중독-인터넷.스마트폰.게임

<HTML><HEAD><TITLE>아! 멋있는 바로 당신!</TITLE>

花受紛-동아줄 2008. 12. 8. 10:06

 

<HTML><HEAD><TITLE>아! 멋있는 바로 당신!</TITLE>
<STYLE>
BODY{filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=yellow,EndColorStr=lime)'}
</STYLE></HEAD>
<BODY marginheight=0 marginwidth=0 text=black>
<DIV align=center>
<STYLE>P{font-size:30pt;line-height:1;font-family:궁서;margin-top:25pt}</STYLE>
<P>여기에 적힌 내용이 본문이 됩니다.
<P>당신이 내용을 준비했다면 여기에 붙여 넣어 보세요!
</DIV></BODY></HTML>

=====================================================
테이블을 만드는 태그는 보통 다음과 같은 형태를 취합니다.

<table> -> 테이블을 시작한다
<tr> -> 테이블의 한 행(줄)을 시작한다
<td>...</td> -> 테이블 안의 한 셀(칸)을 시작하고 끝낸다
<td>...</td> -> 테이블 안의 두 번째 셀(칸)을 시작하고 끝낸다
</tr> -> 테이블 안의 한 행(줄)을 종료한다
</table> -> 테이블이 끝난다

위와 같은 소스라면 다음과 같은 태그가 만들어 지겠지요?

여기서 알아야 할 태그는 우선 테이블의 시작과 끝을 알리는 <table>...</table>태그,

테이블의 줄을 의미하는 <tr>...</tr>태그, 그리고 그 칸을 의미하는 <td>...</td>태그입니다.
이 세가지 태그만으로도 충분히 테이블의 표현이 가능합니다.

이번강좌에서는 이런식으로 테이블태그가 구성된다는것만 아시고 다음강좌에서 기본 테이블을 만들어 보겠습니다.

<table>태그에서 <tr>태그는 테이블의 줄에 해당하고, 그줄의 칸에 해당하는것이 <td>입니다.

<팁> - 테이블의 중요성
웹페이지 작업을 할 때 테이블을 이용하면 보다 깔금하고 세련된 웹페이지를 만들 수 있습니다. 큰 그림의 경우는 조각을 내어 표에 삽입을 합니다.

그렇게 하면 이미지의 로딩 속도도 빨라지게 됩니다. 따라서 모든 웹페이지는 표가 사용되었다고 해도 지나친 표현이 아닙니다
==============================================================

시작 할 적색 수치(0-15):

<HEAD>
<SCRIPT Language="Javascript" src="../../pub/pubcss.js"></SCRIPT>
<SCRIPT Language="Javascript">basicset(2,'std')</SCRIPT>

<SCRIPT Language = "Javascript">
<!-- 감춤
var winon=0  // 보조창이 열려있는가 ?
if (navigator.appName == "Netscape")
  document.write(
    '<SPAN class=trans>Netscape에서는 제대로 표현 않될 수 있슴</SPAN>')

function makearray(n) {
   this.length = n;
   for(var i = 1; i <= n; i++)
      this[i] = 0;   //empty array
   return this;
}

function hex(i) {
   if (i < 0)
      return "00";
   else if (i > 255)
      return "ff";
   else
      return "" + hexa[Math.floor(i/16)] + hexa[i%16];  // 16진수 만듬
}

hexa = new makearray(16);
for(var i = 0; i < 10; i++)
hexa[i] = i;
hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
hexa[13]="d"; hexa[14]="e"; hexa[15]="f";  // hexa digit generate

function setbgcolor(r, g, b) {
   var hr = hex(r); var hg = hex(g); var hb = hex(b);
   document.bgcolor = "#"+hr+hg+hb;  //  red, green, blue 색상 조합
}

function act(redfrom){
if (winon==1) newWin.close();
if((fname.redfrom.value<0)||(fname.redfrom.value>15)){
   alert!('0-15 사이의 수치를 입력하세요'); return;}
str='toolbar=no,location=yes,scrollbars=yes,width=600,height=450'
newWin=window.open('','',str)
winon=1;
newWin.document.write('<HTML><HEAD>')
제한 된 화면 폭에서 보기 쉽게 하기위하여 이하 newWin.document.write를 생략 함

// style set
cssstr='<LINK rel=stylesheet type="text/css" href="../../pub/st'
생략(cssstr+'pub.css">');
  if (navigator.appName == "Netscape") cssstr+='ns'
  else cssstr+='ex';
  생략(cssstr+'std.css">');
  생략(cssstr+'pub.css">');
생략('</HEAD>')
생략('<BODY><CENTER><DIV class="title" '+
'align="center"><SPAN class=teal><B><IMG src=../gif/rfbtexm3.gif>')
생략(' Color Table 만들기 예제 ')
생략('<A href="Javascript:winon=0;self.close()">')
생략('<IMG src="../../gif/arstop.gif" border=0 width=22 '+
    'alt="닫기">닫기</A></B></SPAN>;</DIV><BR>');
생략('<DIV class=std><SPAN class=trans>시간이 약간 걸림,'+
   ' 작업 중 닫으면 오류 남.</SPAN><BR>');
var i=redfrom;
if ((i<0) || (i>15)) return;
for (i=redfrom; i<=redfrom; i++){
  생략("red(<SPAN class=red>"+hexa[i]+'0</SPAN>)  green(<SPAN class=green>');
  생략('##</SPAN>)  blue(<SPAN class=blue>##</SPAN>)</DIV>');
  생략('<TABLE border=1 cellpadding=0 cellspacing=0><TR><TD'+
   ' align=center class=red>'+hexa[i]+'0</TD>');
  var headstr='';
  for (var t=0; t<=15; t++){
   headstr+='<TD><SPAN class=green>##</SPAN><SPAN class=blue>'+
    hexa[t]+'0</SPAN></TD>'
  }
  headstr+='</TR>'
  생략(headstr);

  for (var j=0; j<=15; j++){
   생략("<TR>")
   for (var k=0; k<=15; k++){
    생략(
"<TD width=6% bgcolor=" + hexa[i]+"0" + hexa[j]+ "0" + hexa[k] + "0>");
    생략(
"<FONT color=" + hexa[15-i] + "0" + hexa[15-j] + "0" + hexa[15-k] + "0>");
    생략(hexa[j]+"0"+ hexa[k]+"0</FONT></TD>");
   }
   생략("</TR>");
  }
생략("</TABLE>");
}
생략("</BODY>");
생략("</HTML>");
}
// 감춤 끝  -->
</SCRIPT>
</HEAD>

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

<BODY>
<A name="top"></A>
<CENTER>

<H1><IMG src="../../gif/ictrio.gif" alt="Trio"> Color Table 만들기 예제</H1>

<TABLE width=95%><TR><TD>
<IMG src=../gif/rfbtexm3.gif><BR><BR>

<DIV class=brown><DIV class=indent>
<FORM name="fname">시작 할 적색 수치(0-15):
<INPUT type="text" name="redfrom" value=8 size=2>
<INPUT type="button" value="색상표 작성"
onClick="Javascript:act(fname.redfrom.value);">
<INPUT type="button" value="보조창 닫기"
onClick="Javascript:winon=0;newWin.close()">
</FORM>
</DIV></DIV>
</BODY>

 중요 사항
전체적인 색상 조합 가능 한 수는 red 162 * green 16 2* blue 2 =
16777216
16777216
여기서는 적색 16진수 첫글자에 따라 한개씩 표를 만들었다. 받아지는 수치가 표의 색상으로 어떻게 전달 되는가를 주시하라.
간격은 rgb 각각 16 진수 첫자 기준으로 하여 총 조회 할 수 있는 색상(
4096
4096)
error가 자주 난다고요. 기대하는 정상 작업이 아닐 때는 물론, 용량 문제, .. 등등으로 복잡한 프로에서 종종 그렇는데, bug가 있는지도 모르겠어요. 한번 찾아보세요.