01) 한줄짜리 웹소스
▶ 해상도에 따라 스크롤바가 생기지 않는 최대영역
1024×768 : (1004 × 617) / 800×600 : (780×449)
윈도우의 테두리 + 세로스크롤바의 크기는 총 28px
세로의 영역은 개인의 윈도우에 따라 가변이 크나 일반적으로(주소창,도구창)있는 경우에만 해당함
▶ 링크걸어서 팝업창 띄우기
<a href="#" ONCLICK="window.open
('팝업주소','팝업이름','width=80,height=60,toolbar=yes,resizable=no,scrollbars=no,left=0,top=0')">
▶ 그림에서 링크 표식 없애주기
<a href="#" onfocus='this.blur()'><img src="motifdn.gif"></a>
css로 일괄처리하기 -> <style> a { onfocus : "this.blur();" } </style>
▶ HTML에서 점찍기
· /•을 이용
· 잘 · 찍 · 히 · 나
• 해봅시다
▶ 클릭하면 자동으로 창 닫기
<a href="javascript:window.close()">이미지나.. 글자</a>
▶ 텍스트에 풍선말 달기
<font color="#CC00FF" TITLE="풍선말" STYLE=" cursor:hand;">[여기에 마우스를]</font>
▶ 풍선말에 엔터적용시키기
<img src="/images/test.gif" alt="설명1 설명2 설명3">
▶ 이미지 반투명처리하기
<img src="그림주소" style="filter:alpha(opacity=100,style=2,finishopacity=0)">
▶ 소스그대로 보이게 하기
<xmp><h1>태그입니다.</h1><font color=red>태그가 잘 보이시죠?</font></xmp>
▶ 즐겨찾기 추가
<a href="javascript:window.external.AddFavorite('http://www.nate.com','네이트');">
즐겨찾기에 추가</a>
▶ 링크로 윈도우 이동하기
<a href="#" onClick="parent.close()">창닫기</a>
<a href="#" onClick="history.back()">이전페이지로</a>
<a href="#" onClick="history.forward()">앞 페이지로</a>
<a href="#" onClick='top.location="javascript:location.reload()"'>새로고침</a>
▶ input 고정시키기
<INPUT TYPE="text" SIZE=40 VALUE="모디의 집입니다." readonly>
<INPUT TYPE="button" VALUE="START" disabled>
<INPUT TYPE=text name="test" value="test" disabled>
▶ input와 textarea에 글자 보이게 하고 커서위치시 사라지게하기
<INPUT TYPE="text" SIZE=40 VALUE="모디의 집입니다." onfocus="this.value''">
<TEXTAREA name="test" onfocus="this.value''">모디의 집입니다.</textarea>
▶ 글자흐르는 태그
<marquee direction=right>오른쪽으로 </marquee>
<marquee direction=left>왼쪽으로 </marquee>
<marquee direction=up>위쪽으로 </marquee>
<marquee direction=down>아래쪽으로 </marquee>
<marquee direction=up height=50 scrollAmount=1.5 size="300">내용</maquee>
▶ 마우스 커서 모양 바꾸기
<font style="cursor:hand">hand</font>
<font style="cursor:auto">auto</font>
<font style="cursor:default">default</font>
<font style="cursor:move">move</font>
<font style="cursor:e-resize">e-resize</font>
<font style="cursor:ne-resize">ne-resize</font>
<font style="cursor:nw-resize">nw-resize</font>
<font style="cursor:n-resize">n-resize</font>
<font style="cursor:se-resize">se-resize</font>
<font style="cursor:sw-resize">sw-resize</font>
<font style="cursor:w-resize">w-resize</font>
<font style="cursor:wait">wait</font>
<font style="cursor:help">help</font>
<font style="cursor:crosshair">crosshair</font>
▶ 팝업 창을 항상 앞에 나오게 하는 방법
<BODY onBlur="window.focus()">
- 무조건 항상 앞에 나오으로 사용시 유의해야함
<BODY onBlur="setTimeout('window.focus()',5000)">
- setTimeout()은 적당한 시간 간격마다 특정 함수를 호출할 수 있는 기능으로 5초에 한번씩 호출한다
▶ 레이어를 테이블 기준으로 고정시켜서 띄우기
<td style="position:relative">
<div style="position：absolute; >
02) 아이프레임(IFRAME)을 활용하기
아이프레임(IFRAME)을 이용하면 한 웹페이지 내에서 CGI, HTML등 다른문서를 불러와 삽입하는 것이 가능해진다. 단 주의할점은 익스 플로러 전용으로 넷츠케이프는 지원을 하지 않는다.
아이프레임(IFRAME)은 아래와 같은 형식으로 삽입할 곳에 넣어주면 된다.
<iframe src="외부문서주소" frameborder="0" width="300" height="150" marginwidth="0" marginheight="0" topmargin="0" scrolling="auto" ></iframe>
⇒ frameborder="0" : iframe 창의 두께를 설정
⇒ width="300" height="150" : iframe의 크기를 설정
⇒ marginwidth="0" marginheight="0" topmargin="0" : 여백을 설정
⇒ scrolling="auto" :
문서내용이 iframe크기보다 길면 스크롤바가 자동으로 생기고 옵션에 auto 대신에 yes를 사용하면
스크롤바가 항상 생기며, no를 사용하면 문서내용이 길어도 스크롤바가 생기지 않는다.
⇒ name="아이프레임이름"
링크시킬때 이름을 지정하면 아이프레임에서 문서가 열림 ex) target="아이프레임이름"
⇒ 투명한 IFRAME 이용하기
인터넷 익스플로러 5.5 이상이거나 넷스케이프 6 이상에서는 ALLOWTRANSPARENCY="true"을
이용하여 바탕색이 보이는 아이프레임을 만들수 있다.
단, 아이프레임에 삽입할 문서 안에 <BODY STYLE="background-color:transparent">를 적어준다.
|
<html>
<head>
<title>아이프레임 이용하기</title>
</head>
<body bgcolor="yellow">
다른 문서에 있는 원하는 내용을 삽입할 수 있다.<br>
<iframe src="http://motifdn.cafe24.com" name="contents" frameborder="0" width="400" height="300" marginwidth="0" marginheight="0" topmargin="0" scrolling="auto"></iframe>
</body>
</html>
02) 메일링크 적용시 MAILTO 옵션 활용하기
유저와의 커뮤니케이션을 위해서 만들어놓은 메일보내기를 클릭하면
자체적으로 프로그램(asp, php등)을 이용하여 메일을 보내는 시스템을 갖춘 페이지를 보여주는
곳도 있으나 일반적으로 윈도우를 설치하면서 추가적으로 설치되는 Outlook Express를 이용하여
메일을 보낼 수 있다.
Outlook Express을 이용하여 메일을 보내려면 아래처럼 간단한 형식을 입력해주면 된다.
<A href="mailto:메일주소">메일보내기</a>
메일보내기에 상황에 맞는 다양한 옵션을 설정하여 사용할 수도 있다.
⇒ 이메일
<A href="mailto:메일주소">메일보내기</a>
⇒ 이메일+참조
<A href="mailto:메일주소?cc=참조">메일보내기</a>
⇒ 이메일+참조+숨은참조
<A href="mailto:메일주소?cc=참조&bcc=숨은참조">메일보내기</a>
⇒ 이메일+참조+숨은참조+메일제목
<A href="mailto:메일주소?cc=참조&bcc=숨은참조&subject=제목">메일보내기</a>
<html>
<head>
<title>아이프레임 이용하기</title>
</head>
<body>
메일보내기를 해보세요~~<br>
<A href="mailto:motifdn@motifdn.cafe24.com?cc=motifdn@motifdn.cafe24.com& bcc=motifdn@motifdn.cafe24.com&subject=안녕하세요"> 메일보내기</a>
</body>
</html> |
04) 좋아하는 음악을 홈페이지의 배경음악으로 사용하기
좋아하는 음악을 웹페이지의 배경음악으로 나오게 하는것은 다양한 방법이 있다.
일반적으로 가장 많이 사용하는 EMBED을 이용하여 음악을 넣으려면
일단 사용할 음악의 파일의 종류가 mid, wav, wma, mp3등의 파일로 된 것을 구해야한다.
웹페이지에서는 파일용량이 작은 확장명이 mid를 가지는 미디파일을 사용한다.
음질이 좋은 mp3같은 경우는 배경음악을 연주하기 위해서는 웹상에서 하는게 아니라 홈페이지를
접속한 사람의 컴퓨터로 음악을 다운받아서 연주하는 것이기때문에 홈페이지의 로딩 속도는
배경음악의 크기에 비례해서 늦어지게 된다.
그다음 음악파일을 구하면 자신이 원하는 설정에 따라 옵션을 추가, 삭제해서 넣으면 된다.
<embed src="사운드파일명" autostart=true loop=true hidden=false volume=70
controls=smallconsole width=50 height=16>
⇒ autostart=true/false
페이지가 열리면 연주를 시작할 것인지를 지정합니다.
true인 경우는 페이지가 로드되는 동시에 연주가 시작됩니다.
⇒ loop=true/false
반복적으로 음악을 연주하려면 true를, 한번만 연주되는 것은 false를 선택하면 됩니다.
⇒ hidden=true/false
콘솔이라고 하는 연주 제어 장치를 화면상에 나타내거나 사라지게 하는 지를 결정합니다.
true를 선택하면 보이지않는 것이고, false는 연주 제어 장치가 보이게 됩니다.
⇒ controls=smallconsole
작은 모양으로 제어장치를 화면상에 표시합니다.
⇒ volume=70
음악의 볼률을 수치로 지정합니다.
0~100까지 조정할 수 있으며 높을 수록 소리가 커집니다.
⇒ width=50
콘솔의 가로 크기를 픽셀로 지정합니다.
⇒ height=20
콘솔의 세로 크기를 픽셀로 지정합니다.
<html>
<head>
</head>
<body>
<EMBED SRC="음악파일" autostart=true loop=true hidden=true>
</body>
</html> |
▶ EMBED를 사용하지 않고 음악넣기
<html>
<head>
</head>
<body>
<bgsound src="음악파일" loop=infinite>
<!--loop=infinite는 계속해서 반복적으로 음악을 나오게 한다.
한번만 나오게 하는것은 loop=false로 해주면 된다.-->
</body>
</html> |
05) 웹페이지에 동영상을 삽입하고 옵션 알아보기
웹페이지에서 동영상을 보여주는 방법은 동영상파일을 embed로 삽입하거나, object로 삽입하는
두가지 방법이 있다.
embed는 웹페이지에 사운드나 동영상 등의 멀티미디어 요소를 삽입할때 사용되는 기본태그이며,
object 는 HTML 문서에 개체를 삽입할때 사용하는 태그로 object로 만들어서 사용하면,
다양하게 옵션을 제어를 할 수 있다
▶ EMBED를 사용하여 확장명이 avi나 mpg인 동영상 삽입
<embed src="동영상이름" showcontrols="true" nomenu="true" width=넓이 height=높이>
⇒ showcontrols=true/false : true면 컨트롤판을 보여줍니다.
⇒ nomenu=true/false : true면 플레이백메뉴을 보여줍니다.
<html>
<head>
</head>
<body>
<embed src="동영상이름" showcontrols="true" nomenu="true" width=넓이 height=높이>
</body>
</html> |
▶ EMBED를 사용하여 확장명이 mov인 동영상 삽입
애플사에서 만든 메킨토시용 동영상 포맷으로 퀵타임포 윈도우 설치해야 재생이 가능하다.
<embed src="동영상파일" autoplay=true playeveryframe=false width=넓이 height=높이>
⇒ autoplay=true/false : 자동실행시킬지 마우스로 클릭할때 실행시킬지 결정합니다.
⇒ playeveryframe=true/false : true일때는 모든 프레임을 재생합니다.
⇒ loop=true/false : 반복재생여부를 결정합니다.
<html>
<head>
</head>
<body>
<embed src="source.mov" autoplay=true playeveryframe=false width=넓이 height=높이>
</body>
</html> |
▶ OBJECT를 사용하여 동영상 넣기
<html>
<head>
</head>
<body>
<object classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="넓이" height="높이">
<param name='Filename' value='파일이름'>
<param name="ShowCaptioning" VALUE="True">
<param name="AutoStart" VALUE="True">
<param name="AutoRewind" VALUE="True">
<param name="showcontrols" VALUE="True">
<param name="AutoRestart" VALUE="True">
<param name="ShowDisplay" VALUE="True">
<param name="EnableContextMenu" VALUE="True">
<param name="ShowPositionControls" VALUE="True">
<param name="ShowStatusBar" VALUE="True">
</object>
</body>
</html> |
▶ 웹페이지에 삽입한 동영상 스크립트로 옵션 제어하기
파일위치 : 유용한 script > 웹페이지에 삽입한 동영상 스크립트로 옵션 제어하기
06) FAVICON 만들어서 적용해보기
자주가는 사이트 경우 즐겨찾기등록을 하게 되는데 즐겨찾기를 하고 나면 등록한 즐거찾기이름이나
주소에 앞에 아이콘이 붙어있는 것을 볼 수 있다.
이것을 FAVICON(파비콘)이라고 하는데 favorite와 Icon의 합성어이다.
FAVICON(파비콘)은
로딩속도에 크게 영향을 미치지 않지지 않으며, explorer 5.0이상에서만 확인이 가능하다.
그리고 한번 만들어서 사이트에 올리면 다시 수정하기가 어렵기 때문에 테스트가 어렵다.
그러므로 FAVICON(파비콘)으로 사용할 이미지가 확정될때 올리는 것이 좋다.
FAVICON(파비콘)을 웹사이트에 적용하기
1. 일단은 아이콘이 될 그림아이콘을 작업한다.
2. 크기는 16*16으로 작업하고, 색상은 기본색(16색)을 사용하여 만들어준다.
3. 포토샵이나 아이콘 만드는 프로그램 ICONFORGE.EXE를 이용한다.
4. 만든 아이콘을 favicon.ico로 저장한다.(파일이름은 임으로 정해줘도 된다.)
5. favicon.ico를 index.html(처음에 뜨는 기본파일)이 있는 곳에 같이 넣어준다.
6. index.html의 소스안에 태그를 수정해준다.
7. 아래의 태그를 index파일의 <head>와 </head>사이에 넣어준다.
8. <LINK rel="SHORTCUT ICON" href="사이트주소/favicon.ico">
9.인터넷으로 확인한다.
07) META를 이용한 화면전화효과 및 다양한 활용
META tag는 기본적으로 웹 검색엔진의 효율적인 인덱스를 위한 것으로 검색로봇이 웹페이지를 검색할때 <META> 태그 안의 내용을 읽어서 해당 단어등을 검색을 한다.
하지만 요즈음에는 야후, 심마니, 한미르 등 거의 모든 검색엔진들이 디렉토리 검색을 방법을 사용하는 추세이어서 META_tag 본래의 기능이 많이 퇴색되고 말았죠. 그러나 알타비스타의 경우에는 아직까지 메타 태그를 검색해서 검색 엔진 결과에 보여진다.
또한 META tag는 검색을 위한 것 뿐 아니라 웹페이지의 자동 로딩을 위해서도 사용된다.
홈페이지에 일반적으로 등록하는 예제문
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=euc-kr">
<META NAME="DESCRIPTION" CONTENT="MOTIFDN는 서로에게 동기가 되어주는 공간입니다.">
<META NAME="KEYWORDS" CONTENT="MOTFDN, 모티프디엔, 모디, HTML,SCRIPT, WEBTIP">
</head>
<META name="Subject" content="motifdn"> (Subject : 홈페이지의 주제)
<META name="Title" content="motifdn"> (Title : 홈페이지 제목)
<META name="Author" content="motifdn"> (Author : 홈피 만든 사람)
<META name="Publisher" content="motifdn"> (Publisher : 홈피 만든 기업이나 단체)
<META name="Other Agent" content="motifdn"> (Other Agent : WEB 책임자/관리자)
<META name="Date" content="2003년 1월 1일"> (Date : 만든 날짜)
<META name="Keywords" content="motifdn,모디"> (keywords : 검색대상단어)
<META NAME="description" content="동기가 되어주는 공간입니다."> (간단한 소개문장)
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=euc-kr">
언어 인코딩 문제를 해결하는 효과를 가지고 있다.
위의 태그는 한글이 지원되지 않는 컴퓨터에서 올바른 한글코드로 웹페이지 읽혀질 수 있도록 한다.
<META HTTP-EQUIV="Expires" CONTENT="0">
웹페이지의 빠른 로딩을 위해서 이미 저장한 이미지등을 사용하게 되는데 이것을 방지하기 위해서
캐쉬된 웹페이지 사용하지 않도록 하는 방법이다.
이방법을 사용하면 웹페이지의 로딩이 느려질 수도 있다.
<META HTTP-EQUIV="imagetoolbar" content="no">
인터넷6.0이상이라면 웹페이지에서 이미지등에서 (저장하기,프린트,메일보내기)가 계속 보인다.
이것을 보이지 않게 하기 위한 방법으로 이용할 수 있다.
<META HTTP-EQUIV="Refresh" content="3"; URL="http://motidn.cafe24.com/">
3초 후에 URL에 표기된 사이트로 자동으로 이동하게 한다.
content="원하는 시간(초)"에 원하는 시간에 "0"을 입력하면 바로 원하는 페이지로 이동할 수 있다.
<META HTTP-EQUIV="Refresh" CONTENT="3"; URL=다운받게할 내용을 경로입력">
홈페이지를 접속하면 자동으로 자료를 다운로드 받을 수있게 해주는 내용입니다.
3초 후에 URL에 표기된 내요을 자동으로 다운받게한다.
<META HTTP-EQUIV="Page-Enter" content="revealTrans(Duration=3,Transition=0)">
<META HTTP-EQUIV="Page-Exit" content="revealTrans(Duration=3,Transition=0)">
페이지 들어갈 때/나갈때 다양한 화면전환방법을 사용할 수 있다.
Transition = 숫자(원하는 화면전환방법) , Duration = 숫자(진행속도)
Transition=0 : 가운데로 모으기 (박스 형태)
Transition=1 : 밖으로 펼치기 (박스 형태)
Transition=2 : 가운데로 모으기 (원 형태)
Transition=3 : 밖으로 펼치기 (원 형태)
Transition=4 : 위로 닦아내기
Transition=5 : 아래로 닦아내기
Transition=6 : 오른쪽으Transition=로 닦아내기
Transition=7 : 왼쪽으로 닦아내기
Transition=8 : 세로 블라인드
Transition=9 : 가로 블라인드
Transition=10 : 가로 체크 무늬
Transition=11 : 세로 체크 무늬
Transition=12 : 흩어 뿌리기
Transition=13 : 수직 안쪽으로 나누기
Transition=14 : 수직 바깥쪽으로 나누기
Transition=15 : 수평 안쪽으로 나누기
Transition=16 : 수평 바깥쪽으로 나누기
Transition=17 : 계단 모양 왼쪽 아래로
Transition=18 : 계단 모양 왼쪽 위로
Transition=19 : 계단 모양 오른쪽 아래로
Transition=20 : 계단 모양 오른쪽 위로
Transition=21 : 가로 실선 무늬
Transition=22 : 세로 실선 무늬
Transition=23 : 순서없이 전환
08) 테이블 대신 필드셋(fieldset)을 이용하기
FIELDSET은 웹페이지 내 여러 개의 양식(컨트롤)들을 하나의 그룹으로 묶는 기능으로서 ,
LEGEND와 함께 쓸 수 있다. LEGEND는 컨트롤 묶음에 제목을 붙이는 역할을 하며,
<LEGEND>는 반드시 <FIELDSET>안에서 사용해야 한다.
FIELDSET과 LEGEND는 시작과 끝내는 태그로 감싸주어야 적용된다.
<fieldset><legend> 제목</legend>제목을 넣어서 fiedlset작성하기</fieldset>
<fieldset style="width:50; height:30">필드셋 크기를 원하는 크기로 만든다.</fieldset>
<fieldset style="border:3 solid #808080">필드셋 선의 두께와 모양, 색상을 변경하기</fieldset>
<fieldset style="padding:5">필드셋에 여백을 만들어준다.</fieldset>
<fieldset style="border-left-width:20">필드셋의 경계선 일부분에 두께를 변경한 경우</fieldset>
| <FIELDSET>을 사용한 예제 |
이름(실명) : <INPUT size=15 name=name>
전화번호 : <INPUT size=15 name=tel>
|
|
<FIELDSET style="board:1">
이름(실명) : <INPUT name="name" type="text">
전화번호: <INPUT name="tel" type="text" >
</FIELDSET> |
|
| <FIELDSET>과 <LEGEND>을 함께 사용한 예제 |
입력해주세요.
이름(실명) : <INPUT size=15 name=name>
전화번호: <INPUT size=15 name=tel>
e-mail: <INPUT size=15 name=e_mail ?>
|
|
<FIELDSET>
<LEGEND>입력해주세요.</LEGEND>
이름(실명) : <INPUT name="name" type="text">
전화번호: <INPUT name="tel" type="text" >
e-mail: <INPUT name="e_mail" type="text"">
</FIELDSET> |
|
| <FIELDSET>에 스타일 적용하기 |
필드셋의 다양한 효과
필드셋을 이용하면
테이블을 대신하여
다양한 표현을 할수 있다.
|
|
<FIELDSET style="border:1 solid; border-top-color: #808080; border-right-color: #f9f9f9; border-left-color: #f9f9f9; border-bottom-color: #808080">
<legend align="center">필드셋의 다양한 효과</legend>
<br>필드셋을 이용하면 다양한 표현할 수 있다.<br>
</FIELDSETt> |
|
출처 : http://www.motifdn.pe.kr |
