페이지

레이블이 Programming인 게시물을 표시합니다. 모든 게시물 표시
레이블이 Programming인 게시물을 표시합니다. 모든 게시물 표시

[HTML] Blogger에 사용하는 YouTube 코드



* 블로거(Blogger)에 사용하는 YouTube 코드입니다.
* 다른 스킨에서 확인되지 않았습니다.
<div style="height: 0; padding-bottom: 56.25%; position: relative;">
<iframe src="https://www.youtube.com/embed/YOUTUBE-ID?rel=0&controls=1&showinfo=0" frameborder="0" style="height: 100%; left: 0; position: absolute; width: 100%;" width="100%" allowfullscreen></iframe>
</div>

[HTML] favicon 가져오기



Google 서비스를 통해서 각 웹사이트에 있는 favicon의 URL를 가져오는 방법입니다.

// 해당 도메인의 favicon
http://www.google.com/s2/favicons?domain=www.your-domain.com

// 해당 URL의 favicon
http://www.google.com/s2/favicons?domain_url=http://www.your-domain.com

[HTML] Blogger에 Open Graph 적용하기



Blogger에 Open Graph 적용방법에 대한 내용을 정리합니다.

1. 블로그 관리 페이지 [테마 ⇒ 사용중인 디자인 ⇒ HTML편집]을 선택

2. 소스코드 상단에 아래와 같은 코드를 찾습니다.
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

3. 위 코드 마지막 부분에 아래 코드를 추가합니다.
xmlns:og='http://ogp.me/ns#'
추가된 코드
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'>

4. <head>...</head>의 제일 아래쪽(</head> 바로위)에 아래 코드를 삽입합니다.
<!-- BEGIN: Open Graph Meta -->
<meta content='blog' property='og:type'/>
<meta content='summary' name='twitter:card'/>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.title' name='twitter:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
    <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
    <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription' property='og:description'/>
    <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
    <meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
<!-- END: Open Graph Meta -->

5. 참고
https://goo.gl/vTbwg5
https://goo.gl/rck6i9
https://goo.gl/8PbePd

[HTML/JS] Blogger에 Syntax Highlight 추가(highlight.js 추가)




Blogger에 Syntax Highlight를 위해 highlight.js를 추가하는 방법을 정리합니다.

1. 블로그 관리 페이지의 [테마 > 사용중인 디자인 > HTML 편집]을 선택

2. <head>...</head>의 제일 아래쪽(</head> 바로 위)에 아래 코드 삽입
<-- hightlight.js -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/default.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

3. 글쓰기 모드에서 코드 작성후 [HTML] 선택 작성한 코드를 <pre><code>...</code></pre>로 묶어 준다.
// 샘플코드
<pre><code>
<?php
    echo "Hello World!!";
?>
</code></pre> 

* 참조
https://highlightjs.org/
https://highlightjs.org/download/
https://highlightjs.org/static/demo/
https://highlightjs.readthedocs.io/en/latest/css-classes-reference.html
https://github.com/isagalaev/highlight.js/tree/master/src/styles
https://goo.gl/rlTX55

http://t.grooboo.net/code/


[Apps] ATOM 패키지(Package)




ATOM 에디터에 사용하고 있는 패키지(Package)를 정리해 봅니다.


[Package]

[Theme/Syntax]

  • UI: One Dark
  • Syntax: One Dark

[Setting]

  • Font: D2Coding (별도 설치)
  • Font Size: 13
  • Tab Length: 4



[PHP] PHP 사용중 정리




1. 특수문자 제거 등 문자 치환(정규 표현식)
// 특수문자를 제거한다.
$string = preg_replace("/[ #\&\+\-%@=\/\\\:;,\.'\"\^`~\_|\!\?\*$#<>()\[\]\{\}]/i", "", $string);
// HTML 또는 Javascript 등을 제거한다.
$string = preg_replace("(\<(/?[^\>]+)\>)", "", $string);
// 숫자를 제외한 모든 문자 삭제
$string = preg_replace("/[^0-9]*/s", "", $string);
// 전화번호 표기(하이튼 표기)
preg_replace("/(0(?:2|[0-9]{2}))([0-9]+)([0-9]{4})/", "\\1−\\2−\\3", $phone_number);


2. JSON 출력
$value = array (  
   'Key' => $string,
   'Key' => $string
);
// Header 정의
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json; charset=utf-8');
// json 출력
echo json_encode($value, JSON_NUMERIC_CHECK | JSON_UNESCAPED_UNICODE);
exit;
  • JSON_NUMERIC_CHECK: 숫자로된 문자열인 경우 숫자(integer) 형태로 출력한다.
  • JSON_UNESCAPED_UNICODE: 문자를 유니코드로 Escape 해서 출력하지 않는다.

3. JSON 출력(Callback이 있는 경우)
// Callback 함수 받기
$callback = $_REQUEST['callback'];
// Header 정의
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json; charset=utf-8');
// json 출력
if($callback) {
    echo $callback."(".json_encode($value, JSON_NUMERIC_CHECK | JSON_UNESCAPED_UNICODE).")";
} else {
    echo json_encode($value, JSON_NUMERIC_CHECK | JSON_UNESCAPED_UNICODE);
}
exit;

4. 문자열 자르기(나누기)
$string = explode('|' , $string);


5. ereg() 오류
- php7에서는 ereg() 사용시 'ereg() is deprecated' 오류 발생
- preg_match() 사용 또는 교체
// ereg() 사용
ereg('%',  $variable);
// preg_match() 사용
preg_match('/%/',  $variable);


6. 에러메세지 출력하기
- php.ini에서 에러메세지 출력을 막아 놓았을때, 임시로 에러 메세지 출력을 합니다.
- 소스 상단에 아래 코드를 넣으면 됩니다.
error_reporting(E_ALL);
ini_set("display_errors", 1);
...또는...
ini_set('display_errors', 1); 
ini_set('error_reporting', E_ALL);

7. 문자열 공백(스페이스) 제거
// 앞, 뒤의 스페이스 제거
$string = trim($string);
// 문자열내 모든 스페이스 제거
$string = preg_replace("/\s+/", "", $string);



* 본 포스팅은 수시로 업데이트 될 수 있습니다.