섭군 - by seob: HTML

레이블이 HTML인 게시물을 표시합니다. 모든 게시물 표시

2010년 11월 25일 목요일

2009년 11월 19일 목요일

HTML에 플래시 넣어주는 자바스크립트 함수

일전에 어디선가 편하게 플래시를 띄울수 있는 함수를 본것 같아서 검색하다가
남에 홈피 뒤져보다가...ㅋㅋ
결국 찾긴 찾았는데 약간의 수정이 필요해 보입니다.

LG데이콤 홈페이지에서 가져온건데 유용할것 같아 올려봅니다.

사실 제가 필요해서 찾은거구 올리는거예요 ㅋㅋㅋㅋ

/*
###########플래시 넣는 함수############
f_id = 플래시 아이디
f_name = 플래시 파일명
f_width = 가로크기
f_height = 세로높이
f_trans = 공백, transparent(투명)
f_para = 파라미터, 공백
*/
function show_flash_F(f_id,f_name,f_width,f_height,f_trans,f_para){
document.write("<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-44455354000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0' width='"+f_width+"' height='"+f_height+"' id='"+f_id+"'>");
document.write("<param name='allowScriptAccess' value='always'/>");
document.write("<param name='movie' value='"+f_name+"'>");
document.write("<param name='quality' value='high'>");
document.write("<param name='scale' value='noscale'>");
document.write("<param name='wmode' value='"+f_trans+"'>");
document.write("<PARAM NAME='flashvars' VALUE='"+f_para+"'>");
document.write("<embed src='"+f_name+"' allowScriptAccess='always' quality='high' pluginspage='http://www.macromedia.com/go/getflashplayer' type='application/x-shockwave-flash' wmode='"+f_trans+"' width='"+f_width+"' height='"+f_height+"'></embed>");
document.write("</object>");
}

function writeObject(obj_file,width,height,wmode)
{
var obj_src = "";
obj_src += "<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0\" width=\""+width+"\" height=\""+height+"\">\n";
obj_src += " <param name=\"movie\" value=\""+obj_file+"\">\n";
obj_src += " <param name=\"wmode\" value=\""+wmode+"\">\n";
obj_src += " <param name=\"menu\" value=\"false\">\n";
obj_src += " <param name=\"quality\" value=\"high\">\n";
obj_src += " <embed src=\""+obj_file+"\" quality=\"high\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\" type=\"application/x-shockwave-flash\" width=\""+width+"\" height=\""+height+"\"></embed>\n";
obj_src += "</object>\n";

document.write(obj_src);
}

function FlashObject(swf, width, height, bgcolor, id, flashvars)
{
var strFlashTag = new String();
if (navigator.appName.indexOf("Microsoft") != -1)
{
strFlashTag += "<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' ";
strFlashTag += "codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=version=8,0,0,0' ";
strFlashTag += "id='" + id + "' width='" + width + "' height='" + height + "'>";
strFlashTag += "<param name='movie' value='" + swf + "'/>";

if(flashvars != null) {strFlashTag += "<param name='flashvars' value='" + flashvars + "'/>"};
strFlashTag += "<param name='quality' value='best'/>";
strFlashTag += "<param name='bgcolor' value='" + bgcolor + "'/>";
strFlashTag += "<param name='menu' value='false'/>";
strFlashTag += "<param name='salign' value='LT'/>";
strFlashTag += "<param name='scale' value='noscale'/>";
strFlashTag += "<param name='wmode' value='transparent'/>";
strFlashTag += "<param name='allowScriptAccess' value='always'/>";
strFlashTag += "</object>";
}else{
strFlashTag += ' <embed src="' + swf + '" ';
strFlashTag += 'quality="best" ';
strFlashTag += 'bgcolor="' + bgcolor + '" ';
strFlashTag += 'width="' + width + '" ';
strFlashTag += 'height="' + height + '" ';
strFlashTag += 'menu="false" ';
strFlashTag += 'scale="noscale" ';
strFlashTag += 'id="' + id + '" ';
strFlashTag += 'salign="LT" ';
strFlashTag += 'wmode="transparent" ';
strFlashTag += 'allowScriptAccess="sameDomain" ';
if(flashvars != null) {strFlashTag += 'flashvars="' + flashvars + '" '};
strFlashTag += 'type="application/x-shockwave-flash" ';
strFlashTag += 'pluginspage="http://www.macromedia.com/go/getflashplayer">';
strFlashTag += '</embed>';
}
document.write(strFlashTag);
}

2009년 10월 14일 수요일

META(메타)태그를 이용해보자

출처 : JUNG Design ( http://jungd.co.cc/webcoding/2614 )

◈.meta 메타 태그

◈.메타 태그란 것은 문서에 관련된 정보라고 생각하면 됩니다.*^^*
메타태그을 삽입하는 이유는 페이지에 정보을 알리기 위한것도 있지만.
검색엔진에 등록을 했을뗴 검색키워드로 사용됨다고 합니다.
키워드는 콤마(,)로 구분되어 짐니다.

이것은 <head> 와 </head>사이에 사용되며 문서의 외양과는
크게 상관이 없습니다. 메타 태그의 하나의 예를 보죠.
밑에 보고 있는것은 제홈페이지에 쓰인 메타태그입니다.
참고 삼아 보세요.@^^@

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

◀메타 태그에 대한 설명▶

<mete name="title" c" ">
┗☞브라우져 타이틀 제목을 설명합니다
<meta name="description" c" ">
┗☞ 해당 웹페이지의 내용을 요약해서 설명하는 부분.
<meta name="keywords" c" ">
┗☞검색사이트의 방문자가 content부분의 키워드를
입력하면 여러분의 홈페이지가 소개됩니다.
<meta name="author" c" ">
┗☞홈페이지을 만든사람의 이름이나 아이디등을 적으세요.
<meta name="generator" c" ">
┗☞홈을 만들떼 사용했던 tool을 말하는것입니다.

※.넷스케잎에서 한글코드의 자동 인코딩

익스플로러에서는 문제가 없지만 넷스케잎의 경우는 기본적으로
영문폰트(western(iso-8859-1))로 인코딩하여 문서를 보여줍니다.
따라서 웹페이지를 만들때
우리가 자주쓰는 font태그에서 face="궁서체"로 지정해 주어도
넷스케이프는 속성을 이해하지 못해 궁서체로 폰트를
보여주지 못합니다.
따라서 브라우저가 문서를 로딩할 때 자동으로 한글 폰트(euc-kr)로
인코딩하게 만들어 줄 필요가 있는 것이죠.

<meta http-equiv="content-type" c"text/html;charset=euc-kr">

한글로 된 문서라면 기본적으로 위의 부분은
넣어주는 것이 일반적입니다.
물론 익스플로러 전용이라면 문제가 없겠지만.....
그런데 주의할 점이 있습니다. 넷스케이프에서 이 meta
태그를 사용하면 form으로 작성된 박스의 크기가
달라진다는 것과 영문 폰트를
제대로 사용하지 못하게 되므로 다 좋은 것은 아니라는 거죠.

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

◀자동적으로 html 문서를 이동시킬뗴도 meta 태그가 사용됨니다▶

※.자동적으로 html 문서를 이동시킬뗴도 meta 태그가 사용됨니다.^^;;
다른홈페이지 구경하시다가 페이지가 뜨자마자 몇초있다가
메인홈으로 이동합니다. 잠시만 기다려 주세요.
이런걸 보신적이 있을꺼라고 생각합니다.

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

<meta http-equiv="refresh" c"10;url=http://www.yahoo.co.kr">

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

ⓐ.c"10; ☜━10초후에 이동시키라는 뜻입니다.
원하는숫자 적으면 되겠죠.^^;;

ⓑ.url=http://www.yahoo.co.kr ☜━원하시는 경로명을
적어 주시면 됨니다.^^;;

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

◀메타태그 화면전환 효과 태그예요▶

※.이런걸 모라구 표현하지.? 첫페이지에서 다음페이지가로
넘어갈뗴 페이지 화면이 여러가지 효과을 내면서 바뀌게 됨니다
. 밑에 소스는 총 25가지 효과을 갱신하면서 나타나게 됨니다.!
페이지가 바뀔떼마다 다르게나옴.!!

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

<meta http-equiv="page-enter" c"revealtrans(duration=3,
transition=23)">
<meta http-equiv="page-exit" c"revealtrans(duration=2,
transition=23)">

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

※.특정적으로 페이지전환효과을 낼수도 있습니다.(밑에 참고하세요.!!)

1. blend
<meta http-equiv="page-enter" c"blendtrans(duration=2.0)">

2. box in
<meta http-equiv="page-enter" c"revealtrans(duration=2.0, transition=0)">

3. box out
<meta http-equiv="page-enter" c"revealtrans(duration=2.0, transition=1)">

4. circle in
<meta http-equiv="page-enter" c"revealtrans(duration=2.0, transition=2)">

5. circle out
<meta http-equiv="page-enter" c"revealtrans(duration=2.0, transition=3)">

6. wipe up
<meta http-equiv="page-enter" c"revealtrans(duration=2.0, transition=4)">

7. wipe down
<meta http-equiv="page-enter" c"revealtrans(duration=2.0, transition=5)">

8. wipe right
<meta http-equiv="page-enter" c"revealtrans(duration=2.0, transition=6)">

9. wipe left
<meta http-equiv="page-enter" c"revealtrans(duration=2.0, transition=7)">

10. vertical blinds
<meta http-equiv="page-enter" c"revealtrans(duration=2.0, transition=8)">

11. horizontal blinds
<meta http-equiv="page-enter" c"revealtrans(duration=2.0, transition=9)">

12. checkerboard across
<meta http-equiv="page-enter" c"revealtrans(duration=2.0, transition=10)">

13. checkerboard down
<meta http-equiv="page-enter" c"revealtrans(duration=2.0, transition=11)">

14. random dissolve
<meta http-equiv="page-enter" c"revealtrans(duration=2.0, transition=12)">

15. split vertical in
<meta http-equiv="page-enter" c"revealtrans(duration=2.0, transition=13)">

16. split vertical out
<meta http-equiv="page-enter" c"revealtrans(duration=2.0, transition=14)">

17. split horizontal in
<meta http-equiv="page-enter" c"revealtrans(duration=2.0, transition=15)">

18. split horizontal out
<meta http-equiv="page-enter" c"revealtrans(duration=2.0, transition=16)">

19. strips left down
<meta http-equiv="page-enter" c"revealtrans(duration=2.0, transition=17)">

20. strips left up
<meta http-equiv="page-enter" c"revealtrans(duration=2.0, transition=18)">

21. strips right down
<meta http-equiv="page-enter" c"revealtrans(duration=2.0, transition=19)">

22. strips right up
<meta http-equiv="page-enter" c"revealtrans(duration=2.0, transition=20)">

23. random bars horizontal
<meta http-equiv="page-enter" c"revealtrans(duration=2.0, transition=21)">

24. random bars vertical
<meta http-equiv="page-enter" c"revealtrans(duration=2.0, transition=22)">

25. random
<meta http-equiv="page-enter" c"revealtrans(duration=2.0, transition=23)">

2009년 10월 5일 월요일

링크태그 기본 - A 태그

※ 동일 문서 내에서의 링크
여기에서는 동일문서내에서의 이동하는 방법을 배워보도록 하겠습니다. 다른 용어로 앵커태그(맞나?) 도 하는데요...동일한 웹페이지 내에서 일정 부분을 클릭하면 그 동일한 웹페이지내의 다른 부분으로 이동할 수 있는 링크방법이져^^

<a name="love">이동될 부분</a> , <a href="#love">이동</a>

예제보기

위에 소스 중에서 love 라고 나오는 부분 2곳이 있는데요 여러분들이 내키는 대로 아무 글자나 집어 넣어도 됩니다. 다만 양쪽 글자가 반드시 같아야 합니다. 예를 들자면 첫번째 부분은 love 인데 두번째 부분에는 story 를 넣으면 안된다는 거죠^^ 아셨죠?^^

※ 이미지 링크 주위에 테두리 제거
이미지를 링크시키면 불필요하게 이미지주변에 시퍼런 테두리가 생길때가 있습니다. 그럴 경우에는 이미지 태그 안에 위처럼 border="0" 를 적어 넣으시면 됩니다.border="수치" 는 테두리의 두께를 조절하는 속성이랍니다.

※ target 속성
타겟 속성은 링크태그와 밀접한 관계에 있는 속성입니다. 특히 프레임 태그에서는 초보분들이 가장 많이 어려워하시는게 이 target 속성이랍니다. 일단 여기에서는 매직타겟에 대해서만 배워보도록 하겠습니다. 매직타겟이란 별도의 name 지정없이 target을 지정할 수 있는 속성입니다. 매직타겟 이외에 name을 지정해주어서 target을 정해주는 방법은 프레임 태그(화면 분할하기)부분에서 설명드리져^^

target="_blank" 혹은 target="new"
새로이 로딩될 내용을 새로운 익스플러워창에 나타내주는 것입니다
target="_self"
현재의 화면에 새로운 내용을 나타내어줍니다
target="_top"
현재의 화면이 프레임화면일때(여기처럼 나누어진 화면) 현재의 프레임이 없어지고 전체하나의 화면에 내용이 나타나는 것입니다. "_blank"처럼 새로운 익스플러워창이 새로 생기는 것이 아니라 자신의 화면에서 프레임으로 분할된 것이 없어지고 전체 화면에 표시됩니다.
target="_parent"
링크 부분이 있는 프레임에 새로운 프레임이 만들어져 새로운 내용을 표시합니다. 이옵션은 부모계층에 해당하는 <FRAMESET>에 페이지를 로드합니다.

사용방법은 <a href="링크될 주소" target="_blank">클릭</a> ☜이런 식이져^^

2009년 9월 21일 월요일

FRAMESET, FRAME, iFRAME 태그의 속성

<FRAMESET> </FRAMESET>

★ 속성

border="픽셀"	경계선의 두께 설정
bordercolor="색이름/RGB값"	경계선의 색상 설정
cols/rows="픽셀/%"	프레임셋 내의 프레임들을 열/행으로 나눌 때
frameborder="1/0"	프레임 경계선의 표시 유무 설정(1=yes/0=no)
framespacing="픽셀"	프레임셋 내에서 프레임간의 간격

<FRAME>

★ 속성

src="url"	연결될 페이지
border="픽셀"	경계선의 두께 설정
bordercolor="색이름/RGB값"	경계선의 색상 설정
frameborder="1/0"	프레임 경계선의 표시 유무 설정(1=yes/0=no)
marginheight="픽셀"	프레임내의 문서와 상하 여백을 설정
marginwidth="픽셀"	프레임내의 문서와 좌우 여백을 설정
name="프레임 이름"	프레임의 이름을 지정
noresize	프레임의 크기를 고정한다. 브라우저에서 프레임의 크기를 사용자가 조절 할 수 없게한다.
scrolling="yes/no/auto"	프레임 내에 스크롤바 생성 유무를 설정 auto이면 문서가 화면을 넘어갈 때 자동으로 만들어 진다.

<iFRAME> </iFRAME>

★ 속성

src="url"	연결될 페이지
align="left/center/right"	iframe의 정렬 상태를 설정
border="픽셀"	경계선의 두께 설정
bordercolor="색이름/RGB값"	경계선의 색상 설정
frameborder="1/0"	프레임 경계선의 표시 유무 설정(1=yes/0=no)
framespacing="픽셀"	프레임셋 내에서 프레임간의 간격
height/width="픽셀"	창의 높이/넓이를 설정
hspace/vspace="픽셀"	창의 경계선과 창 안의 인접하고 있는 텍스트 사이의 좌우/상하 간격을 설정
marginheight="픽셀"	프레임의 상하 여백을 설정
marginwidth="픽셀"	프레임의 좌우 여백을 설정
name="프레임 이름"	프레임의 이름을 지정
scrolling="yes/no/auto"	프레임 내에 스크롤바 생성 유무를 설정 auto이면 문서가 화면을 넘어갈 때 자동으로 만들어 진다.
id="id 이름"	class와 동일한 기능 다만 id는 한 번만 사용 할 수 있다.
style="스타일 시트 입력"	적용될 스타일 시트 지정

<NOFRAMES>내용</NOFRAMES>

브라우저가 프레임 기능을 지원하지 않을 때 NOFRAMES 태그의 '내용'이 보인다.

<NOFRAMES> 태그는 브라우저가 프레임 기능을 지원하지 않을 때 메인 페이지로 이동하도록 유도할 때 쓰인다. 다음과 같이..

</FRAMESET>

<NOFRAMES>브라우저가 프레임을 지원하지 않습니다. <A href="index.html">홈으로

</A></NOFRAMES>

</FRAMESET>

<iFRAME>내용</iFRAME>

마찬가지로 iFRAME을 지원하지 않을 때 iFRAME 태그의 '내용'이 보인다.

<iFRAME> 이 사이에 글이 보인다면 iFRAME을 지원하지 않습니다.</iFRAME>

2010년 11월 25일 목요일

[JavaScript] 동적인 테이블 태그 생성하기

2009년 11월 19일 목요일

HTML에 플래시 넣어주는 자바스크립트 함수

2009년 10월 14일 수요일

META(메타)태그를 이용해보자

2009년 10월 5일 월요일

링크태그 기본 - A 태그

2009년 9월 21일 월요일

FRAMESET, FRAME, iFRAME 태그의 속성