실무에서 유용하게 쓰는 스크립트와 코드 조각을 블로그 게시판으로 저장하고 공유합니다.
총 7건의 글
낮은 버전 IE 등 일부 브라우저에서 웹폰트 글자가 계단처럼 보이는 안티앨리어싱 문제를 해결하는 CSS 팁이다. 육안으로 구분되지 않는 미세한 기울기 transform: skew(0.001deg)를 글자에 적용하면 렌더링이 부드러워지며, .font_sel 클래스에 적용하는 예제 코드를 함께 소개한다.
使用WEBFONT时，低版本的IE浏览器以及其他浏览器显示字体有锯齿现象解决方。
.font_sel {transform:skew(-0.001deg);}
给些肉眼看不出来的斜度
PHP에서 웹페이지 데이터를 엑셀 형식으로 내보낼 때 셀의 앞자리 0(예: 010...)이 사라지는 문제를 해결하는 방법이다. MIME 타입을 application/vnd.ms-excel로 설정하고, 데이터를 감싸는 td 태그에 vnd.ms-excel.numberformat:@ 스타일을 지정하면 셀이 텍스트 형식으로 출력되어 0이 유지된다. 날짜·숫자·통화·퍼센트 형식도 정리했다.
“首先，我们了解一下excel从web页面上导出的原理。
当我们把这些数据发送到客户端时，我们想让客户端程序（浏览器）以excel的格式读取它，
所以把mime类型设为：application/vnd.ms-excel，当excel读取文件时会以每个cell的格式呈现数据，如果cell没有规定的格式，则excel会以默认的格式去呈现该cell的数据。
这样就给我们提供了自定义数据格式的空间，当然我们必须使用excel支持的格式。
下面就列出常用的一些格式：
1） 文本：vnd.ms-excel.numberformat:@
2） 日期：vnd.ms-excel.numberformat:yyyy/mm/dd
3） 数字：vnd.ms-excel.numberformat:#,##0.00
4） 货币：vnd.ms-excel.numberformat:￥#,##0.00
5） 百分比：vnd.ms-excel.numberformat: #0.00%
这些格式你也可以自定义，比如年月你可以定义为：yy-mm等等。
那么知道了这些格式，怎么去把这些格式添加到cell中呢？很简单，我们只需要把样式添加到对应的标签对（即闭合标签）即可。
如，给标签对添加样式，如下：<td style="vnd.ms-excel.numberformat:@">410522198402161833</td>
JavaScript 없이 순수 CSS만으로 라디오 버튼과 체크박스를 예쁘게 스타일링하는 방법이다. 기본 input을 숨기고 label과 가상 요소(::before, ::after)를 활용해 커스텀 UI를 구성하며, 체크 상태에 따라 색상과 모양이 바뀌도록 하는 CSS와 HTML 구조 예제를 제공한다.
css
/* 체크박스 스타일시트 */
.ck_style{margin:0 10px 0 0;display:inline-block;}
.ck_style input[type="radio"] , .ck_style input[type="checkbox"]{display:none}
.ck_style i{background-color:#fff;border:1px solid rgba(0,0,0,0.15);border-radius:100%;display:inline-block;height:18px;margin-right:6px;margin-top:-1px;vertical-align:middle;width:18px;line-height:1}
.ck_style input[type="radio"]:checked + i:after{background-color:#2fa2dd;border-radius:100%;content:"";display:inline-block;height:12px;margin:2px;width:12px}
.ck_style input[type="checkbox"] + i{border-radius:0}
.ck_style input[type="checkbox"]:checked + i:after{background-color:#2fa2dd;border-radius:0;content:"";display:inline-block;height:12px;margin:2px;width:12px}HTML
<label class="ck_style"><input type="radio" name="demo-radio"><i></i> 여</label>
<label class="ck_style"><input type="radio" name="demo-radio"><i></i>부</label>
<label class="ck_style"><input type="checkbox" name="demo-radio"><i></i> 기술이전</label>
<label class="ck_style"><input type="checkbox" name="demo-radio"><i></i> 공동연구</label>
<label class="ck_style"><input type="checkbox" name="demo-radio"><i></i> 위탁연구</label>
<label class="ck_style"><input type="checkbox" name="demo-radio"><i></i> 가족기업</label>PHP로 데이터를 엑셀 파일로 저장할 때 핸드폰 번호 앞자리 0이 사라지는 문제를 해결하는 방법이다. 출력하는 td 태그의 style에 mso-number-format을 지정해 텍스트(\@) 형식으로 강제하고, 날짜·숫자·소수점·퍼센트·통화·과학 표기법 등 다양한 셀 서식 형식도 정리했다.
이벤트 참가자 정보를 엑셀로 저장하는데 핸드폰 번호 '010...' 가 숫자로 출력되니 '10...' 로 나온다.
원래대로 '010...' 으로 나오게 하려면 숫자가 아닌 텍스트로 출력해야 한다.
셀 서식 지정할 때는 데이터 출력하는 html의 style에 MSO FORMAT을 지정하면 된다.
header("Content-type: application/vnd.ms-excel; charset=UTF-8");
header("Content-Disposition: attachment; filename = userIdentify".date("YmdHis").".xls");
header("Content-Description: PHP5 Generated Data");
header("Cache-Control: no-cache");
header("Pragma: no-cache");
// DB커넥션 파일(PDO)
require_once($_SERVER['DOCUMENT_ROOT'].'/Connection/dbconnect.php');
// 검색 조건 설정
...(생략)
// 데이터 조회
...(생략)
?>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
th,td{border:0.6px solid #666;}
th{background-color: yellow;}
</style>
</head>
<body>
<h3>Table</h3>
<table>
<tr>
<th>이름</th>
<th>전화번호</th>
</tr>
<? while($rows=$stmt->fetch(PDO::FETCH_ASSOC)){ ?>
<tr>
<td><?=$rows['userName']?></td>
<!--셀 서식을 Text로 지정-->
<td style="mso-number-format:'\@'"><?=$rows['userPhone']?></td>
</tr>
<? } ?>
</table>
</body>
</html>검색해 보면 다른 타입도 많이 나온다. 그러나 실제 사용하는 건 텍스트 형식(\@) 정도인 듯 하다.
(텍스트로 지정 하면 데이터 출력하는 그대로 나온다.)
mso-number-format:"\@"
Text // 텍스트
mso-number-format:"0"
NO Decimals // 소수점 없음
mso-number-format:"0.000"
3 Decimals // 소수점 3자리까지
mso-number-format:"#\,##0.000"
Comma with 3 dec // 숫자 자릿수 구분(,)+소수점 3자리
mso-number-format:"mm\/dd\/yy"
월/일/연도 형식 (05/15/16)
mso-number-format:"mmmm\ d\,\ yyyy"
'mmmm' 하면 월을 영문으로 표시한다. (January 1,2016)
mso-number-format:"d-mmm-yyyy"
01-mar-1998 형식. 월 표기가 다르다.
mso-number-format:"Short Date"
01/03/1998 형식. 간단하게 지정
mso-number-format:"Medium Date"
01-mar-98
mso-number-format:"m\/d\/yy\ h\:mm\ AM\/PM"
날짜 + 시간을 AM/PM으로 구분해서 표시
mso-number-format:"Short Time"
5:16 // 시간만 간단하게
mso-number-format:"Medium Time"
5:16 am
mso-number-format:"Long Time"
5:16:21:00 // 밀리 초(ms) 단위까지
mso-number-format:"Percent"
Percent - two decimals // 퍼센트 기호 + 소수점 2자리까지
mso-number-format:"0%"
Percent - no decimals // 소수점 없는 퍼센트
mso-number-format:"0.E+00"
Scientific Notation // 엑셀에서 숫자 자릿수가 매우 클 때 줄여서 표시되는 그 형식..
mso-number-format:"#\ ???\/???"
Fractions - up to 3 digits (312/943) , 분수형식
mso-number-format:"\0022£\0022#\,##0.00"
£12.76 // 영국 파운드 기호로 통화 표시(원화 표시는 없을까?)
mso-number-format:"#\,##0.00_ \;[Red]-#\,##0.00\ "
2 decimals, negative numbers in red and signed(1.56 -1.56) // 음수는 색깔을 따르게 표시
jQuery의 submit 이벤트를 가로채 페이지 새로고침 없이 Ajax로 폼을 전송하는 방법이다. event.preventDefault()로 기본 전송을 막고, 서버에 Ajax 사용을 알리는 hidden 필드를 설정한 뒤 폼의 action URL과 serialize() 데이터를 준비한다. 이후 $.get으로 데이터를 보내고 응답받은 HTML 조각을 body에 추가하는 전체 코드를 담고 있다.
//form요소를 찾아서 그의 submit 이벤트를 가로챈다.
$('form').submit(function (event) {
//ajax를 사용하여 폼을 전송시키고자 한다(페이지의 새로고침을 막는다)
event.preventDefault();
//필요하다면, 유효성 검사 코드를 이부분에 추가하도록 한다.
// .....
//이는 ajax 가 사용되었음을 서버측에 알리는 용도이다.
$('input[name='usingAJAX']', this).val('true');
//폼에대한 참조를 저장한다.
var $this = $(this);
//폼요소의 url을 가로챈다.
var url = $this.attr('action');
//전송시킬 폼 데이터를 준비한다.
var dataToSend = $this.serialize();
// 서버측처리이후에 실행되어야 할 콜백함수
var collback = function (dataReseived) {
//폼을 숨긴다(폼에대한 참조를 $this에 저장해 놓았기에 가능)
$this.hide();
//서버로부터 다음과 같은 HTML 조각을 반환 맏을 것이기에 DOM에 이 HTML 조각이 추가된다.
//<div id='result'>Your favorite food is pizza!
// Thanks for telling us!</div>
$('body').append(dataReseived);
};
//수신되는 데이터의 형식(이번예제에서는 html 코드가 수신될 것이라 기대한다)
var tyhpeOfDataToReceive = 'html';
//폼을 전송한 후 데이터의 수신을 기다린다.
$.get(url, dataToSend, collback, tyhpeOfDataToReceive);
});//.submit() 을 닫는다.프로젝트 문의 및 견적 요청은 언제든 환영합니다.