소스 보시니깐
어지러브시져??? ^^; 넘 겁머찌 마시구염.... <br>
<br> 금 하나씩 설명 드리께염... 우선 이 공지사항 창은 지난번에 새창띠우기와는
또 다른 것이여염...
이번에 배우시게 될 것은 레이어와
테이블에 대해 좀더 자세히 겅부해 보기루 해염...
표를 만들어서 글자를 넣고요.. 이
표를 레이어 안에 넣습니다.<br> 그리고 자바스크립트로 창을 띄우고
닫게도 하고 마우스로 드레그 하여 자유로이 이동 할수 있게도 함미다.
구분하기 쉽도록 소스를 색깔별로 해봤어요. 설명을
드릴께요.
빨강색
html의 기본형식인건 아시져??? 이거 모르시는분....
바짝 반성...^^<br> 어떤
소스가 어디부분에 들어가는지 잘 보셔야 해요...<br> 자바스크립트
소스와 레이어,테이블 모두 <body>
~ </body> 사이에 들어감을
아실수 있겠져?
파랑색
자바스크립트 소스는 욜분덜 복잡하실까방 제가 자바스크립트
파일로 만들어 버렸어염. <br> 제
계정에 올려뜨니깐... 따로 하지 마시궁 그대로 사용하세염...<br> 자바스크립트
소스를 직접 보시고 싶으신 분들은
size="2" color="blue">http://members.tripod.co.kr/snowdrowb/java/notice-1.js
size="2" color="blue"> 이 경로로
<br> js파일을
다운 받으시고... 파일을 열어 보시려면 마우스오른쪽 버튼 하셔서 세번째
(편집)이 이떠염... <br> 그럼
메모장에 소스가 보여집미다. 특별히 수정하실 부분은 엄떠여...
<br> 본인의
계정에 올리시고 싶으신 분덜은 파일다운 바드셔가 올리심 되염...
보라색
<div> ~ </div>
size="2"> 레이어 태그 임미다. 흔히 div태그는 <div
align="center"> 이런 정렬태그나 필터효과 태그로 마니쓰이지만....<br>
여기서와
같이 레이어는 다른개념임돠.<br> 레이어에
대한 개념이 엄뜨신 분덜은...쉽게 유리판을 생각하세염.... <br> 문서위에
투명한 한겹이 더 있는 거처럼 둥둥 떠 있어 글자나 그림을 레이어로
만드실수 이떠염... <br> 겹쳐저
보인다고도 표현 할 수가 이께떠염...<br> 이
레이어 태그를 잘 활용하시면 문서를 더욱 효과적으로 꾸미실
수 있다고 자신있게? 말씀드림미당... ^0^<br>
color="purple"> left:130px;
top:100px; 이 태그로 레이어의
위치를 정합니다.... 보시면 왼쪽 여백과 위여백으로 레이어의 위치를
지정하죠.<br> width:395px;
height:290px; 레이어의 크기를
정합니다. 폭과 높이를 정의해서 크기를 결정합니다.
초록색
<table> ~ </table>
size="2">은 테이블...즉 우리가 흔히 보는 표입니다. 이제
레이어 안에 표를 만들어 너어야져???<br> 깔끔한
문서를 위해서 table은 필수여염... table태그를 모르시면 문서를 꾸미시는데
지장이 많으시리라 생각되어염... <br> 기본이나
마찬가지니 필히 관심있게 보시기 바랍니다. 자신의 의도에
마께 셀<td>두 적당히 나눠서 만들어 보세염...<br> [알림]
42번글 (이미지 위에 글자 스크롤하기)에서 table을 조금 배웠었지요?
다시함 설명드리께염...<br>
|
<table><br>
<tr><br> <td><br> </td><br> </tr><br>
</table> |
table의 기본구조
기억나시져???
이러심 한칸으루된 표가 생성이 되어염... |
<table><br>
<tr><br> <td><br> </td><br> <td><br>
</td><br> </tr><br> </table> |
<td><br>
</td>로 한칸이 더 생겨떠염...
이러심 두칸의 표가 생겨염... |
<br> 다음은
소스를 보면서 table 과 td의 속성 설정에 대해 설명 드릴께요.<br>
<br>
size="2" color="green"><table border="5" cellpadding="5"
cellspacing="0" width="100%" bordercolor="fuchsia"
bordercolordark="purple" bordercolorlight="fuchsia"><br>
<br> 이
부분이 table의 속성을 정하는 태그여염... <br> <br>
size="2" color="green">border
전체 테두리의 두깨를 정함미다.<br> <br>
size="2" color="green">cellpadding
테이블 안쪽의 여백을 정함. 즉, 표안에 글씨를 쓰면 지정한 수치만큼
위,아래,왼쪽,오른쪽으로 여백이 생기지염... 수치를
0으루 하시면 선에 글씨가 딱 붙어서 쓰여지겠져...<br> <br>
size="2" color="green">cellspacing
테두리선의 간격을 정함.
color="green">bordercolor테두리
색 정함<br> <br>
size="2" color="green">bordercolordark 테두리의
음지(아래,오른쪽) 색을 정함. bordercolorlight
size="2" color="black"> 태두리의 양지(왼쪽,위쪽) 색을 정함. <br>
<br>
size="2" color="green">width는
폭을 정하지염...여기서 100%를 준이유는 td의 속성에 의해 table의
크기는 자동으로 정해지기 때문임미다...<br>
size="2" color="green">td 즉
셀의 속성태그도 위 설명과 같습니다.
갈 색
size="2" color="black"> 창닫기 버튼을 만드러야 하는데염...
javascript:void(Hide(Notice))
를 링크 시킨거 아시겠져?<br>
size="2" color="maroon">onmouseover="window.status=(' ♡
다다버리깜??? ♡');return true;"
color="black">는 마우스를 올려노아뜰 때 밑 상황선에 나오는
size="2" color="maroon"> <br>
size="2" color="black">글자를 지정하고 onmouseout="window.status=('
♡ 나 이뽀??? ♡');return true;"
color="black">는 올려노았던 마우스가 바깥으루<br> 벗어
나뜰 때 밑 상황선에 나오는 메시지를 지정함미다.... onmouseover 와
onmouseout의 차이를 아시게쪄?<br> 암말두
안나오게 하구 시프심...onmouseout="window.status=('');return
true;" 이런식으루 해주심 되게찌염....^^*<br>
<br> 그럼...
자신의 환경에 맞게 만들어 보셔염...
태그를 메모장에 다 쓰시고 (다른이름으로
저장) 하셔서 모모모.html 하심 html문서가 생성됩니다.<br> 그리고
스펠, 띄어쓰기 하나라도 틀리면 의도대루 안되염... 항상 확인하시는
습관을 가지셔여... 그럼...빠띵^^* |