Sublime Text는 유용하고 다양한 추가기능이 Plug-in Package형태로 제공되고 있습니다.
이런 Plug-in을 사용하려면 우선 Package Control 을 설치해야 합니다.
이 Package Control이 각종 Plug-in Package의 설치를 도와 주기 때문입니다.

그럼 Package Control 을 설치해보겠습니다.
Package Control 설치 방법은 Simple과 Manual이 있습니다.

먼저 Package Control을 Simple 방법으로 설치해 보겠습니다.
Package Control의 Simple 설치는 Sublime Text 버전에 따라 설치 시 입력하는 코드가 다릅니다.
Sublime Text 버전은 크게 두 가지가 있는데 Sublime Text 2 와 Sublime Text 3 입니다.
Sublime Text 2는 일종의 정식버전 형태이고 Sublime Text 3는 계속 개발중인 beta 성격의 버전입니다.

Sublime Text 2에 Package Control 설치하기

1 Sublime Text 화면에서 키보드 [Ctrl] + [`] 키를 누릅니다.
  혹은 Sublime Text 화면 상단 메뉴의 View - Show Console 을 클릭합니다.

  그럼 화면 하단에 콘솔 창이 뜹니다.

2 콘솔 입력 창에 아래 코드를 입력하고 엔터키를 누릅니다.

import urllib2,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

3 Sublime Text를 종료하고 다시 실행하면 이제부터 Package Control을 사용할 수 있습니다.

Sublime Text 3에 Package Control 설치하기

1 Sublime Text 3에 Package Control을 설치하는 방법은 Sublime Text 2와 같으며 코드 등록만 아래 코드를 콘솔 입력 창에 입력하면 됩니다.

import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

2 Sublime Text를 종료하고 다시 실행하면 이제부터 Package Control을 사용할 수 있습니다.

Package Control을 Manual 방법으로 설치 하기

Manual 방법으로 설치 할 때는 Sublime Text 버전과 상관없이 설치 방법은 동일합니다.

1 Sublime Text 화면 상단 메뉴의 Preferences - Browse Packages… 를 선택합니다.

2 윈도우 탐색기가 열리면 상위 폴더로 이동한 후 Installed Packages 폴더로 들어 갑니다.

3 Package Control.sublime-package 파일을 다운 받은 다음 Installed Packages 폴더에 복사합니다.

4 Sublime Text를 종료하고 다시 실행하면 이제부터 Package Control을 사용할 수 있습니다.

위 두 가지 Package Control 설치방법 중 한가지만 선택해서 설치 하시면 됩니다.

이상 Package Control 설치방법 이었습니다.

참고자료

html 태그 중 제목을 나타내는 태그,
h1, h2, h3, h4, h5, h6 이 있습니다.
글을 볼 때 제일 먼저 눈에 뛰는 곳이 제목이죠.

그리고 글 중간 중간에 부제목, 소제목으로 묶어서 따로 혹은 연관된 글을 이어갑니다.

보통 제목을 쓸 때 본문보다 글씨크기를 크게 그리고 진하게 혹은 기울이거나 좀 더 눈에 잘 뛰게 독특한 글씨체로 적습니다.
이렇듯 주제목과 부제목을 적을 때 일일이 수정하는 일을 단 한번에 h1 ~ h6 태그로 깔끔하고 멋있게 나타낼 수 있습니다.

.article h1 { 
  font-size: 250%;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  color: #666;
  border-bottom: 2px solid #ccc;
  border-left: 10px solid #55555B;
  text-height:200%;
  padding: 3px 5px;
  margin: 5px 0;
  letter-spacing: 1px;
  word-spacing: 3px;
}
.article h2 {
  font-size: 200%;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  color: #666;
  PADDING-BOTTOM: 10px;
  TEXT-ALIGN: left;
  BORDER-LEFT: #55555B 8px solid;
  padding: 3px 5px;
  margin: 5px 0;
  BACKGROUND-COLOR: #FFF;
  border-bottom: 1px solid #000;
}
.article h3 {
  FONT-SIZE: 22px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  COLOR: #2E86B9;
  PADDING-BOTTOM: 10px;
  TEXT-ALIGN: left;
  BORDER-LEFT: #55555B 8px solid;
  padding: 3px 5px;
  margin: 5px 0;
  BACKGROUND-COLOR: #FFF;
  BORDER-BOTTOM: 1px solid #000;
}
.article h4 {
  FONT-SIZE: 22px;
  COLOR: #eeeeee;
  PADDING-BOTTOM: 10px;
  TEXT-ALIGN: left;
  PADDING-TOP: 10px;
  PADDING-LEFT: 10px;
  BORDER-LEFT: #00b5ff 8px solid;
  PADDING-RIGHT: 10px;
  BACKGROUND-COLOR: #282828;
  border-radius:3px;
}
.article h5 {
  font-size: 22px !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  padding: 3px 5px;
  margin: 5px 0;
  BACKGROUND-COLOR: #FFF;
  BORDER-BOTTOM: 2px solid #ccc;
  BORDER-TOP: 2px solid #ccc;
  BORDER-LEFT: #4D82B8 8px solid;
  BORDER-RIGHT: 2px solid #ccc;
  border-bottom: 2px solid #ccc; 
}
.article h6 {
  font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: 1em !important;
  min-height: inherit !important;
  min-height: auto !important;
  PADDING-BOTTOM: 4px;
  PADDING-TOP: 4px;
  PADDING-LEFT: 10px;
  PADDING-RIGHT: 4px;
  BACKGROUND-COLOR: #FFF;
  BORDER-LEFT: #03867B 4px solid;
}

사용방법은 위의 예제처럼 자신만의 제목 스타일을 style.css에 넣고, html 편집 모드에서 아래와 같이 하면 됩니다.

가나다라 ABCD abcd 1234 !@#$+-*/
가나다라 ABCD abcd 1234 !@#$+-*/
가나다라 ABCD abcd 1234 !@#$+-*/
가나다라 ABCD abcd 1234 !@#$+-*/
가나다라 ABCD abcd 1234 !@#$+-*/
가나다라 ABCD abcd 1234 !@#$+-*/

그럼 아래와 같이 결과물이 나옵니다.

가나다라 ABCD abcd 1234 !@#$+-*/

가나다라 ABCD abcd 1234 !@#$+-*/

가나다라 ABCD abcd 1234 !@#$+-*/

가나다라 ABCD abcd 1234 !@#$+-*/

가나다라 ABCD abcd 1234 !@#$+-*/

가나다라 ABCD abcd 1234 !@#$+-*/

이상 제목태그(h1~h6) 정의로 제목 스타일 꾸미기 였습니다.

찢어진 종이 효과 만들기

사이즈가 넓은 이미지를 찢어진 종이 효과로 축소시키는 방법입니다.
보통 웹 페이지의 화면을 그대로 캡처 해서 올릴 경우 이미지 사이즈가 너무 커 화면을 벗어나거나 이미지가 잘려서 보이는 경우가 있습니다. 이미지 사이즈를 줄이면 해상도가 떨어져 가독성도 좋지 않아 보기 힘든 경우도 있습니다.
아래 방법은 이미지의 필요 없는 중간부분을 찢어진 종이효과로 변형하고 필요한 부분을 표현하는 방법입니다.

아래 이미지처럼 만들어 보겠습니다.

준비물

찢어진 종이 효과 만들기

1 이미지에 쓸 화면을 캡처해서 사용할 부분을 준비 합니다.

2 아래 빨간 박스 부분은 필요 없는 부분으로 잘라서 좌우 이미지를 붙였습니다.

※저는 PickPick을 이용해서 화면을 캡처 후 1차 편집을 했습니다.

↓

3 적당한 이름으로 이미지를 저장하고 Photoshop으로 이미지를 불러 옵니다.

4 불러온 이미지의 레이어 창에 Background를 더블 클릭하여 Layer2로 이름을 바꿔 줍니다. 

5 레이어 창 하단의 Create a new layer(새 레이어 만들기) 버튼을 눌러 찢어진 이미지 뒤로 보여질 바탕화면을 만듭니다. 저는 색상을 붉은 계열로 했습니다. (R:137 G:55 B:55, #893737) 

6 Layer2를 선택하고 좌측 툴박스의 Lasso Tool(L)(올가미 툴)을 이용해서 찢어진 효과를 줄 영역을 자유롭게 그려 선택영역을 만듭니다. 

7 적용할 영역이 만들어 졌으면 툴박스의 Edit in Quick Mask Mode(Q)(퀵마스크 모드) 버튼을 클릭합니다.

  그럼 아래와 같이 선택영역외의 화면이 붉게 나옵니다.

8 이제 찢어진 효과를 적용할 Photoshop Filter를 선택해 보겠습니다.

Photoshop 상단 메뉴의 Filter - Filter Gallery를 클릭합니다.

여러 Filter 중 Brush Strokes - Spatter을 선택합니다.

Spatter Filter 옵션 중 Spray Radius와 Smoothness 값을 적당히 조절 하고 상단의 OK 버튼을 눌러 적용합니다. 

선택된 영역이 제대로 적용 되었는지 확인합니다. 

9 좌측 Photoshop 툴박스의 Edit in Standard Mode(Q)(스텐다드 모드) 버튼을 클릭합니다.

그럼 선택영역이 Spatter Filter가 적용 된 상태로 돌아 옵니다. 

10 키보드의 Delete 버튼을 눌러 선택영역의 이미지를 삭제합니다. 삭제된 선택영역 밑으로 배경이 나옵니다. 

11 찢어진 종이의 질감을 좀 더 세밀하게 다듬는 작업을 하겠습니다.
Photoshop 상단 메뉴의 Select - Modify - Expand를 클릭합니다. 

선택된 영역을 4pixels 정도 확장합니다. 

12 레이어창의 lock transparent pixels(투명영역보호) 버튼을 누르고 Brush Tool(B)(브러시 툴)로 선택영역을 흰색으로 채웁니다. 

13 마지막으로 선택영역부분에 그림자 효과를 적용하고 마무리 하겠습니다.
키보드 Ctrl + D를 눌러 선택영역을 해제합니다.

레이어창의 Add a layet stayle - Drop Shadow로 들어가서 아래와 같이 적용합니다. 

↓

완성된 이미지 입니다. 

아래는 Spatter Filter 옵션 중 Spray Radius의 값을 9로 적용한 이미지입니다.

찢어진 영역이 좀더 거칠어 졌습니다.

이상 찢어진 종이 효과내기 였습니다.

티스토리 반응형 스킨 FastBoot (V1.6.1)

티스토리 반응형 스킨 FastBoot (V1.6.1)

티스토리 반응형 스킨 FastBoot (V1.6.1)

티스토리를 시작하며 밋밋한 디자인의 티스토리 스킨을 Readiz의 FastBoot (V1.6.1) 반응형 스킨으로 설치 해보겠습니다.

반응형 스킨이란 간단하게 블로그 접속 환경에(PC, 노트북, 스마트 폰, 태블릿PC 등) 따라 어떤 화면크기에도 게시된 화면이 반응하여 최적화된 화면을 볼 수있도록 디자인된 스킨을 말합니다.

현재 반응형 스킨은 무료나 유료의 형태로 많이 배포 되어있는데요. 그 중 이번에 제 눈에 확 뜨인 티스토리 반응형 스킨 FastBoot (V1.6.1)를 선택하게 되었습니다. 일단 무료이면서도 스킨의 디자인이나 구성이 너무 고급스럽고 멋집니다.

참고로 이 스킨을 배포한 Readiz님의 당당한 포부도 정말 마음에 듭니다.^^

이제 FastBoot (V1.6.1) 스킨을 설치해보겠습니다.

Readiz의 FastBoot (V1.6.1) 반응형 스킨을 다운받아 파일의 압축을 풉니다.

※ 아래 FastBoot 이미지 클릭 후 Readiz님의 블로그에서 해당 파일을 다운 받으세요.

TISTORY관리 - [꾸미기] - [스킨] - [스킨등록] 메뉴로 갑니다.

새 스킨 등록 화면 하단에 추가 버튼을 눌러 압축을 푼 파일을 업로드 합니다.

이때 아래 화면처럼 두 번을 나누어 업로드 합니다.
index.xml 파일부터 아래 style.css 파일까지 드래그 해서 파일을 선택 후 등록합니다.

images 폴더 안에 있는 모든 파일을 선택하여 등록합니다. 

아래와 같이 스킨파일이 등록 된 것을 확인하고 화면 우측상단의 [스킨 저장명]에 알아보기 쉽게 스킨이름을 넣어 주시고 화면 하단 [저장] 버튼을 눌러 스킨을 저장합니다. 

이렇게 저장된 스킨은 스킨 보관함에서 확인이 가능합니다.

TISTORY관리 - [꾸미기] - [스킨] - [보관함] 메뉴로 갑니다.

저장한 스킨을 확인하고 하단에 [적용] 버튼을 눌러 스킨을 적용합니다. 

FastBoot (V1.6.1) 스킨을 적용한 저의 블로그입니다.
이제 처음 시작하는 블로그라 게시글이 없지만 멋진 스킨 덕분에 고급스런 블로그가 된 것 같습니다. 

FastBoot (V1.6.1) 스킨은 반응형 스킨이라 티스토리에서 제공하는 모바일웹 스킨을 꺼줘야 제대로 된 효과를 볼 수 있습니다.
TISTORY관리 - [꾸미기] - [모바일웹 스킨] 메뉴로 가서 화면 오른쪽 [상단 모바일웹 스킨] - [OFF]를 선택 후 저장 합니다.

이상 티스토리 반응형 스킨 FastBoot (V1.6.1) 설치 후 적용하기였습니다.