레이어 공지창 띄우기

고정석

(*.55.91.229) 조회 수 6223 댓글 0

+ - Up Down Comment Print

레이어 공지창 띄우기

onmouseover="dragObj=Notice; drag=1;move=0" onmouseout="drag=0">
bordercolordark="purple" bordercolorlight="fuchsia">

align="center">

width="14" height="14" border="0"> 울 엔블러드 마니 따랑해
주셔염^^

width="14" height="14" border="0">

align="center"> onmouseover="window.status=(' ♡ 다다버리깜??? ♡');return true;"
onmouseout="window.status=(' ♡ 나 이뽀??? ♡');return true;"> size="2" color="#FC57B0">창닫기

size="2" color="white">이거 어때여??? 이뽀???

공지사항으루 쓰면 저아여...

마우스루 끄러다가 이리저리 옴기바바염...^^*

글궁 창닫기에 마우스 올려노으심
밑에 상황선에 말두 나와염

금 소스보시궁... 잘 활용하시바방^^*
빠띵~!

align="center"> color="#FC57B0">snowdrowb@nblood.com 
http://www.nblood.com

<body>

<div id="Notice" style="position:absolute;
left:130px; top:100px; width:395px; height:290px; z-index:5;filter:revealTrans(transition=23,duration=0.5)
blendTrans(duration=0.5);" onmouseover="dragObj=Notice;
drag=1;move=0" onmouseout="drag=0"> size="2"> <table
border="5" cellpadding="5" cellspacing="0"
width="100%" bordercolor="fuchsia" bordercolordark="purple"
bordercolorlight="fuchsia"> <tr> 
 <td
width="314" height="30" bgcolor="white"
bordercolor="#6C1176"> size="2" color="navy"><font 
 color="#FC57B0"><img
src="http://members.tripod.co.kr/snowdrowb/pinkheart.gif" 
 width="14"
height="14" border="0"> 울 엔블러드 마니
따랑해 주셔염^^ <img
src="http://members.tripod.co.kr/snowdrowb/pinkheart.gif"
width="14" height="14" border="0"> size="2" color="green"></td> <td
width="50" height="30" bgcolor="#FFC6FA"
bordercolor="#6C1176"><p 
 align="center"> size="2" color="maroon"><a href="javascript:void(Hide(Notice))"
style="text-decoration:none;" onmouseover="window.status=('
♡ 다다버리깜??? ♡');return true;" onmouseout="window.status=('
♡ 나 이뽀??? ♡');return true;"> color="navy"> color="#FC57B0">창닫기 size="2" color="maroon"></a></td> 
 </tr> 
 <tr> <td
width="376" height="171" colspan="2"
bgcolor="#DE099B" bordercolor="#6C1176"> size="2" color="navy"><font size="2"
color="white">이거 어때여??? 이뽀??? 공지사항으루
쓰면 저아여... 마우스루
끄러다가 이리저리 옴기바바염...^^* 글궁 창닫기에
마우스 올려노으심 밑에 상황선에 말두 나와염 금
소스보시궁... 잘 활용하시바방^^* 빠띵~! size="2" color="green"></td> </tr> 
 <tr> <td
width="376" height="43" colspan="2"
bgcolor="white" bordercolor="#6C1176"> size="2" color="navy"><p align="center"><a
href="mailto:snowdrowb@nblood.com">
 color="#FC57B0">snowdrowb@nblood.com</a> <a
href="http://www.nblood.com">
 color="#FC57B0">http://www.nblood.com</a> size="2" color="green"></td> </tr> 
 </table> 
</div> size="2"> </body> 
 </html>

소스 보시니깐
어지러브시져??? ^^; 넘 겁머찌 마시구염.... 
 금 하나씩 설명 드리께염... 우선 이 공지사항 창은 지난번에 새창띠우기와는
또 다른 것이여염...

이번에 배우시게 될 것은 레이어와
테이블에 대해 좀더 자세히 겅부해 보기루 해염...

표를 만들어서 글자를 넣고요.. 이
표를 레이어 안에 넣습니다. 그리고 자바스크립트로 창을 띄우고
닫게도 하고 마우스로 드레그 하여 자유로이 이동 할수 있게도 함미다.

구분하기 쉽도록 소스를 색깔별로 해봤어요. 설명을
드릴께요.

빨강색
html의 기본형식인건 아시져??? 이거 모르시는분....
바짝 반성...^^ 어떤
소스가 어디부분에 들어가는지 잘 보셔야 해요... 자바스크립트
소스와 레이어,테이블 모두 <body>
~ </body> 사이에 들어감을
아실수 있겠져?

파랑색
자바스크립트 소스는 욜분덜 복잡하실까방 제가 자바스크립트
파일로 만들어 버렸어염. 제
계정에 올려뜨니깐... 따로 하지 마시궁 그대로 사용하세염... 자바스크립트
소스를 직접 보시고 싶으신 분들은 size="2" color="blue">http://members.tripod.co.kr/snowdrowb/java/notice-1.js size="2" color="blue"> 이 경로로
 js파일을
다운 받으시고... 파일을 열어 보시려면 마우스오른쪽 버튼 하셔서 세번째
(편집)이 이떠염... 그럼
메모장에 소스가 보여집미다. 특별히 수정하실 부분은 엄떠여...
 본인의
계정에 올리시고 싶으신 분덜은 파일다운 바드셔가 올리심 되염...

보라색
<div> ~ </div> size="2"> 레이어 태그 임미다. 흔히 div태그는 <div
align="center"> 이런 정렬태그나 필터효과 태그로 마니쓰이지만.... 
 여기서와
같이 레이어는 다른개념임돠. 레이어에
대한 개념이 엄뜨신 분덜은...쉽게 유리판을 생각하세염.... 문서위에
투명한 한겹이 더 있는 거처럼 둥둥 떠 있어 글자나 그림을 레이어로
만드실수 이떠염... 겹쳐저
보인다고도 표현 할 수가 이께떠염... 이
레이어 태그를 잘 활용하시면 문서를 더욱 효과적으로 꾸미실
수 있다고 자신있게? 말씀드림미당... ^0^ color="purple"> left:130px;
top:100px; 이 태그로 레이어의
위치를 정합니다.... 보시면 왼쪽 여백과 위여백으로 레이어의 위치를
지정하죠. width:395px;
height:290px; 레이어의 크기를
정합니다. 폭과 높이를 정의해서 크기를 결정합니다.

초록색
<table> ~ </table> size="2">은 테이블...즉 우리가 흔히 보는 표입니다. 이제
레이어 안에 표를 만들어 너어야져??? 깔끔한
문서를 위해서 table은 필수여염... table태그를 모르시면 문서를 꾸미시는데
지장이 많으시리라 생각되어염... 기본이나
마찬가지니 필히 관심있게 보시기 바랍니다. 자신의 의도에
마께 셀<td>두 적당히 나눠서 만들어 보세염... [알림]
42번글 (이미지 위에 글자 스크롤하기)에서 table을 조금 배웠었지요?
 다시함 설명드리께염...

table의 기본구조
기억나시져???

이러심 한칸으루된 표가 생성이 되어염...

<td> 
</td>로 한칸이 더 생겨떠염...

이러심 두칸의 표가 생겨염...

다음은
소스를 보면서 table 과 td의 속성 설정에 대해 설명 드릴께요. 
 size="2" color="green"><table border="5" cellpadding="5"
cellspacing="0" width="100%" bordercolor="fuchsia"
bordercolordark="purple" bordercolorlight="fuchsia"> 
 이
부분이 table의 속성을 정하는 태그여염... size="2" color="green">border
전체 테두리의 두깨를 정함미다. size="2" color="green">cellpadding
테이블 안쪽의 여백을 정함. 즉, 표안에 글씨를 쓰면 지정한 수치만큼
위,아래,왼쪽,오른쪽으로 여백이 생기지염... 수치를
0으루 하시면 선에 글씨가 딱 붙어서 쓰여지겠져... size="2" color="green">cellspacing
테두리선의 간격을 정함. color="green">bordercolor테두리
색 정함 size="2" color="green">bordercolordark 테두리의
음지(아래,오른쪽) 색을 정함. bordercolorlight size="2" color="black"> 태두리의 양지(왼쪽,위쪽) 색을 정함. 
 size="2" color="green">width는
폭을 정하지염...여기서 100%를 준이유는 td의 속성에 의해 table의
크기는 자동으로 정해지기 때문임미다... size="2" color="green">td 즉
셀의 속성태그도 위 설명과 같습니다.

갈 색 size="2" color="black"> 창닫기 버튼을 만드러야 하는데염...
javascript:void(Hide(Notice))
를 링크 시킨거 아시겠져? 
 size="2" color="maroon">onmouseover="window.status=(' ♡
다다버리깜??? ♡');return true;" color="black">는 마우스를 올려노아뜰 때 밑 상황선에 나오는 size="2" color="maroon"> size="2" color="black">글자를 지정하고 onmouseout="window.status=('
♡ 나 이뽀??? ♡');return true;" color="black">는 올려노았던 마우스가 바깥으루 벗어
나뜰 때 밑 상황선에 나오는 메시지를 지정함미다.... onmouseover 와
onmouseout의 차이를 아시게쪄? 암말두
안나오게 하구 시프심...onmouseout="window.status=('');return
true;" 이런식으루 해주심 되게찌염....^^*

그럼...
자신의 환경에 맞게 만들어 보셔염...

태그를 메모장에 다 쓰시고 (다른이름으로
저장) 하셔서 모모모.html 하심 html문서가 생성됩니다. 그리고
스펠, 띄어쓰기 하나라도 틀리면 의도대루 안되염... 항상 확인하시는
습관을 가지셔여... 그럼...빠띵^^*

snowdrowb@nblood.com size="2" color="navy">http://www.nblood.com

Facebook Twitter Me2day Yozm

Up Down Print 수정 삭제

Comment '0'

✔댓글 쓰기

●? 에디터 선택하기

✔ 텍스트 모드 ✔ 에디터 모드

댓글 쓰기

●? 에디터 사용하기 닫기

List of Articles
번호	제목	글쓴이	날짜	조회 수
277	사진 무료로 스캔해주는 싸이트...	고정석	2001.03.19	5469
»	레이어 공지창 띄우기	고정석	2001.03.19	6223
275	음성 이메일 보낼수 있는 프로그램	고정석	2001.03.19	5385
274	음악감상 플레이어 만들기	고정석	2001.03.19	5498
273	마우스 따라당기는 원모양 (글씨,이미지)	고정석	2001.03.19	5785
272	마우스를 따라 다니는 이미지	고정석	2001.03.19	6078
271	마우스 따라다니는 텍스트	고정석	2001.03.19	5081
270	문서 들어가고 나갈때 메세지 띄우기	고정석	2001.03.19	4884
269	자바스크립트를 이용한 브라우저 흔들기	고정석	2001.03.19	5403
268	자바스크립트 새창띄우기	고정석	2001.03.19	5628
267	쿠키를 이용한 방문횟수와 환영메세지(창으로)	고정석	2001.03.19	5471
266	마우스 오른쪽 버튼 소스보기 막기	고정석	2001.03.19	5736
265	ram파일 배경음악 실행시키기	고정석	2001.03.19	6067
264	호빵이 마음대로 돌아다니는 소스	고정석	2001.03.19	5911
263	음악감상 플레이어 만들기	고정석	2001.03.19	6075
262	텍스트 색 변하게 하기 (blink)	고정석	2001.03.19	5692
261	요일별로 배경 바꾸기	고정석	2001.03.19	5303
260	포토갤러리 만들어보자	고정석	2001.03.19	5672
259	폼메뉴 만들기	고정석	2001.03.19	5476
258	body bgcolor 이벤트	고정석	2001.03.19	5608
257	이미지 뽀샤시 하게 해보장^^* (Alpha)	고정석	2001.03.19	5495
256	다이나믹한 메뉴 만들자	고정석	2001.03.19	6565
255	☞ snow.class 다운받기	고정석	2001.03.19	8645
254	무지개색 효과내는 텍스트	고정석	2001.03.19	11219
253	눈내리는 이미지 만들기	고정석	2001.03.19	8130
252	타이핑 치듯 나타나는 텍스트	고정석	2001.03.19	7055
251	멋진 텍스트 효과(1)	고정석	2001.03.19	10078
250	☞ class파일 다운	고정석	2001.03.19	6630
249	멋진 텍스트 효과(2)	고정석	2001.03.19	9750
248	멋진 텍스트 효과(3)	고정석	2001.03.19	12379
247	멋진 텍스트 효과(4)	고정석	2001.03.19	8320
246	멋진 텍스트 효과(5)	고정석	2001.03.19	7795
245	글자 계속 바꿔보자~!	고정석	2001.03.19	8237
244	태그 예제 모음	고정석	2001.03.19	9002
243	리얼 오디오 화일(RA)만드는 법--- CNC에서 퍼옴	고정석	2001.03.26	13498
242	[무료계정 싸이트] 국내.국외 무료계정 싸이트 총망라	고정석	2001.03.26	8294
241	Real Player 8.0 한글판입니다.	고정석	2001.03.28	8909
240	NexENCODE Studio 3.02 : Wav 파일을 MP3 로 바꾸는 프로그램	고정석	2001.03.31	10049
239	질문... 웨이브 파일을 mp3파일로 바꾸려면...??? 2	정성민	2001.04.01	13743
238	mpg 화일을 mp3로??	지우압바	2001.04.02	9944
237	국내외 인터넷 저장공간 제공 사이트	고정석	2001.04.15	7075
236	디지탈 카메라 강좌	고정석	2001.04.16	13996
235	태그강좌 사이트	고정석	2001.04.26	14766
234	그림올리는법 배우기.(실습)	수	2001.04.28	7981
233	컴퓨터 고장 유형과 대응책	고정석	2001.05.11	9843
232	gohip 제거 프로그램	고정석	2001.05.11	8852
231	호수에 비친 꽃 그림(Java Applet 응용)	고정석	2001.06.04	10886
230	음반도서실에 음악올릴때 주의할점.	수	2001.06.20	6195
229	리얼로 올릴때... 3	수	2001.06.29	5491
228	긴 주소 짧게해주는 무료 도메인 제공 사이트	고정석	2001.06.30	4910

쓰기

나눔글꼴 설치 안내

이 PC에는 나눔글꼴이 설치되어 있지 않습니다.

이 사이트를 나눔글꼴로 보기 위해서는
나눔글꼴을 설치해야 합니다.

✔ 설치 취소

이메일 로그인

레이어 공지창 띄우기

나눔글꼴 설치 안내

이 PC에는 나눔글꼴이 설치되어 있지 않습니다.