테이블을 만드는 태그는 보통 다음과 같은 형태를 취합니다.
<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.writｅ(
'<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.writｅ('<HTML><HEAD>')
제한 된 화면 폭에서 보기 쉽게 하기위하여 이하 newWin.document.writｅ를 생략 함
// 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="Javascripｔ: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="Javascripｔ:act(fname.redfrom.value);">
<INPUT type="button" value="보조창 닫기"
onClick="Javascripｔ:winon=0;newWin.close()">
</FORM>
</DIV></DIV>
</BODY>
중요 사항 - 전체적인 색상 조합 가능 한 수는 red 162 * green 16 2* blue 2 = 16777216
- 여기서는 적색 16진수 첫글자에 따라 한개씩 표를 만들었다. 받아지는 수치가 표의 색상으로 어떻게 전달 되는가를 주시하라.
- 간격은 rgb 각각 16 진수 첫자 기준으로 하여 총 조회 할 수 있는 색상( 4096)
- error가 자주 난다고요. 기대하는 정상 작업이 아닐 때는 물론, 용량 문제, .. 등등으로 복잡한 프로에서 종종 그렇는데, bug가 있는지도 모르겠어요. 한번 찾아보세요.
'♧강의목록1♧ > 중독-인터넷.스마트폰.게임' 카테고리의 다른 글
| 악플에 시달리는 선행연예인들/예쁜드래스 (0) | 2008.11.24 |
|---|---|
| 서경대로고 (0) | 2008.11.08 |
| <-- 로고및 상단 소메뉴 시작 --> (0) | 2008.10.31 |
| 테이블만들기 (0) | 2008.10.31 |
| 테이블만들기 (0) | 2008.10.31 |