티바이트

 깃허브 페이지(github page)는 tibyte.github.io와 같은 github.io 주소로 접속하였을 때 HTTPS를 지원하지만 커스텀 도메인을 설정하였을 경우 그림 1과 같이 지원되지 않는 것을 볼 수 있다.

그림 1. 커스텀 도메인 설정한 깃허브 페이지를 접속하였을 때의 주소창

 커스텀 도메인을 연결한 깃허브 페이지에 SSL(Secure Sockets Layer)을 설정하기 위해서는 먼저 SSL 인증서를 발급받아 설치해야 하는데, Cloudflare의 네임서버를 사용하면 이 과정을 간단하게 할 수 있다.

 Cloudflare의 Add Website 페이지에서 도메인을 등록하면 DNS 레코드들을 자동으로 불러온다. 목록을 확인한다.

그림 2. DNS 레코드 설정화면

 DNS 레코드를 확인 후 설정을 저장하고, 소유하고 있는 도메인의 관리 페이지(도메인 등록 대행업체)로 들어가서 네임서버를 Cloudflare에서 안내한 주소로 연결한다.

그림 3. 네임서버 설정

 도메인 네임서버 주소 변경은 전파되는 데 수 분에서 수 일까지 걸릴 수 있다. 정상적으로 전파되었다면, Cloudflare의 Crypto 메뉴에서 SSL 사용여부를 선택할 수 있다. 여기서 옵션이 있는데 github 페이지는 HTTPS를 지원하므로 권장방식인 Full SSL을 선택한다.

그림 4. SSL 설정

 설정을 완료하고, https:// 를 명시한 커스텀 도메인을 사용하여 github 페이지를 접속해 보면 HTTPS가 적용된 것을 볼 수 있다. CA는 COMODO사의 것으로 나온다.

그림 5. 커스텀 도메인 설정한 깃허브 페이지를 접속하였을 때의 주소창

  주소창에 https://를 입력하지 않고 접속하였을 경우엔 이전과 같이 HTTPS가 미적용된 페이지가 나오는데, 코드상에서 리다이렉팅을 시키면 되지만 Page Rule을 적용하여도 이 효과를 볼 수 있다.

그림 6. HTTPS 강제 리다이렉트 설정

01.

github 저장소에서 임의의 gh-pages브랜치로 페이지를 만들어서 도메인을 연결할 수 있다.

그런데 루트도메인이 다른 사이트를 가리키고 있는 상태에서 서브도메인만 github 저장소의 페이지에 연결하고 싶은데 검색이 잘 되지 않아서 이 포스트를 작성하게 되었다.

02.

1. 먼저 임의의 github 저장소의 브랜치를 만든다. 브랜치 이름은 gh-pages로 해야 한다.

2. gh-pahes 브랜치에 이름이 CNAME인 파일을 만들고 그 안에 연결할 서브도메인을 적는다. 현재 github은 저장소 당 한 개의 도메인 연결을 지원하고 있다. ex) sub.yourdomain.com

3. 보유하고 있는 도메인의 DNS레코드 설정으로 들어가서 A 레코드에 github에서 고지한 IP주소를 적는다. 이 글 작성시점에서는 192.30.252.153이지만 나중에 바뀔수도 있다. 서브도메인명은 중복되지 않게 아무거나 적는다. 여기서는 테스트를 위해 test로 적어보았다.

4. CNAME레코드의 서브도메인명은 2번에서 적은 서브도메인(sub)을, URL주소에는 3번에서 정한 이름(test.yourdomain.com)을 적는다.

5. 저장하고 DNS변경내역 전파시간만큼 기다리면 루트도메인에 관계없이 해당 서브도메인으로 저장소 페이지에 접근할 수 있다. 이 때, gh-pages 브랜치에 index.html파일이 있어야 한다.

VPN(Virtual Private Network : 가상 사설망)접속을 이용하면

외부 네트워크에서도 마치 내부망에서 접속하는 것처럼 사설망을 구성할 수 있다.

외부망에서 기존에 연결되어 있던 네트워크 회선 위에서 VPN연결을 하는 것으로

인터넷이 끊겨 있으면 이용할 수 없으며 모바일기기에서 3G/4G접속 시

통신사 데이터요금 없이 인터넷을 이용할 수 있는 것이 아니다.

VPN의 목적으로는 여러가지가 있지만..

비교적 적은 비용으로 외부에서 사설망에 접근할 수 있는 일종의 터널을 만드는 데에 쓰이거나

아니면 A, B, C가 있다고 할 때, A에서 C로의 접근은 차단되어 있으나 B에서 C로는 접속할 수 있고,

B에 VPN서버가 열려있고 A가 권한이 있다면, A에서 B를 거쳐 C로 접속할 수도 있다.

윈도우7(Windows7)이상에서는 자체적으로 VPN 서버를 여는 기능이 있는데

공유기 기종이나 네트워크 연결상황에 따라 안 될 수도 있다.

(공유기에서 직접 VPN서버를 열 수 있는 것도 있습니다)

1. 제어판에서 '네트워크 및 공유센터'로 들어가 '어댑터 설정 변경'을 누른다.

2. Alt키를 눌러서 메뉴를 연 뒤 '파일 - 새로 들어오는 연결'을 누른다

3. '사용자 추가'를 눌러서 계정을 만든다.

  여기서 '사용자 이름'과 '암호'는 VPN접속을 할 때 ID와 비밀번호가 되므로 잘 정해둬야 한다.

4. 체크한 뒤 다음버튼을 누른다.

5. Internet Protocol Version 4 (TCP/IPv4) 를 선택한 뒤 속성을 눌러서 IP주소를 할당한다.

  IP주소의 시작과 끝에 각각

10.1.0.1 , 10.1.0.10 이나,

192.168.5.1 , 192.168.5.10 등

현재 네트워크와 충돌하지 않는 사설IP 대역을 정해주면 된다.

하지만 VPN접속측에서 VPN서버측을 통해 인터넷으로 나가려고 할 때

VPN서버측에 공유기(DHCP서버)가 있다면 공유기의 서브넷과 맞춰줘야한다.

가령 공유기 DHCP서버의 서브넷마스크가 255.255.255.0이고  192.168.50.100 ~ 192.168.50.200 대역의 IP를 할당한다면, VPN IP주소 할당은 192.168.50.201 ~ 192.168.50.210 로 하는 것이다.

(서브넷은 같게, 공유기의 DHCP할당대역과는 다르게)

6. 위 5번에서 설정이 다 끝났으면 '엑세스 허용'을 눌러 완료한다.

  그러면 '들어오는 연결'이라는 항목이 생겨 있는데 연결을 암호화하려면 '모든 사용자의 암호 및 데이터 보안 필요'에 체크한다.

7. 공유기가 있을 경우

  1723번 포트와 47번 포트를 각각 포트포워딩해야 한다.

  그리고 공유기의 PPTP기능을 활성화시켜준다.

  공유기에 따라서 VPN관련 설정을 따로 하는 부분이 있을 수 있다.

포트포워딩 시 IP주소로는 VPN서버를 여는 컴퓨터의 사설IP를 입력한다.

(시작 - 맨아래 프로그램 및 파일 검색 - cmd - cmd.exe실행 후 ipconfig 명령어 입력하면 사설 IP를 볼 수 있습니다.)

8. 이제 외부 네트워크에서 접속하는 것을 테스트해 보는데

  모바일기기의 3G/LTE를 이용하면 쉽게 할 수 있어서 그걸로..

 기기마다 다 다르지만 보통 네트워크 설정하는 메뉴에서 VPN연결을 찾아볼 수 있다.

9. 외부망에서 접속하는  테스트를 위해 와이파이 대신 3G나 LTE로 연결한다.

 이름 입력란에는 이 설정의 이름을 알아볼 수 있게 적어두는 것으로 위 3번 그림에서 입력한 이름과는 관련없다.

서버주소는 VPN서버를 연 쪽의 공인IP를 적어야하는데,

그쪽 컴퓨터에서 http://ipconfig.co 등의 사이트에 접속해보면 알 수 있다.

PPP암호화는 위 6번에서 암호화에 체크를 했으면 여기서도 체크한다.

10. 설정이 끝났으면 3G/LTE상태인것을 확인하고

위 3번에서 설정했던 사용자이름과 비밀번호를 입력한다.

연결 성공시 화면

VPN서버가 있는 컴퓨터쪽에서도 연결이 들어온 것을 확인할 수 있다.

이제 모바일기기에서 공인IP주소를 확인해보면

서버쪽 IP를 통해 인터넷으로 나간다는 것을 볼 수 있다.

웹페이지에 소스코드를 올릴 때 그냥 붙여넣으면 모두 같은 색으로 나와서 읽기가 어렵다.

이럴 때 SyntaxHighlighter는 코드의 키워드나 명령문, 주석 등에 색을 입혀서 가독성을 높여준다.

(▼ 코드가 색칠된 모습을 볼 수 있다.)

 SyntaxHighlighter를 블로그에 적용하면 게시물을 쓸 때

간단한 태그로 쉽게 코드에 색을 입힐 수 있다.

먼저 http://alexgorbatchev.com/SyntaxHighlighter/download/ 에서 최신 버전의 파일을 내려받는다.

scripts 폴더를 보면 각종 프로그래밍 언어들의 Brush 파일들이 있는데

shAutoloader, shCore, shLegacy파일은 필수적으로 업로드하고, 추가로 자신이 쓸 언어들을 더 올린다.

여기서는 AS3, Cpp, Java, JS, Php, Xml 파일을 선택했다.

그 다음 스타일시트 파일을 올리는데, shCore.css 파일은 기본적으로 올려야 하고

기본 스타일로 하려면 shCoreDefault, shThemeDefault 파일을 선택한다.

하이라이터가 다른 모양으로 나타나게 하려면 그 테마의 스타일시트 파일을 올려야 한다.

테마가 적용된 모습은 http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/ 여기서 볼 수 있다. 

필요한 파일을 다 올렸으면 메인 스킨의 html파일로 들어가서

head태그 안에 아래와 같은 코드를 추가해야 한다.

<link rel="stylesheet" type="text/css" href="./images/shCore.css" />
<link rel="stylesheet" type="text/css" href="./images/shCoreDefault.css" />
<link rel="stylesheet" type="text/css" href="./images/shThemeDefault.css" />
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shAutoloader.js"></script>
<script type="text/javascript" src="./images/shBrushAS3.js"></script>
<script type="text/javascript" src="./images/shBrushCpp.js"></script>
<script type="text/javascript" src="./images/shBrushJava.js"></script>
<script type="text/javascript" src="./images/shBrushXml.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shLegacy.js"></script>
<script type="text/javascript">
    SyntaxHighlighter.all();
</script>

코드를 보면 아까 업로드한 css파일과 js파일들의 경로를 볼 수 있다. (티스토리는 리소스 파일들이 images폴더에 저장되어 저런 경로를 써주어야한다.)

테마나 다른 언어를 추가하고자 할 땐 이것도 추가해야 한다.

그리고 마지막으로는 SyntaxHilighter.all();함수를 호출한다.

이제 블로그 게시글을 쓸 때 하이라이터를 쓸 수 있는데,

<pre class="brush:언어의 명칭(alias)">

코드

</pre>

HTML 모드로 들어가서 위와 같이 적어주면 된다.

예를 들어 C++언어를 쓰려고 한다면

<pre class="brush:cpp">

코드

</pre>

로 적어주면 되는것이다.

나머지 언어들의 alias들은 여기서 확인할 수 있다.

http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

한가지 중요한 주의점이 있는데

코드에 < 문자가 들어가면 코드가 깨지고 하이라이팅도 정상적으로 되지 않으므로

<문자가 있으면 모두 &lt; 로 바꿔야 한다.

찾아바꾸기를 지원하는 텍스트 에디터를 쓰거나 직접 간단한 프로그램을 작성하여 일괄적으로 바꿔놓으면 간단하다.

<pre>태그 대신 <srcipt>태그를 쓰면 이 문제는 해결되지만

특정환경(티스토리 모바일 등)에선 코드가 아예 안보이게 되는 점을 주의해야 한다.

script태그로 코드를 넣는 법은

http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html 

이 주소에 쉽게 설명되어 있다.

그리고 여러 가지 기능을 비롯한 더 자세한 설명은 신택스하이라이터 공식 페이지에 접속하면 볼 수 있다.

http://alexgorbatchev.com/SyntaxHighlighter

티스토리 블로그 글쓰기창이 새 에디터로 바뀌면서

플래시를 삽입할 때 불편함을 느끼셨을 것입니다.

기존 에디터와는 달리 플래시 무비의 크기를 조절하는 인터페이스가 없기 때문입니다.

HTML태그를 봐도 width와 height속성을 어디에 넣어야 할 지 쉽게 알 수 없게 되어있고요.

이럴 때 아래 과정을 거치면 쉽게 플래시의 크기와 위치를 조절할 수 있습니다.

1. 파일 버튼을 눌러서 올릴 플래시를 선택.

2. 파일을 올렸으면 HTML모드로 들어갑니다.

3.  cfile 부터 swf부분까지를 복사합니다.

4. 복사가 되었으면 [## 부터   ##]부분까지를 지우고 다음 태그로 대체합니다.

<embed width="가로크기" height="세로크기" src="/attachment/복사했던 주소" quality="high" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer">

5. 다시 HTML모드를 해제하면 지정한 크기로 멀티미디어 그림이 나타납니다.

이렇게 해서 새에디터에서도 원하는 크기로 플래시를 넣을 수 있습니다!