세이박스

자바스크립트 이용해서 다음 카페 대문에 iframe 삽입하기

웹프로그램
사용자 삽입 이미지


다음 카페 대문에 광고 삽입되는것을 보고서 어떻게 구현하는 것일까?
고민하다가 소스를 보니 자바스크립트를 이용하고 있더군요.
일단, 다음 카페 설정에서 대문 설정이 있는데 html 모드로 설정 하시면 태그를 입력 할 수 있습니다.

사용자 삽입 이미지


하지만, <iframe></iframe> 태그는 사용할수 없도록 차단하고 있습니다.
차단 방법이 iframe 단어로 차단하고 있으므로 ifr ame 을 분리 하면됩니다.
하지만 이렇게 태그를 분리하면 iframe 동작을 못하게 됩니다.
따라서, 자바스크립트의 document.write() 를 이용해서 출력해주면 됩니다.

<scRIPT>document.write("<IFR"+"AME height=710 src='http://도메인' frameBorder=0 width=778 height=162 scrolling=no></IFR"+"AME>");</scRIPT>

위 소스처럼 "<ifr"+"ame ..." 으로 분리 해버리면 실제 출력은 "<iframe"으로 되지만 다음카페에서 차단 분석시에는 예외 처리 되어 버립니다.
이로써 카페 대문에 광고 및 필요한 내용을 외부로 부터 가져와서 보여 줄수가 있겠죠.
잘 응용해보세요.

제가 달인쿠폰 배너를 샘플로 제 임시 다음카페에 적용해 봤습니다.
참조 : http://cafe.daum.net/sayboxs


 ▶ 최신영화, 최신 미국드라마 무료 다운로드...

드림위브에서 특정 확장자를 php 또는 asp, jsp 확장자로 인식 하게끔 적용하기

웹프로그램
사용자 삽입 이미지

1. 드림위버에서 .say 확장자 오픈 되도록 적용

드림위버를 실행후 메뉴 > Edit > Preferences > File Types / Editors > Open in code view:
항목에 .say 추가 합니다.

.js .asa .css .cs .config .inc .txt .as .asc .asr .vb .say


2. 드림위버에서 .say 확장자 파일을 불러올 때 php 코드 부분 컬러를 변경 되도록 적용

C:\Program Files\Adobe\Adobe Dreamweaver CS3\configuration\DocumentTypes\MMDocumentTypes.xml

파일을 EditPlus 또는 메모장으로 열어서 Ctrl + F 찾기에서 "php"를 찾습니다.

<documenttype id="PHP_MySQL" servermodel="PHP MySQL" internaltype="Dynamic" winfileextension="php,php3,php4,php5,say" macfileextension="php,php3,php4,php5,gdy" file="Default.php" writebyteordermark="false">

위 소스 라인에서 ,say 라고 추가 한것 처럼 추가 하시면 됩니다.


3. 드림위버 종료후 재시작
반드시 위 사항 적용후 다시 실행 해야 적용 됩니다.
이제 드림위버에서 index.say 라는 파일을 오픈시 바로 열리면서 php 코드가 있으면 지정된 코드 컬러로 표시 될 겁니다.
이와 같이 php 뿐만 아니라 asp, jsp, html 등의 컬로로도 지정 하 실수 있습니다. (2번 항목 응용)
테스트는 Dreamweaver CS3, Dreamweaver CS4 에서만 해봤기에 이하 버전에서도 동일하게 처리 되는지는 확인 하지 못했습니다.

HTML base URL 활용하는 방법

웹프로그램
base url 이란?
현재 디렉토리를 지정한 디렉토리로 변경 해주는 기능 입니다.

조금 설명을 구체적으로 하면 다음과 같습니다.
브라우저에서 특정 사이트를 접속시 일단 html 소스를 읽어 옵니다.
그리고 html 소스를 순서대로 분석하면서 이미지, 플래시, 동영상 등의 파일을 다시 불러와서 내컴퓨터 임시 폴더 영역에 저장 합니다.
임시로 저장하는 영역은 IE 7.0인 경우 다음 경로와 같습니다.
브라우저 메뉴 > 도구 > 인터넷 옵션 > 설정 > 파일보기
를 클릭하면 앞전에 받았던 이미지 등이 보일 것입니다.

예) <img src="/images/test.jpg">

브라우저에서 읽어온 html 소스에 예와 같은 이미지 테그가 있는경우 브라우저에서는 자동으로 접속한 도메인을 base url로 생각하고 이미지를 받아 옵니다.
즉, <img src="http://접속한도메인/images/test.jpg"> 처럼 적용해서 이미지를 받아올 때
http://접속한도메인/images/test.jpg 로 불러 오게 됩니다.

base url 적용 소스 :


위 소스를 html 소스 맨 상단에 입력 해주면 이하 소스들은 위 URL을 기본 도메인 처리 됩니다.

예) 접속한 사이트는 http://www.naver.com/ 이지만 base url은 http://www.saybox.co.kr 인경우
<img src="/images/test.jpg"> 이와 같은 이미지 경로는 http://www.naver.com/images/test.jpg 가 아닌 http://www.saybox.co.kr/images/test.jpg 에서 불러오게 됩니다.

[HTML] meta 메타 태그 종류

웹프로그램

1. <meta http-equiv="Content-Language" content="ko">
웹문서의 문법을 나타냅니다.


2. <meta http-equiv="imagetoolbar" content="no">
이미지에 나타나는 툴바를 제거합니다.


3. <META http-equiv="Page-Enter" content="blendTrans(Duration=0.1)">

4. <META http-equiv="Page-Exit" content="blendTrans(Duration=0.1)">

3.4번은 웹문서를 들어 올때나 나갈때 부드럽게 페이지를 이동시킵니다..플래시 효과같게...


5. <META http-equiv="Page-Enter" content="RevealTrans(Duration=0.3, Transition=12)">
이 페이지가 호출될때 3초간 12번 효과가 연출됨

6. <META name="robots" content="noindex,follow" />
이 문서는 긁어가지말고 링크된 문서는 긁어 갈 것을 나타냄

7. <META HTTP-EQUIV='Cache-Control' CONTENT='no-cache'>
캐쉬를 사용하지 말고 다시 지정된 문서를 새로 읽어서 보여준다는 뜻입니다.

8. <META HTTP-EQUIV='Pragma' CONTENT='no-cache'>
캐쉬에서 해당 페이지를 읽어들이는걸 방지합니다..들어 올때마다 새로고침한 것과 같은 효과입니다


이외에도 많이 있음 ^^

<HR> 태그 사용해서 점선 표시 하기

웹프로그램

* HR 태그에 스타일을 적용해서 점선 표시 가능합니다.

<hr style="color:#999999;border-style:dotted">

color : 점선 색상

border-style : 점선 스타일 지정 (dotted : 점선)

PHP strip_tags() 문자열에 html 태그나 php문구 모두 제거

웹프로그램
글 작성시 html 에디터 등으로 작성된 글에서 텍스트만 필요한 경우
 
string strip_tags(string str [, string allowable_tags])
 
* 문자열 str에서 html이나 php태그를 모두 제거한 문자열을 반환한다.
 
* allowable_tag은 문자열 str에 적용되어 있는 html, php태그를 사용할 경우, 그 태그는 제거하지 않고 적용어 있는 문자열을 반환한다.
 
예)
$ddd = "<P><STRONG><FONT color=#ff0000 size=3>‘스타’와 ‘연인’은 끝내 헤어질 것인가.</FONT></STRONG></P>";
echo strip_tags($ddd);
 
결과)
스타’와 ‘연인’은 끝내 헤어질 것인가.
 
 
출처 : 세이박스 http://saybox.tistory.com

html table height=100% 안먹을 경우

웹프로그램
간혹 테이블 높이를 100%로 하고 싶을 때 있을겁니다.
그런데, 어떨땐 먹고 어떨땐 안먹고 왜그럴까요.
html 타입을 설정이 답입니다.
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<table height=100%>
 <tr>
  <td>a</td>
 </tr>
</table>
 
이렇게 할 경우 a라는 글자가 맨위로 가버리죠 원인은..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
이부분입니다.
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
이렇게 고치면 짜잔 정상으로 100%로 나올겁니다.
 
적용예 :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>table 100%</title>
</head>
<body style="margin:0px;" oncontextmenu="return false;">
<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" border=0>
 <TR>
    <TD width="100%" height="25">a</TD>
  </TR>
 <TR>
   <TD height="100%">d</TD>
  </TR>
 <TR>
   <TD height="30">b</TD>
  </TR>
</TABLE>
</body>
</html>

이미지 액박 오류 표시 안되게 하기

웹프로그램
간혹 이미지 파일이 불러지지 않아서 이미지가 액박이 나는 경우가 있다.
x 표시가 참 보기 싫을 때 있다. 이를 때 아예 표시 안되도록 하는 옵션
 
onerror="this.style.display='none';"
 
을 추가 하면 된다.
 
 
적용예)
 
<img src="이미지경로/이미지.jpg" onerror="this.style.display='none';">

HTML + CSS + Script 정리 HTML

웹프로그램
HTML
 
1. 구조
 
<html>
<head>
<title></title> // 웹페이지 이름 정의
</head>
<body>
</body>
</html>
 
2. Tag들
 
<pre></pre> // html문서를 워드처럼 사용
        ex> 안녕하세요.    나는 나예요.
 
<h1 align = "center"></h1> // 주제 삽입(크기는 숫자가 작을수록 큼 1~6까지 있음). 옵션은 중앙정렬
        ex> <h1>졸려 자고싶다.</h1>
 
<hr noshade size = "3" color = "red" width = "30%"> // 수평선 긋기 noshade옵션은 수평선에 음영넣지 않기. 크기는 3 색깔은 빨강.
        ex> <hr noshade size = "3">
 
<p align = "right"></p> 단락나누기 PS. 문단 위아래로 <br> 효과가 들어감.
        ex> <p>대성이짱</p>
 
<b></b> 글자 굵게하기 이렇게
        ex> <b>4조 화이팅</b>
 
<i></i> 이탤릭체. 글자 기울게하기 이렇게
        ex> <i>글자가 기운다</i>
 
<u></u> 글자에 밑줄긋기 이렇게
        ex> <u>밑줄을 그어라~</u>
 
<s></s> 글자 중간으로 밑줄긋기
 
&nbsp; 스페이스바 효과 한칸 뛰기
 
&lt; p &gt; < p > 을 나타낸다.
 
<blockquote> 단락 들여쓰기
        ex> <blockquote><p>자야지</p></blcokquote>
 
<TT></TT> 타자체로 출력되도록 지정
 
<SUB></SUB> 아래첨자로 출력되도록 지정
 
<SUP></SUP> 위 첨자로 출력되도록 지정
 
<center></center> 센터 정렬시 사용
 
<big></big> 글자를 한단계 크게함. 중첩가능
 
<small></small> 글자를 한단계 작게함. 중첩가능
 
<font color = "red" face = "돋음" size = "5" weight = "100~900">
 
<body background = "kosta.jpg" bgcolor = "black" text = "yellow" link = "green" alink = "red" vlink = "magenta">
 
<span></span> span 사이의 문자열 영역에 style지정 가능. <div></div>도 같은 효과
        ex> <span style = "color:red">red</span>
 
<img src = "bed.jpg" align = "center" border = "1" height = "50%" width = "500">
align : left, right, left, right, bottom        PS. center 는 에러!
 
<ol start = "c || ii || 3" type = "a || i || 1"></ol>
<ul type = "circle || square || disc"></ul>
<li value = "5">
 
<table align = "left || right" bgcolor = "red" border = "1" height = "500" width = "500"
       cellpadding = "0" cellspacing = "0" bordercolor = "red">
PS. cellpadding // 셀 내의 여백 크기 지정 , cellspacing // 셀외곽 크기지정
<tr align = "center || right || left" valign = "top || middle || bottom" bgcolor = "red">
<td(th) align = "center || right || left" valign = "top || middle || bottom" bgcolor = "red"
       height = "500" width = "500" colspan = "2" rowspan = "2" nowrap>
PS. nowrap // 셀 내의 내용은 다음 라인으로 넘어갈 수 없음을 지정
 
<bgsound balance = "-10000 || 10000" loop = "-1 || 0 || n" src = "text.mid" volume = "-10000 || 0">
 
<a name = "앵커이름"></a>
<a href = "#앵커이름 || URL || URL#앵커이름" target = "_top || _blank || _self || _parent"></a>
 
 
이미지 맵 영역을 나눠서 링크 꾸미기
<img src = "1-28.jpg" usemap = "#mainmap">
<map name = "mainmap">
        <area shape = "rect" coords = "0.0.127.92" href = "http://www.yahoo.co.kr">
        <area shape = "circle" coords = "190,46,45" href = "http://www.daum.net">
        <area shape = "poly" coords = "0,138,127,93,252,138,127,182" href = "http://www.man.co.kr">
</map>
 
<frameset cols = "30%,*" rows = "30%,*" border = "20" bordercolor = "red" frameborder = "yes"></frameset>
frameborder // 프레임 사이의 경계선의 존재 여부 지정 yes , no
border // 프레임 사이의 경계선의 굵기 지정
 
<frame bordercolor = "red" frameborder = "yes" marginheight = "100" marginwidth = "100" name = "daesung"
       noresize scrolling = "yes || no || auto" src = "http://www.naver.com">
PS. 프레임은 바디 안에서 사용할 수 없다. 바디 안에서 사용가능 한건 iframe-x
<iframe-x bordercolor = "red" frameborder = "yes" marginheight = "100" marginwidth = "100" name = "daesung"
       noresize scrolling = "yes || no || auto" src = "http://www.naver.com"></iframe-x>
 
<form action = "1-28.htm" method = "get || post" name = "fm" enctype = "encodingType" target = "windowName"></form>
enctype // 폼의 데이터 전송 시 암호화 방법 지정.
target // CGI 프로그램에 의하여 전송되는 데이터를 출력할 윈도우 지정.
 
<input type = "text || password" maxlength = "8" name = "son" size = "10" value = "초기값지정">
<input type = "button || submit || reset || image" name = "son" value = "버튼이름">
        PS. 이미지 버튼 만들기
            ex> <input type = "image" src = "button.gif" name = "son" value = "전송">
                <button name = "button1" type = "reset"><img src = "button.gif" align = "middle">reset</button>
<input type = "checkbox || radio" checked name = "son" value = "이름">
        // 그룹으로 묶고 싶은 것끼리는 네임을 같게 해주어야한다.
 
<select name = "son" multiple size = "1"> // multiple 여러개 지정가능 size 보일 수 있는 항목 수
       <option value = "값" selected> // 초기 선택 값
</select>
 
<textarea cols = "30" rows = "20" name = "son" wrap = "off || hard || soft">
// cols, rows 텍스트 영역의 세로 가로 길이 wrap 텍스트의 자동 줄바꿈 처리지정.
 
******************** 참고 사항 ***********************
meta태그
ex> <meta http-equiv = "refresh" content = "3; url = hello.html">
    3초 후에 hello.html 파일로 이동합니다.
 
★marquee태그
<html>
<head><title>marquee</title></head>
<body>
<h3>marquee</h3>
<marquee direction=up width=200 height=60 scrollamount=1 onmouseover="this.stop()" onmouseout="this.start()">
<!-- 마퀴태그 안에 정의한 내용이 위로 1씩 올라간다, 마우스를 올리면 멈추고, 떼면 다시 움직인다 -->
<table width=200 border=0 cellspacing=3 cepllpadding=0>
<tr>
        <td><a href="http://www.naver.com"><img src="abc.gif" border=0>네uc0이uc0버uc0로</a></td>
</tr>
<tr>
        <td><a href="http://www.daum.net"><img src="abc.gif"  border=0>다uc0음uc0으uc0로</a></td> 
</tr>
</table>
</marquee>
</body>
</html>
**********************************************************
 
 
 
 
CSS
 
css 사용예1
<head>
<style>
        h4 { color:red; font-style:oblique }
</style>
</head>
 
css 사용예2
<body>
        <h4 style = "color:red; font-size:20pt"></h4>
</body>
 
css 사용예3
<head>
<style>
        .help { color:blue; font-size:20pt }
        h2.myclass { color:yellow; font-size:40pt }
</style>
</head>
<body>
        <p class = "help"></p>
        <h2 class = "myclass"></h2>
</body>
 
css 사용예4
<head>
<style>
        #help { color:blue; font-size:20pt }
        #myclass { color:yellow; font-size:40pt }
</style>
</head>
<body>
        <p id = "help"></p>
        <h2 id = "myclass"></h2>
</body>
 
css 사용예5
sheet.css
body { background:yellow; }
 
<head>
<style>
        @import url(sample.css); or @import "sheet.css"
</style>
</head>
or
<head>
<link rel = "stylesheet" type = "text/css" href = "sheet.css">
</head>
 
*********** 스타일은 상속된다!!!!!!!!!!!
 
<html>
<head><title>예제 2-8</title>
        <style type="text/css">
               body {color:blue;font-size:30pt}
               p {color:inherit; font-size:50%}
        </style>
</head>
<body>
<h3>스타일 상속 예제2</h3>
<hr noshade>
<p>15pt 글자 </p>
<p style="font-size:30pt">30pt 글자</p>
</body>
</html>
 
*******************************************
 
body{ margin: 2em } // 전체적용
body{ margin: 1em 2em } // 1em: top,bottom   2em: left, right
body{ margin: 1em 2em 3em } // 1em: top   2em: left, right   3em: bottom
body{ margin: 1em 2em 3em 4em } // 1em: top   2em: right   3em: bottom   4em:left
ex>

ul{ background:blue;
    margin:12px;
    padding:3px 6px 9px 12px;
  }
li{ color : black;
    background: yellow;
    margin:12px;
    padding:12px 0px 12px;
    list-style:none; //리스트 스타일 o ㅁ 등을 없애준다. list-style:square
  }
li.withborder{ border-style:dashed;
                border-width:thick;
                border-color:red;
  }
</style>
</head>
<body>
        <h3>박스모델예제</h3>
        <ul>
               <li>보더가없는 요소</li>
               <li class="withborder">보더가 있는 요소</li>
        </ul>
</body>
</html>
 
*************************************************
★cursor
<html>
<head><title>예제 2-16</title></head>
<body>
<h3>커서 예제</h3>
<hr noshade>
<p style="cursor:crosshair">여기에 커서가 오면 십자모양이 됩니다.</p> 
<p style="cursor:hand">여기에 커서가 오면 손모양이 됩니다.</p>
<p style="cursor:help">여기에 커서가 오면 도움말 커서가 됩니다.</p>
</body>
</html>
***************************************************

 

 
<style type="text/css">
body{   color:RGB(255,255,0);  // 글자색
        background-color:black; // 배경 검은색
        background-image:url("binu.jpg"); // 배경이미지
        background-attachment:fixed; // 배경 고정
        background-position:center; // 배경 위치 중앙
        background-repeat:repeat-y; // 배경 세로로 반복
}             
p{  color:white; background-color:blue }
</style></head>
 

* 글자색 지정은 font-color:red -> color:red 을 사용한다.
 
기타 알아야할 스타일들..
z-index = 1 // 숫자가 큰 객체가 제일 앞으로 오고 작은게 제일 뒤로간다.
visibility = visible | hidden | collapse // 객체를 보이게 하거나 안보이게한다. collapse는 테이블의 열이나 행 전체가 안보이게한다.
position = absolute | fixed | relative // fixed는 절대위치고정 absolute도 절대 위치 고정 relative는 상대위치고정(프레임을움직이면 위치가 변함)
        ex> position : absolute;
            left:0px; top:80px; width:100px; height:40px;
border-style = inset | outset | dotted | dashed // 보더 스타일을 지정한다.
border-color = red // 보더 색깔을 지정한다.
border-width = thick | thin // 보더 굵기를 지정한다. thick 굵게 thin 얇게
 
*********************************************************************************
<style type="text/css">
.alpha { font:inherit; background:yellowgreen;
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=5,finishopacity=100,style=1);
} // 이미지를 흐려지게 하는 효과
.basicimage { font:inherit; background:yellowgreen; width:inherit;                  
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=0, xray=1, mirror=0, invert=0, opacity=0.15, rotation=0);
} // x-ray, 반사, 투명도, 보색 효과 등의 효과
.blur {
font:inherit; width:inherit;
filter: progid:DXImageTransform.Microsoft.Blur(Strength=7, Direction=0);
} 번지게 하는 효과
.dropshadow {
font:inherit; width:inherit;
filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=10, OffY=10, Color='Tomato', Positive='true');
} 입체적인 효과
.emboss {
font:inherit;  background:yellowgreen; width:inherit;
filter:progid:DXImageTransform.Microsoft.Emboss();
} gray 스케일로 엠보싱(양각) 효과
.engrave {
font:inherit; background:yellowgreen; width:inherit;
filter:progid:DXImageTransform.Microsoft.Engrave();
} gray 스케일로 음각 효과
.glow {
font:inherit; width:inherit;
filter:progid:DXImageTransform.Microsoft.Glow(color=red, Strength=10);  
} 불타는 듯한 효과     
.fliph {
font:inherit; background:yellowgreen; width:inherit;
filter: fliph();                                    
} 좌우 대칭 효과
.flipv {
font:inherit; background:yellowgreen; width:inherit;
filter: flipv();                                    
} 상하 대칭 효과
.shadow {
font:inherit; width:inherit;
filter:progid:DXImageTransform.Microsoft.Shadow(Color=gray, Direction=135, Strength=32);       
} 그림자 효과
.wave {
font:inherit; background:yellowgreen; width:inherit;
filter: progid:DXImageTransform.Microsoft.Wave(Add=false, Freq=2, LightStrength=5, Strength=5); 
} 물결치는 효과
.xray {
font:inherit; background:yellowgreen; width:inherit; 
filter: Xray();                                   
} x-ray 사진 효과
</style>
</head>
<body>
<hr noshade>
<div class="alpha">Alpha Filter</div><br>
<div class="basicimage">BasicImage</div><br>
<div class="blur">Blur</div><br>
<div class="emboss">Emboss</div><br>
<div class="engrave">Engrave</div><br>
<div class="dropshadow">DropShadow</div><br>
<div class="fliph">FlipH</div><br>
<div class="flipv">FlipV</div><br>
<div class="glow">Glow</div><br>
<div class="shadow">Shadow</div><br>
<div class="wave">Wave</div><br>
<div class="xray">Xray</div><br>
</body>
</html>