Dev Blog

스크립트 & 소스코드 공유

실무에서 유용하게 쓰는 스크립트와 코드 조각을 블로그 게시판으로 저장하고 공유합니다.

10건의 글

웹페이지 인쇄 제어하기 - ScriptX 프린트 설정

MeadCo ScriptX를 이용해 웹페이지 인쇄 시 머리말·꼬리말, 인쇄 방향(세로/가로), 여백, 배경 이미지 출력 여부를 제어하는 방법이다. object 태그로 ScriptX를 로드하고 factory.printing 속성을 설정하며, IE는 ScriptX, 크롬은 window.print()로 분기 처리하는 전체 예제 코드와 무료 라이선스 안내를 포함한다.

문서에서 출력하는 방식으로 출력합니다.

출력할 페이지에 아래의 코드를 삽입한다.

<!-- MeadCo ScriptX -->
<object id=factory style="display:none" classid="clsid:1663ed61-23eb-11d2-b92f-008048fdd814" codebase="(자기경로)/smsx.cab#Version=7.4.0.8 "></object>

// 스크립트에 아래코드 추가
function printPage(){
factory.printing.header = "가로 페이지 인쇄"; //머릿말 설정
factory.printing.footer = ""; //꼬릿말 설정
factory.printing.portrait = false; //출력방향 설정: true-세로, false-가로
factory.printing.leftMargin = 1.0; //왼쪽 여백 설정
factory.printing.topMargin = 1.0; //위쪽 여백 설정
factory.printing.rightMargin = 1.0; //오른쪽 여백 설정
factory.printing.bottomMargin = 1.0; //아래쪽 여백 설정
// factory.printing.printBackground = true; //배경이미지 출력 설정:라이센스 필요
factory.printing.Print(false); //출력하기
}

// 인쇄버튼에서 해당 함수 실행
$( "#print" ).click(function(){
if( navigator.userAgent.indexOf("MSIE") > 0 ){
printPage();
} else if( navigator.userAgent.indexOf("Chrome") > 0){
window.print();
}
});

라이센스관련

http://scriptx.meadroid.com/license-pricing/free-deployment.aspx

Free Printing

A basic subset of ScriptX client-side printing functionality -- header & footer settings, printed orientation, coarse control of margins and a browser window/frame printing command -- is available at no charge, and is freely distributable.

ScriptX 클라이언트 측 인쇄 기능(헤더 및 바닥글 설정, 인쇄 방향, 여백의 거친 제어 및 브라우저 창/프레임 인쇄 명령)의 기본 하위 집합은 무료로 제공되며 무료로 배포됩니다.

배경이미지 크기 760 x 1102

<html>
<head>
<title>프린터 출력 테스트</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<STYLE media=print>
<!--
.noPrint{
DISPLAY: none
}
//-->
</STYLE>
</head>
<body>
<style>
body {
background:url('배경이미지') no-repeat center;
}
td {
font-size:26px;
font-family:궁서;
}
</style>

<table style="width:690px;">
<tr>
<td style="height:60px;">출력하기
</tr>
</table>
<table style="width:690px; height:400px;">
<tr>
<td> </td>
</tr>
</table>
<object id=factory style="display:none" classid="clsid:1663ed61-23eb-11d2-b92f-008048fdd814" codebase="http://업로드주소/smsx.cab#Version=7,6,0,10 "></object>

<script language=javascript>
function init() {
var p = factory.printing;
var printername;
var defName;
var name;
try {
factory.printing.header = "";   //머릿말 설정');
factory.printing.footer = "";   //꼬릿말 설정');
factory.printing.portrait = true;  //출력방향 설정: false-가로, true-세로');
factory.printing.leftMargin = 0;  //왼쪽 여백 설정');
factory.printing.topMargin = 0;  //위쪽 여백 설정');
factory.printing.rightMargin = 0;  //오른쪽 여백 설정');
factory.printing.bottomMargin = 0;  //아래쪽 여백 설정');
factory.printing.Preview();
} catch ( e ) {}
}
init();
</script>
</body>
</html>

참고로 배경 이미지가 출력이 안될 경우 배경색 및 이미지 인쇄 앞에 체크가 안되어 있을때 안나옵니다.

유튜브 영상을 웹페이지 배경으로 사용하는 CSS 기법

유튜브 동영상을 웹페이지 전체 배경으로 사용하는 HTML/CSS 기법이다. video-background 컨테이너와 video-foreground 안의 iframe을 화면에 꽉 차게 배치하고 z-index를 낮춰 콘텐츠 뒤에 깔리게 한다. 화면 비율에 따라 16:9, 9:16 미디어 쿼리로 확대 영역을 조정하는 전체 CSS와 HTML 예제 코드를 제공한다.

* {
  box-sizing: border-box;
}

.video-background {
  background: #000;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -99;
}

.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#vidtop-content {
  top: 0;
  color: #fff;
}

.vid-info {
  position: absolute;
  top: 0;
  right: 0;
  width: 33%;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  padding: 1rem;
  font-family: Avenir, Helvetica, sans-serif;
}

.vid-info h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-top: 0;
  line-height: 1.2;
}

.vid-info a {
  display: block;
  color: #fff;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.5);
  transition: .6s background;
  border-bottom: none;
  margin: 1rem auto;
  text-align: center;
}

@media (min-aspect-ratio: 16/9) {
  .video-foreground {
    height: 300%;
    top: -100%;
  }
}

@media (max-aspect-ratio: 16/9) {
  .video-foreground {
    width: 300%;
    left: -100%;
  }
}

@media all and (max-width: 600px) {
  .vid-info {
    width: 50%;
    padding: .5rem;
  }

  .vid-info h1 {
    margin-bottom: .2rem;
  }
}

@media all and (max-width: 500px) {
  .vid-info .acronym {
    display: none;
  }
}
<div class="video-background">
  <div class="video-foreground">
    <iframe class="ww" src="https://www.youtube-nocookie.com/embed/n0AY4ebPy4w?autoplay=1&loop=1&controls=0&vq=hd720"
      frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen></iframe>
  </div>
</div>
<div id="vidtop-content">
  <div class="vid-info">
    <h1>YouTube</h1>
    <p>Good!</p>
  </div>
</div>

검색엔진 크롤링과 인덱싱의 차이 (robots.txt vs meta robots)

검색엔진의 크롤링(문서 수집)과 인덱싱(색인)의 차이를 설명하고, robots.txt 파일로 크롤링을 제어하는 방법과 meta robots 태그로 인덱싱을 제어하는 방법을 자세히 정리했다. 전체 차단·허용, 특정 폴더·페이지·검색엔진별 차단 예시, 크롤러 허용/인덱스 차단 등 조합별 동작 방식과 인덱스 삭제에 가장 효과적인 방법까지 다룬다.

검색엔진의 크롤링과 인덱싱의 차이 (robots.txt 파일과 meta robots 태그의 차이점)
크롤링 제어는 robots.txt
인덱싱 제어는 < meta name="robots" content="noindex">

검색엔진이 검색 키워드에 대한 검색결과를 사용자한테 제공하기 위해서는 크롤러가 끊임없이 온라인 상의 문서를 수집해야하고, 크롤러가 수집한 문서를 인덱서가 잘 정리해서 인덱스 서버에 색인해 둬야 합니다.
많은 분들이 헷갈려 하는 부분인데 크롤러나 인덱서는 서로 하는일이 약간 틀립니다.
말그대로 크롤러는 단순히 사이트와 사이트 사이의 링크를 타고다니며 문서를 수집하는 역할만 하며, 인덱서는 수집된 문서를 검색엔진이 사용자에게 결과물을 좀더 빠르고 쉽게 제공할수 있도록 색인 또는 인덱스하는 역할을 합니다.

마찬가지로 크롤러를 제어하는 방법과 인덱싱을 제어하는 방법이 다릅니다.
크롤링을 제어하려면 사이트의 루트 디렉토리에 robots.txt 파일을 사용해서 제어해야 하고,
인덱싱을 제어하려면 각각의 페이지 내에 < meta name="robots" content="noindex,nofollow"> 같은 메타 로봇 태그를 사용해서 제어해야 합니다.

robots.txt 파일을 사용해서 크롤링을 제어하는 방법

기본적으로 robots.txt 파일은 사이트의 루트 디렉토리에 저장해 둡니다.
예를 들면 브라우저에 http://www.seo-korea.com/robots.txt 를 입력하면 파일을 읽을수 있어야 합니다.
http://www.seo-korea.com/myfolder/robots.txt 는 유효하지 않습니다.

검색엔진의 크롤러로 부터 모든 문서수집을 차단하려면 아래와 같은 내용을 robots.txt에 삽입합니다.
User-agent: *
Disallow: /

반대로 모든 문서를 허용하려면
User-agent: *
Disallow:

특정 폴더만을 차단하려면
User-agent: *
Disallow: /members/
Disallow: /search/
Disallow: /images/

특정 검색엔진 크롤러를 차단하려면 (구글만 차단)
User-agent: Googlebot
Disallow: /

또는 특정 검색엔진 크롤러만 허용하려면 (구글만 허용)
User-agent: Google
Disallow:
User-agent: *
Disallow: /

특정 페이지를 차단하려면
User-agent: *
Disallow: /members/personal_info.html

robots.txt 파일에 사이트맵 명시
User-agent: *
Disallow:
Sitemap: http://www.seo-korea.com/sitemap.xml

meta robots 태그를 사용해서 인덱싱을 제어하는 방법

< meta name="robots" content="..." /> 태그는 인덱싱을 제어하는데 사용되며 각 페이지의 < head>와 사이에 삽입합니다.
사용 가능한 content 로는 index, noindex, follow, nofollow 가 있습니다.
index와 noindex는 페이지의 인덱스 여부를 말해주며 follow, nofollow는 페이지내의 링크를 크롤러가 따라갈수 있느냐 없느냐의 여부를 말해줍니다.
index와 noindex중 하나 그리고 follow와 nofollow중 하나를 섞어서 함께 사용할수 있습니다.

웹 문서에 < meta name="robots"> 태그의 기본값은 index와 follow이며 아래와 같은 형식으로 사용할수 있습니다.
< meta name="robots" content="index,follow" />
< meta name="robots" content="index,nofollow" />
< meta name="robots" content="noindex,follow" />
< meta name="robots" content="noindex,nofollow" />

robots.txt 파일과 meta robots 태그를 혼용해서 사용하는 경우

위의 두가지를 잘 사용하면 검색엔진의 사이트 접근을 효과적으로 차단하거나 허용할수 있고, 검색엔진 결과에 인덱스 되는것 또한 컨트롤 할수 있습니다.
하지만 robots.txt와 meta robots 태그의 역할을 잘못 이해해서 원하지 않는 결과를 초래할수도 있습니다.
모두 공개하기 위해 크롤러와 인덱스를 모두 허용해 놓았다면 별문제 없겠지만 다른 경우의 수에서는 원하지 않는 결과가 나올수 있으니 유의하시기 바랍니다.

크롤러 허용, 인덱스 차단

User-agent: * Disallow: < meta name="robots" content="noindex" />

robots.txt에 크롤러의 접근을 허용했지만 meta robots 태그에 인덱스를 허용하지 않은 예입니다.
크롤러는 문서만 수집할뿐 검색엔진에 문서의 인덱스 여부는 meta robots 태그가 결정합니다.
그러므로 이같은 경우는 크롤러가 방문을해서 수집하기는 하지만 meta robots 태그에서 인덱스를 차단한것을 인지하고 인덱스하지 않으며, 혹시라도 인덱스가 되어있으면 자동 삭제하게 됩니다.
이 방법이 검색결과에서 문서를 삭제하는데 가장 효과적인 방법입니다.

크롤러 차단, 인덱스 허용

User-agent: * Disallow: / < meta name="robots" content="index" />

위와 같은 경우 인덱스는 허용했지만 크롤러를 차단하고 있습니다.
크롤러는 사이트의 robots.txt파일을 먼저 읽기 때문에 일단 크롤러는 컨텐츠를 읽을수 없습니다.
그러므로 인덱스가 허용되었는지 안되었는지 크롤러는 알수 없습니다.
하지만 robots.txt파일에서 크롤러를 차단했음에도 불구하고 페이지가 인덱스되어 검색결과에 나타나는 경우가 종종 있습니다.
이러한 경우는 다른 사이트에서 들어오는 인바운드 링크에 의해 인덱스가 만들어진 경우입니다.
대부분의 검색엔진들이 실제 페이지를 크롤링하지 않고도 링크를 통해서 해당 페이지의 색인을 만들수 있기때문에 가능합니다.
이럴경우 검색결과의 타이틀에는 문서의 타이틀 대신 URL이 나오게 되고 스니펫(검색결과의 문서요약)에는 아무것도 나오지 않게 됩니다.
결국 robots.txt 파일로 크롤링을 차단한다고 해도 그것이 검색결과에 문서가 인덱스 되는것을 차단시키지는 못하며, 인덱스를 허용해놓아도 이를 완벽하게 인덱싱 하지 못합니다.

크롤러 차단, 인덱스 차단

User-agent: * Disallow: / < meta name="robots" content="noindex" />

위의 경우는 크롤러와 인덱스 모두를 차단한 상황으로 일단 크롤러가 차단되었기 때문에 페이지 컨텐츠를 읽지 못합니다.
그러므로 인덱스를 차단하도록 설정을 해놓아도 크롤러는 이를 알수 없습니다.
하지만 [크롤러 차단, 인덱스 허용]의 경우와 마찬가지로 인바운드 링크들로 인해 문서가 인덱스되는 경우가 있습니다.
이렇게 검색결과에 인덱스된 경우 또한 검색결과의 타이틀에는 URL이, 스니펫(검색결과의 문서요약)에는 아무것도 나오지 않게 됩니다.
결국 크롤링과 인덱싱을 모두 차단하도록 설정을 했더라도 크롤링은 차단하되 인덱싱을 막지는 못합니다.

검색엔진에서 인덱스를 없애기 위해 가장 좋은 방법은 크롤러를 허용하고 인덱스를 차단하는 것입니다.
그래야 크롤러가 인덱스를 차단하라는 것을 감지할수 있고 이를 검색결과에 반영하게 됩니다.
그렇기 때문에 크롤링과 인덱싱의 역할, 그리고 robots.txt 파일과 meta robots 태그의 사용방법을 잘 알아야 하며, 인덱스의 차단하는 역할은인덱스의 차단하는 역할은
< meta name="robots" content="noindex"> 가 robots.txt보다 우위에 있다는걸 숙지해야 합니다.

모바일 웹페이지에서 USEMAP 좌표 오류 해결하기 (rwdImageMaps)

모바일 웹에서 이미지가 퍼센트로 크기가 변하면서 USEMAP 좌표가 어긋나는 문제를 jQuery 플러그인 rwdImageMaps로 해결하는 방법을 소개한다. jquery와 rwdImageMaps 스크립트를 로드한 뒤 img[usemap] 요소에 rwdImageMaps()를 적용하면 화면 크기가 바뀌어도 클릭 영역이 이미지와 정확히 일치하도록 자동으로 좌표가 보정된다.

因为手机网页中图片大多数使用百分比显示

所以USEMAP的坐标错位

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://mattstow.com/experiment/responsive-image-maps/jquery.rwdImageMaps.min.js"></script>
<script>
(function($){
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});
})(jQuery);
</script>

HTML accesskey 속성으로 단축키 지정하기

accesskey 속성은 마우스 등을 쓰지 않는 환경을 위해 링크나 입력 폼에서 키보드의 키 입력만으로 동작을 실행할 수 있도록 accesskey 속성값에 access 할 영어 또는 숫자 한문자를 지정하여 단축키를 설정한다.

사용법은 다음과 같다.

<input type="text" name="search" id="search" title="검색어입력" accesskey="S">

쉽게 접근하기위한 단축키로 보면된다.

accesskey의 실행 방법은 사용자의 OS와 브라우저에 따라 다르다. 특히, 다른 브라우저와는 다르게 IE(인터넷 익스플로러)에서는 <a> 태그에 지정된 accesskey를 실행하면 지정된 링크가 실행되는 것이 아니라, <a> 태그로 포커스가 이동된다. 이때 Enter를 눌러야 지정된 링크가 실행된다.

IE(인터넷 익스플로러에서는 예약어(F, E, V, A, T, H)는 사용 할 수 없다.

여기서 브라우져와 충돌이 일어날수 있기에 권장 접근키가 있다.

영문키의 경우 C, J, K, L, M. O, P, Q, R, S, U, X, Y

숫자키의 경우 1,2,3,4,5,6,7,8,9,0

기타로는 ' - [ ] ; ' , . /

* 브라우저별 accesskey 실행 방법

  1. Window IE 6/7/8/9 : Alt + accesskey -> 포커스 이동(또는 서브밋)
  2. Window Firefox 3 : Alt + Shift + accesskey -> 실행(또는 +엔터)
  3. Window Safari 5 : Alt + accesskey -> 실행
  4. Window Chrome : Alt + accesskey -> 실행
  5. Window Opera 10 : Shift + Esc + accesskey -> 실행


Let's create something great together.

프로젝트 문의 및 견적 요청은 언제든 환영합니다.