Dev Blog

스크립트 & 소스코드 공유

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

4건의 글

PHP 숫자 앞자리 0 채우기 - str_pad와 sprintf 두 가지 방법

PHP에서 숫자 앞에 0을 채우는 두 가지 방법을 소개한다. str_pad는 원하는 문자로 문자열을 왼쪽(STR_PAD_LEFT)·오른쪽·양쪽에 채울 수 있고, sprintf는 %02d 형식 지정자로 왼쪽에 0을 채우거나 소수점 이하 자릿수를 보정하는 데 유용하다. 두 함수의 특징과 사용 예제를 비교해 정리했다.

顾名思义这个函数是针对字符串来说的这个可以对指定的字符串填补任何其它的字符串

例如:str_pad(带填补的字符串,填补后的长度,填补字符串,填补位置)

其中填补后的长度必须是个正整数,填补位置有三个选项,

左边:STR_PAD_LEFT

右边:STR_PAD_RIGHT

两端:STR_PAD_BOTH

echo str_pad(1,8,"0",STR_PAD_LEFT);
//结果:00000001

echo str_pad(1,8,"0",STR_PAD_RIGHT);
//结果:10000000

echo str_pad(1,8,"0",STR_PAD_BOTH);
//结果:00010000

在上边的例子中值得注意的一个细节是,如果填补的位数是个奇数,例如例三中填补了7个0,右边优先。

再看补零的另外一种方法sprintf

这个函数学过c的都十分了解它,呵呵……

不过咱不说这么多,因为用起来实在太灵活了,以至于我基本不会用,不过在左边补零(或者在小数点后补零)用起来还是很方便的

先看左边补零

echo sprintf("%05d",1);
//先说%05d的意思,用一个5位数的数字格式化后边的参数,如果不足5位就补零
//运行结果是00005

再看小数点后补零

echo sprintf("%01.3f",1);
//%01.3f的意思是说,用一个小数点后最少三位不足三位补零,小数点前最少一位,不足一位补零的浮点数格式化后边的参数
//其运行结果是:1.000

关于补零的这两种方法大家可以挑选着使用,其实各有优劣,sprintf能够保证你不至于误操作吧1补成1000000哈哈,str_pad可以保证你想补啥补啥。

자바스크립트 print_r 함수 - 객체 구조를 HTML로 출력

PHP의 print_r처럼 자바스크립트 객체를 트리 구조의 HTML로 출력해주는 함수 예제다. 객체의 모든 속성을 순회하며, 중첩 객체는 들여쓰기를 적용해 재귀적으로 출력하고 기본형 값은 강조 표시한다. 배열 형태의 객체를 print_r로 변환해 지정한 div에 삽입하는 사용 예시를 보여준다.

<div id='video_related'></div>
<script>
var video_related = [<?php echo $video["video_related"]?>];
function print_r(theObj) {
var retStr = '';
if (typeof theObj == 'object') {
retStr += '<div style="font-family:Tahoma; font-size:7pt;">';
for (var p in theObj) {
if (typeof theObj[p] == 'object') {
retStr += '<div><b>['+p+'] => ' + typeof(theObj) + '</b></div>';
retStr += '<div style="padding-left:25px;">' + print_r(theObj[p]) + '</div>';
} else {
retStr += '<div>['+p+'] => <b>' + theObj[p] + '</b></div>';
}
}
retStr += '</div>';
}
return retStr;
}

var related = print_r(video_related);
$("#video_related").html(related);
</script>

디자이너가 꼭 알아야 할 기초 지식 - 이론·소프트웨어·인쇄

디자이너는 모든 분야에 능통할 필요 없이 자신의 분야와 직업에 맞는 기초 지식만 익히면 된다는 내용의 글이다. 구조·명암·색상 관계로 이루어진 미술 기초와 평면·색채·입체 3대 구성 이론, 포토샵·일러스트레이터 등 필수 소프트웨어, 인쇄 공정 지식, 그리고 웹디자인 기본기를 이미지와 함께 정리했다.

제공해주신 디자인 기초 이론 및 실무 지식에 관한 내용을 한국어로 번역하여 마크다운 형식으로 정리해 드립니다.

디자이너가 반드시 갖춰야 할 기초 지식 가이드

사람의 에너지는 한정되어 있어 모든 분야에 정통할 수는 없으며, 디자이너 역시 모든 방면에서 완벽할 필요는 없습니다. 자신의 산업군과 전공에 맞춰 필요한 기술과 지식을 학습하는 것이 중요합니다. 아래에서 디자인을 하기 위해 반드시 숙지해야 할 기초 지식들을 살펴보겠습니다.


1. 이론적 기초 지식

이론적 기초는 미술 회화의 기초 지식과 디자인의 3대 구성을 의미합니다. 이는 디자이너의 뿌리이며, 어떤 디자인 분야에 종사하든 결코 빠질 수 없는 핵심 지식입니다.

미술 기초 지식 (구조, 소묘, 색채 관계)

  • 구조 관계: 물체의 투시, 비율, 구조를 연구하는 것입니다.
    • 투시: 물체가 가까이 있으면 크고 멀리 있으면 작게 보이는 공간 관계입니다.
    • 비율: 물체가 차지하는 3차원 공간의 크기(부피)를 의미합니다.
    • 구조: 복잡한 물체를 원형, 삼각형, 사각형 등 그리기 쉬운 기본 도형으로 해체하여 파악하는 것입니다.
  • 소묘 관계 (명암): 광원이 물체에 비칠 때 발생하는 관계를 연구합니다.
    • 3대면: 빛을 받는 방향에 따라 밝은 면(명면), 중간 면(회색면), 어두운 면(암면)으로 나뉩니다.
    • 5대조: 물체의 입체감과 공간감을 표현하는 5가지 단계입니다. 밝은 부분, 중간 부분, 명암 경계선, 그림자 속의 반사광, 그리고 그림자를 포함합니다. 특히 '명암 경계선'을 잘 파악해야 물체의 부피감을 효과적으로 살릴 수 있습니다.
  • 색채 관계: 색상이 서로 융합될 때 발생하는 영향을 연구합니다. 대비색, 보색, 인접색 등의 관계와 환경색, 고유색 등을 포함합니다.

디자인의 3대 구성

현대 예술 디자인의 가장 중요한 기초로 평면 구성, 색채 구성, 입체 구성을 말합니다.

  • 평면 구성: 2차원 공간 안에서 형태의 변화를 연구하는 학문입니다. 점, 선, 면을 일정한 규칙에 따라 결합하여 시각 언어를 형성하며, 추상성과 형식미가 강합니다. 이성과 논리를 바탕으로 형상 간의 배열 방법을 연구하는 감성과 이성의 결합체입니다.
  • 색채 구성: 사람들이 오랜 시간 동안 색상에 대해 느껴온 심리적 반응과 고정 관념을 정리한 것입니다. 색상(Hue), 순도(Chroma/Saturation), 명도(Value)의 관계를 연구하여 목적에 맞는 심리적 효과를 창출합니다.
  • 입체 구성 (공간 구성): 시각과 역학을 기초로 재료를 사용하여 아름다운 형체를 만드는 방법입니다. 2차원 평면에서 3차원 입체 공간으로 확장되는 표현 방식으로, 평면 구성과 밀접한 연관이 있으면서도 차별화된 특징을 가집니다.

2. 실무 및 그래픽 디자인 지식

로고, 포스터, 브로슈어, 리플릿 등을 디자인하기 위해 필요한 구체적인 실무 지식입니다.

소프트웨어 지식 (도구 활용)

도구는 가장 기본적인 기초입니다. 디자인 분야에 따라 다음 소프트웨어를 반드시 마스터해야 합니다.

  • Adobe Photoshop (PS)
  • Adobe Illustrator (AI)
  • CorelDRAW (CDR)

인쇄 공정 및 제작

명함, 카드, 전단지(DM), 포스터, POP 등을 디자인한다면 인쇄 공정에 대한 이해가 필수적입니다.

  • 종이의 종류, 판형(레이아웃) 공정
  • 인쇄 표면 후가공(코팅, 박 등), 제본 공정
  • 패키지 디자인의 경우 도면(칼선/Die-cut) 지식 필수

레이아웃 및 편집 지식

책자, 광고, 웹 디자인에서 주로 사용되는 원리입니다.

  • 레이아웃 배치 원리 및 그리드 시스템(Grid System) 이론
  • 페이지 구성의 기본 요소 유형 파악

브랜딩 및 웹 디자인

  • 브랜드 지식: 기업 VIS(Visual Identity System), 로고 디자인, 타이포그래피(서체 디자인) 및 그래픽 크리에이티브
  • WEB 디자인 지식: 디자인 가이드라인 및 규격 준수

웹페이지 인쇄 제어하기 - 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>

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



Let's create something great together.

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