사이트 구축/최적화 활용 팁

TCPDF를 이용하여 HTML 태그를 PHP로 PDF 파일 생성하여 다운로드 받기 처리하는 방법입니다.

TCPDF 검색, 다운로드, 설치

- 검색 사이트에서 "tcpdf download"로 검색을 한 후 github에서 클론으로 다운을 받습니다.
- 서버에 압축을 푼 파일을 "tcpdf" 폴더를 생성하여 업로드를 합니다.

TCPDF 한글 설치

- TCPDF는 한글을 작성 시 한글이 깨져서 나옵니다.
- 한글 폰트를 설치하게 되면 정상적으로는 나오게 됩니다.
- [document root]/tcpdf/fonts/폴더에 첨부된 파일을 업로드 합니다.

TCPDF 사용 방법

1) $pdf = new MYPDF(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, true, "UTF-8", false);
    - MYPDF 헤더 영역을 제어하기 위해 TCPDF 클래스를 재정하여 사용했습니다.
    - 일반적으로 사용법입니다.
      new TCPDF(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, true, "UTF-8", false);
2) $pdf->SetFont('nanumbarungothicyethangul', '', 12);
    - 한글이 깨지지 않게 하기 위해 업로드한 한글 폰트를 셋팅합니다.
3) $pdf->writeHTMLCell(0, 0, "", "", $html, 0, 1, 0, true, "", true);
   - 일반적인 HTML 태그를 통해 PDF로 출력할 때 사용합니다.
4) $pdf -> writeHTML($pdfData, true, false, false, false, '');
   - 테이블 태그를 이용하여 PDF를 출력할 때 사용합니다.
5) $pdfData .= "고객 정보";
   - 태그에 속성값을 넣을 때는 colspan=4 가 아니라 colspan="4" 형태로 하여야 정확히 적용이 됩니다.
6) $pdf->Output(getcwd()."/example_test_01.pdf", "FI");
    - getcwd() : 프로그램이 위치한 폴더에 파일을 생성합니다.
    - 속성값은 FD 또는 FI로 하시면 됩니다.
    - I : send the file inline to the browser (default). The plug-in is used if available. The name given by name is used when one selects the "Save as" option on the link generating the PDF.
    - D : send to the browser and force a file download with the name given by name.
    - F : save to a local server file with the name given by name.
    - S : return the document as a string (name is ignored).
    - FI : equivalent to F + I option
    - FD : equivalent to F + D option
    - E : return the document as base64 mime multi-part email attachment (RFC 2045)

$_incDocRoot = $_SERVER['DOCUMENT_ROOT'];
include_once($_incDocRoot.'/tcpdf/tcpdf.php');

$html = "<h1>한글</h1>";
$html .= "<i>This is the first example of TCPDF library.</i>";
$html .= "<p style='color:#CC0000;'>End of document</p>";

/**
 * 헤더 변경을 위한 class 상속 후 재 정의
 */
class MYPDF extends TCPDF {

    //Page header
    public function Header() {
        // Logo
        $image_file = K_PATH_IMAGES.'logo_example.jpg';
        $this->Image($image_file, 10, 10, 15, '', 'PNG', '', 'T', false, 300, '', false, false, 0, false, false, false);
        // Set font
        $this->SetFont('helvetica', 'B', 15);

        // Title
        $this->Cell(0, 15, 'www.example.com', 0, false, 'C', 0, '', 0, false, 'M', 'M');
    }
}

$pdf = new MYPDF(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, true, "UTF-8", false);
$pdf->SetCreator(PDF_CREATOR);

// set default header data
$pdf->SetHeaderData(PDF_HEADER_LOGO, PDF_HEADER_LOGO_WIDTH, PDF_HEADER_TITLE, PDF_HEADER_STRING);

// set header and footer fonts
$pdf->setHeaderFont(Array(PDF_FONT_NAME_MAIN, '', PDF_FONT_SIZE_MAIN));
$pdf->setFooterFont(Array(PDF_FONT_NAME_DATA, '', PDF_FONT_SIZE_DATA));

// set default monospaced font
$pdf->SetDefaultMonospacedFont(PDF_FONT_MONOSPACED);

// set margins
$pdf->SetMargins(PDF_MARGIN_LEFT, PDF_MARGIN_TOP, PDF_MARGIN_RIGHT);
$pdf->SetHeaderMargin(PDF_MARGIN_HEADER);
$pdf->SetFooterMargin(PDF_MARGIN_FOOTER);

// set auto page breaks
$pdf->SetAutoPageBreak(TRUE, PDF_MARGIN_BOTTOM);

// set image scale factor
$pdf->setImageScale(PDF_IMAGE_SCALE_RATIO);

$pdf->SetFont('nanumbarungothicyethangul', '', 12);
$pdf->AddPage();
$pdf->writeHTMLCell(0, 0, "", "", $html, 0, 1, 0, true, "", true);


$name = '홍길동';
$tel  = '010-2112-1234';
$yyyy = '2019';
$mm   = '12';
$dd   = '24';

$pdfData .= "<div align=\"center\">";
$pdfData .= "<h1>테이블 예시</h1>";
$pdfData .= "<table border=\"1\" cellpadding=\"5\" cellspacing=\"0\">";
$pdfData .= "<thead>";
$pdfData .= "<tr><th colspan=\"4\" bgcolor=\"#ddd\" align=\"center\">고객 정보</th></tr>";
$pdfData .= "</thead>";
$pdfData .= "<tbody>";
$pdfData .= "<tr>";
$pdfData .= "<th>성명</th>";
$pdfData .= "<td>" . $name . "</td>";
$pdfData .= "<th>연락처</th>";
$pdfData .= "<td>". $tel . "</td>";
$pdfData .= "</tr>";
$pdfData .= "<tr>";
$pdfData .= "<th>일정</th>";
$pdfData .= "<td colspan=\"3\">";
$pdfData .= $yyyy.'년 '.$mm.'월 '.$dd.'일';
$pdfData .= "</td>";
$pdfData .= "</tr>";
$pdfData .= "</table>";
$pdfData .= "</div>";

// 테이블을 출력할 때 사용하는 방법
$pdf -> writeHTML($pdfData, true, false, false, false, '');

$pdf->Output(getcwd()."/example_test_01.pdf", "FI");

JavaScript로 원하는 영역에 대해서만 출력 화면 설정하기입니다.

출력을 원하는 영역에 <div id=idPrint></div>로 설정을 하고,

printArea() 함수를 호출하면 idPrint로 설정한 영역만 출력이 됩니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script type="text/javascript">
  <!--
  var initBody
  function beforePrint(){
    initBody = document.body.innerHTML;
    document.body.innerHTML = idPrint.innerHTML;
  }
  function afterPrint(){
    document.body.innerHTML = initBody;
  }
  function printArea() {
    window.print();
  }
  window.onbeforeprint = beforePrint;
  window.onafterprint = afterPrint;  function printArea1(){
    if (flag == false){
      initBody = document.body.innerHTML;
      document.body.innerHTML = idPrint1.innerHTML;
      flag = true;
    } else {
      document.body.innerHTML = initBody;
      flag = false;
    }
  }
  //idPrint-->
  </script>

  <div id="idPrint">
  출력 화면입니다.
  </div> <!-- <div id="idPrint"> -->
  <button type="button" onClick="printArea()" />출력</button>
</body>
</html>

HTML 및 CSS 작성 후 해당 코딩이 문제가 없는지 점검하는 방법입니다.

chrome(크롬)의 웹 스토어에서 Web Developer 확장 프로그램을 추가하여 검사를 할 수 있습니다.

chrome(크롬)의 웹 스토어 들어가는 방법

- 크롬에서 북마크바가 나오게 설정을 한 다음 북마크바 좌측의 앱 버튼을 클릭합니다.

chrome(크롬)의 웹 스토어에서 web developer 검색, 설치 방법

- chrome(크롬)의 웹 스토어에 진입 후 좌측 상단의 검색창에서 "web developer"로 검색을 합니다.
- 제공업체 chrispederick.com 의 Web Developer을 설치합니다.

chrome(크롬)의 web developer 사용 방법

- chrome(크롬)에서 아래 톱니바퀴 모양을 클릭한 후 Validate CSS 클릭합니다.

chrome(크롬)의 web developer 사용 결과

- chrome(크롬)의 web developer를 사용하게 되면 W3C CSS 검사 결과 내용이 나오게 됩니다.

form, input 태그 사용 없이 ajax 통신 시 jquery의 $.post를 이용하여 post 방식으로 데이터 전송 방법입니다.

아래는 일반적으로 사용하는 방식입니다.

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success,
  dataType: data
});

$.post 함수를 사용하는 방법입니다.

name, value 한 쌍씩 만들어서 해서 보내 주면 처리가 됩니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <a href="#" onclick="return sendReqData('1');">가입하기</a>
  <script src='https://code.jquery.com/jquery-3.4.1.min.js'></script>
  <script>
    function sendReqData(req_seq)
    {
    	$.post("./req.php", {seq:req_seq, code:'send'}, function(data)	{
    		console.log(data);
        // seq : 1 code : send
    	});
    }
  </script>
</body>
</html>

<?php
  /**
   * req.php
   */

  $seq  = $_POST['seq'];
  $code = $_POST['code'];
  echo 'seq : '. $seq . ' code : '. $code;
?>

2019/11/23 - [유용한 활용팁] - IE11에서 Jquery로 background-image 바뀌게(토글, toggle) 에러 처리 방법 - addClass, removeClass, hasClass, toggleClass

2019/11/15 - [유용한 활용팁] - JavaScript 구분자로 배열 만들기, 타입 변경하기(String, Number)

2019/10/29 - [유용한 활용팁] - JavaScript Input 생년월일 유효성 검사하기 - isBirthDay, 2월 29일 윤년 계산

2019/10/23 - [유용한 활용팁] - JavaScript Input 날짜 체크, Date 만들기 - isDate, getDate, calcDate

HTML5, CSS3, PHP, MySQL, CMS Tool 등을 개인 PC에서 서버 구축 후 공부를 하곤 합니다.

하지만 아무래도 윈도우 기반이어서, 실제 운영하는 서버와는 차이가 있습니다.

리눅스 기반에 별도 비용 없이 무료로 제공하는 호스팅 업체를 이용하면

실제 환경과 비슷하게 구성을 하여 테스트 진행이 가능합니다.

무료 호스팅 사이트 DOTHOME 찾기

검색 사이트에서 "dothome" 으로 검색을 하여 사이트에 접속을 합니다.

무료 호스팅 사이트 DOTHOME 사양

무료 호스팅 사이트 DOTHOME 무료 제공 용량

아톰에서 HTML5, CSS3 작성 중 레이아웃을 잡기 위해 float을 자주 사용하게 됩니다.

float:left 자동 완성 단축키

ffl 3단어를 넣고 탭 키를 누르게 되면 float:left가 자동 완성이 됩니다.

div 태그 여러개 한번에 코딩하는 단축키

부모 노드 아래에 자식 노드를 여러개 코딩해서 넣어야 할 경우에 사용하는 단축키입니다.
첫째 행을 복사해서도 사용할 수 있지만 Emmet 단축키를 사용하면 몇 글자만으로도 태그를 코딩할 수 있습니다.

.col$*6
- col1 ~ col6 클래스를 가지는 div 태그 6개를 생성합니다.
- $ : 1부터 순차적으로 숫자가 매겨집니다.
- *6 : 6개의 태그를 생성하게 합니다.

스타일시트 적용 방법

부모 자식간의 적용 방법, 동일한 태그 내의 여러개의 클래스에 대한 적용 방법, CSS3 적용하는 정석 방법입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    /**
     * cont 클래스를 가지는 div와 하위 column 클래스를 가지는 노드에 대해서
     * CSS3에서 스타일 지정할 때 노드 지정 방법
     * div.cont div.column.col1 : 정석
     * .cont .column.col1 : 앞의 div태그는 제외하고 작성하는 단축법
     * .column.col1 : column 클래스와 동일 위치에 있는 col1클래스 노드 지정
     * 하위 노드로 내려 갈 때는 각 클래스 사이에 한칸(스페이스)을 띄워서 구분한다.
     */
    div.cont div.column.col1 { width: 280px; }
    .cont .column.col1 { width: 280px; }
  </style>
</head>
<body>
<div class="cont">
  <div class="column col1"></div>
  <div class="col2"></div>
  <div class="col3"></div>
  <div class="col4"></div>
  <div class="col5"></div>
  <div class="col6"></div>
</div>  
</body>
</html>

2019/12/18 - [유용한 활용팁] - CSS3 한줄 처리 방법, inherit 의미

2019/12/17 - [유용한 활용팁] - CSS3 float left로 인한 영역 깨짐 현상 처리 방법 및 last-child 사용법

2019/11/16 - [유용한 활용팁] - HTML5, CSS 편집기 아톰 Emmet 유용한 단축키 - A 태그 생성 방법

2019/10/28 - [유용한 활용팁] - HTML5, CSS 편집기 아톰(Atom) Emmet 유용한 단축키 - HTML전문, DIV생성, CSS3 width/height/padding/margin 생성

CSS3로 프로그램 처리 없이 한 줄 처리를 하는 방법입니다.

overflow, text-overflow, white-space를 사용하여 처리를 합니다.

.title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

CSS3 inherit 의미

부모 노드의 속성 width, height 등의 값을 상속 받는 기능입니다.

부모 노드와 동일한 값을 사용한다면 값을 지정할 필요없이 inherit를 사용하면 됩니다.

아래 소스 코드 .container는 height값이 800px가 됩니다.

#contents { width: 100%; height: 800px; }
.container { width: 990px; height: inherit; }

CSS3에서 floa:left로 레이아웃을 잡게 되었을 때, 영역 깨짐 현상이 발생을 합니다.

이 에러를 잡기 위한 방법 4가지입니다.

1. 깨지는 영역에 float:left를 사용한다.

- 모는 박스에 float:left를 사용해야 합니다.

2. clear:both를 사용한다.

- 어떤 영역이 깨졌는지 알 수가 없어서 추적 관리가 힘듭니다.

3. float를 사용한 상위 박스에 overflow:hidden를 사용한다.

- 현재 가장 많이 사용하는 방법입니다.

.nav { overflow: hidden; }
.nav > div { float: left; }

4. clearfix를 사용한다.

last-child 사용법

div:last-child : div 자식 노드 중에서 마지막 노드만 CSS를 적용합니다.

예를 들어 div 태그가 3개가 있을 때 전체를 40%로 놓게 되면 120%가 되어 레이아웃이 깨집니다.

이때 마지막 노드에만 20%를 적용함으로써 100%가 되게 처리를 할 수 있습니다.

.nav > div { width : 40% }
.nav > div:last-child { width : 20% }