클릭하면 팝업으로 뜰 이미지는 우선 호스팅에 올려서 주소를 생성하고
그냥 메모장에 <img src="이미지주소">를 입력하고 html로 저장했습니다.
그리고 포토샵 슬라이스 툴로 선택한 이미지에 아까 저장한 html 팝업창 주소를 입력했습니다.
그리고 또 이 파일을 html로 저장했습니다. html창을 열고 이미지를 클릭하니 팝업창이 뜨긴 뜨는데
주소표시줄과 하얀여백 그대로 뜨네요. ㅠㅠ
여백없이 창에 딱 맞게 그리고 스크롤도 생성되게 화면 가운데 뜨게 하려면 html을 어떻게 작성해야 하나요?
그냥 메모장에 <img src="이미지주소">를 입력하고 저장하면 안되는 거겠죠?
html을 어떻게 작성해야 팝업창이 예쁘게 뜰지 알려주세요 고수님들!
>
슬픈향기(eldoradoh)님의 답변입니다.
답변 내용이 많은 도움 되었습니다.
팝업창을 이미지로 그냥 띄우는 것은 상당히 위엄한 일입니다.
팝업창 띄울 때 팝업창 크기는. 이미지 크기로 띄우세요.
예를 들어서. 이미지 크기가 가로 500px, 세로200px이라면.
window.open("팝업창페이지주소", "팝업창이름영문으로", "width=500, height=200");
팝업창 띄우실 페이지를 아래와 같이 작성하세요.
<html>
<head>
<title></title>
<style type="text/css">
body {margin:0; padding:0;}
img {border:0; vertical-align:top;}
</style>
</head>
<body>
<img src="이미지주소" width="넓이" height="높이" alt="이미지설명" />
</body>
</html>
=========================================================
팝업 창 만들기 [내공100]
안녕하세요.
팝업창을 포토샵으로 만들긴 만들었는데,
인터넷 검색을 통해서 이래저래 다음카페 메인에 소스를 넣어서
카페 접속시 팝업창이 뜨게 했어요... (어떻게 했는지 기억이 안남 ㅜㅜ)
근데 이게 포토샵으로 클릭하면 정보가 있는 곳으로 이동하게 만들고 했는데요,
클릭도 안되고, 오늘 하루 이창 열지 않기(?) 이말이 맞으려나...
아무튼 이 말을 체크하거나 누르면 팝업창이 하루동안 뜨지 않게 하는 것도 추가해서 넣고 싶은데요..
하는방법도 모르겠고, 너무 복잡해요 ㅠㅠ
간단하게 알려주실분 부탁합니다 ㅠㅠ
↑ 이게 만든 팝업창인데, 자세한 사항은 공지사항에서 확인하세요! 이 부분을 클릭이 되게 하구싶구요..
만든 팝업창 아래에 이 창을 하루동안 열지 않음 << 이 문구도 추가하고 싶어요!
이 두가지 알려주세요ㅠㅠ 감사합니다!!
빠른 답변 완전 감사해요!
그림에서 그부분만 링크를 넣으려면 포토샵을 이용해야 하는데
그러면 복잡해 지니까
이미지 자체에 링크를 넣는게 더 좋겠네요.^^
부모창의 <head> 와 </head> 사이에 삽입하세요.
<script language="javascript">
// 이부분부터 수정할 필요 없습니다.
function getCookie(name) {
var Found = false
var start, end
var i = 0
while(i <= document.cookie.length) {
start = i
end = start + name.length
if(document.cookie.substring(start, end) == name) {
Found = true
break
}
i++
}
if(Found == true) {
start = end + 1
end = document.cookie.indexOf(";", start)
if(end < start)
end = document.cookie.length
return document.cookie.substring(start, end)
}
return ""
}
// 이부분 까지는 수정할 필요 없습니다.
function openPopup()
{
var noticeCookie=getCookie("CookieName"); // 쿠키네임 지정
if (noticeCookie != "no")
window.open('oncepopup2.html','pop','width=350,height=400,top=50,left=150');
// window.open('팝업창 웹페이지주소','윈도우명','width=350,height=400,top=50,left=150');
}
openPopup(); // 자동으로 팝업 띄우기
</SCRIPT>
팝업창의 <head>와 </head>에 추가해주세요.
<script language="JavaScript">
function setCookie( name, value, expiredays )
{
var todayDate = new Date();
todayDate.setDate( todayDate.getDate() + expiredays );
document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
}
function closeWin() {
{
if ( document.cnjform.notice.checked ) // 폼네임 cnjform 은 동일해야 합니다.
setCookie("CookieName", "no" , 1); // 부모창에서 지정한 쿠키네임과 일치 해야 합니다.
}
top.close();
}
</script>
팝업창의 <body> 와 </body>에 추가해주세요.
<table border="1" cellspacing="0" width="276" bordercolor="#FCB0D8" bordercolordark="white" bordercolorlight="#66CCFF">
<tr>
<td width="270" height="25" bgcolor="#FFE6F2">
<p align="center"><span style="font-size:9pt;"><img src="1202.gif" align="absmiddle" width="30" height="17" border="0">
<font color="red"><b> 공지사항 </b></font><img src="1202.gif" align="absmiddle" width="30" height="17" border="0"></span></p>
</td>
</tr>
<tr>
<td width="270" height="259">
<p align="center"><span style="font-size:9pt;">여기다가 공지사항을
<br>쓰시면 됩니다.</span></p>
</td>
</tr> <tr>
<td width="270" height="9" bgcolor="#99CCFF">
<form name="cnjform">
<p align="center"><span style="font-size:9pt;"><input type="checkbox" name="notice" onclick="closeWin()"> 오늘 하룻동안 페이지를 열지 않습니다.</span>
</form>
</td>
</tr>
</table>
=================================
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximun-scale=1.0,minimun-scale=1.0"/>
<meta name="description" content=""/>
<title>2016년 고용·산재보험 보험료 신고 및 납부안내</title>
<link rel="stylesheet" href="/ei/css/common.css" />
<link rel="stylesheet" href="/ei/css/print.css" media="print" />
<script>
window.onload = function() {
var width = window.document.body.clientWidth;
var height = window.document.body.clientHeight;
if(width > 460+4 || height > 300+4){
window.resizeTo(460, 300);
}
}
//<![CDATA[
function setCookie( name, value, expiredays ) {
var today = new Date();
today.setDate( today.getDate() + expiredays );
document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + today.toGMTString() + ";";
}
function closewin() {
setCookie("ei_popup_3", "N", 1);
window.close();
}
//]]>
</script>
</head>
<!-- <body>
<h1 class="hidden">공지사항</h1>
<div id="popContent2">
<div class="page">
<div class="usualpop">
<img src="/ei/images/popup/090903_CS(ei_out).gif" alt=" " />
</div>
<div class="nomoreinfo nminfo2">
<div>
<input type="checkbox" id="nomore"><label for="nomore" class="ml5">오늘 하루 이 창을 열지않습니다.</label>
</div>
<a href="#">[닫기]</a>
</div>
</div>
</div>
</body> -->
<body>
<h1 class="hidden">2015년 고용·산재보험 보험료 신고 및 납부안내</h1> <div id="popContent2">
<div class="page">
<div class="usualpop">
<a href="http://www.kcomwel.or.kr" target="_blank"><img src="/ei/images/popup/popup_150304.jpg" alt="고용산재보험 토탈서비스" title="2015년 고용·산재보험 보험료 신고 및 납부안내" width="460" height="270"/></a>
</div>
<div class="nomoreinfo nminfo2">
<div>
<input type="checkbox" id="nomore" onClick="closewin()"><label for="nomore" class="ml5">오늘 하루 이 창을 열지않습니다.</label>
</div>
<a href="#" onclick="self.close();">[닫기]</a>
</div>
</div>
</div>
</body>
</html>
======================================================
나를 따라다니는 맞춤형 광고, 어떻게 끌 수 있을까?
이상우
[IT동아 이상우 기자] 몇 년 전만 해도 디지털 광고라고 하면 포털 사이트 메인 페이지에 배너를 게재하는 정도가 전부였지만, 오늘날 다양한 방식으로 변화하며 전체 광고 시장에서 큰 비중을 차지하고 있다. 과학기술정보통신부와 한국방송광고진흥공사가 2018년 12월 발간한 보고서에 따르면 18년 한 해 총 광고비는 13조 6,836억 이며(추정) 이 가운데 온라인 광고 비중은 40.3%로 방송 광고(30.4%), 인쇄광고(16.6%), 옥외 광고(9.8%) 등을 앞질렀다. 특히 온라인 중에서도 모바일 광고에 인터넷(PC) 광고의 두배 가까운 광고비를 지출해 모바일 기반의 광고가 광고 시장에서 새로운 채널로 자리잡고 있는 추세다.
디지털 광고와 관련한 기술 역시 많은 발전을 이루고 있다. 사용자의 과거 검색 이력을 파악해 구매할 만한 상품 광고를 노출하는 리타겟팅 같은 기법은 물론, 인공지능을 기반으로 사용자의 연령이나 취미 혹은 경제력 등을 추정해 최적의 상품을 보여주기도 하고, PC와 모바일을 오가며 검색하더라도 같은 사람이라고 추정해 동일한 제품을 반복적으로 보여주는 등 광고 효율을 높이기 위한 다양한 기법이 쓰이고 있다.
이러한 맞춤형 광고는 사용자가 서비스를 이용하는 과정에서 소비한 콘텐츠의 유형, 방문하는 서비스 종류 등을 플랫폼 기업이 수집해 제공한다. 이 과정에서 사용자의 행동 정보를 파악하며, 개인을 식별할 수 있는 개인정보는 활용하지 않는다고 밝히고 있다.
그런데 사용자 입장에서는 마치 자신을 겨냥하며 따라다니는 듯한 맞춤형 광고가 불편한 경우도 있으며, 특히 개인정보 유출에 관한 이슈 때문에 불안한 느낌도 든다. 그렇다면 이러한 맞춤형 광고를 거부할 수 있는 방법은 무엇일까?
우선 대부분의 맞춤형 광고는 인터넷 사용 기록인 쿠키를 기반으로 제공하고 있다. 사용자는 스스로 이러한 쿠키를 지울 수 있으며, 이를 통해 맞춤형 광고가 자신에게 노출되는 것을 막을 수 있다.
웹 브라우저 기능을 갖춘 네이버 모바일 앱을 예로 들면 설정 창에서 인터넷 사용기록을 선택한 뒤 방문 URL 기록이나 쿠키를 삭제할 수 있다. PC용 웹 브라우저 역시 이와 마찬가지다. 웹 브라우저 설정에서 '개인정보' 혹은 '보안'이라는 항목을 선택하면 쿠키를 삭제할 수 있는 기능을 제공한다. 뿐만 아니라 브라우저에 따라 보안 수준을 높이고, 쿠키등을 활용한 추적을 막는 기능도 갖추고 있어, 이러한 기능을 활용하면 맞춤형 광고를 어느 정도 줄일 수 있다.
쿠키가 아닌, 사용자 로그인 정보를 활용하는 맞춤형 광고 방식도 있다. 구글이 대표적인 예로, 안드로이드 스마트폰 사용자가 검색한 정보나 유튜브 동영상 시청 기록을 바탕으로 배너 광고, 동영상 광고 등을 맞춤화해 보여주는 방식이다. 이러한 광고 역시 계정 설정을 통해 노출되지 않도록 할 수 있다.
우선 웹 브라우저를 열어 google.com으로 접속한다. 여기서 자신의 계정으로 로그인 한 뒤 계정 설정에서 광고 노출과 관련한 항목을 설정할 수 있다. 우선 구글에 접속해 로그인을 하면 우측 상단에 자신의 프로필이 나타난다. 이를 누른 뒤 '구글 계정 관리'를 선택한 뒤 '개인정보 보호 및 맞춤설정' 항목에서 광고 최적화와 관련한 설정을 변경할 수 있다.
이 설정 창에서 광고 개인 최적화를 사용할지 말지 결정하는 것은 물론, 구글이 추정한 개인의 성향이나 관심분야 등을 확인할 수도 있다. 만약 최적화된 광고를 계속 사용하고 싶다면 이 창에 나타난 각종관심 분야를 확인하고 필요 없는 정보를 지워 정말 필요한 광고를 중심으로 노출 하는 것도 가능하다. 모바일 기기에서도 마찬가지다. 브라우저를 통해 구글에 접속하고, 로그인을 한 뒤 계정 설정에서 광고 최적화 기능을 끄거나 세부적인 설정이 가능하다.
추가적으로 구글 광고의 경우 마음에 들지 않는 특정 광고를 다시는 보지 않게 하는 기능도 있다. 광고 배너 우측 상단에 있는 느낌표 모양 버튼을 누른 뒤 '이 광고 그만 보기'를 누르고, 해당 광고를 그만 보고 싶은 이유를 선택하면 된다. 특히 음란, 사행성 등의 내용을 담은 광고를 부적절한 광고로 선택할 경우 해당 내용을 신고할 수도 있기 때문에 노출되는 광고의 질을 개선할 수도 있다.
참고로 이러한 방법은 맞춤형 광고 기능을 사용하지 않는 것이지, 광고 자체를 제거하는 기능은 아니다. 앞서 설명한 기능은 이러한 맞춤 광고가 부담스러운 사용자가 이용할 수 있는 기능이며, 광고 자체를 제거하기 위해서는 별도의 플러그인을 설치하거나 광고가 노출되지 않는 유료 서비스(예를 들면 유튜브 프리미엄)를 이용해야 한다.
글 / IT동아 이상우(lswoo@itdonga.com)
출처: https://it.donga.com/29945/