Development Assemble

 나는 디자이너가 아니다. 하지만 간간히 디자인에 신경을 써야할 경우가 생긴다. PPT를 만들거나 간단한 APP을 만들때 약간의 디자인이 필요하다! 하지만 내가 만든 디자인은 내가 봤을때 만족할지 몰라도 다른사람이 보면 완전 꽝이다 ㅠㅠ 나의 이 디자인 실력을 보완해주기 위해 친구가 색상조합 사이트를 추천해줬다. 디자인은 몰라도.. 색상 조합은 이제 완벽하게 할 수 있을것 같다!! 단순히 보색관계를 알려주는 것부터 시작해서 여러가지를 제공해준다. 색상 조합은 이제 고민 끝!!

바로가기 -> Color Scheme Designer

 단일색 부터 4가지 색상조합까지 선택해서 볼 수 있다.

 왼쪽 색상표에서 마우스로 원하는 색상 영역을 선택하면 해당하는 색상의 RGB 비율과 색상코드를 볼 수 있다.

 오른쪽에는 내가 색상표에서 선택했던 색의 주변색과 그 외 색상조합(그림은 보색관계 선택 화면)을 보여준다. 색상위에 마우스 커서를 올리면 색상코드를 보여준다. 
 Light page example메뉴와 Dark page example메뉴를 누르면 각각 선택한 색상중 밝은 색상/어두운 색상으로 이루어진 샘플 홈페이지를 보여준다. 

 이 정도로만 사용할 줄 알아도 어디서 디자인 못한다고 욕먹지는 않을것 같다.. 특히 PPT 제작시 어중간한 색조합으로 보기흉한 PPT를 만드는 일은 없을 것 같다.

 개발관련 블로그를 돌아다니다 보면 아래와 같이 이쁘게 소스코드가 있는 블로그들이 있다.

 사실 이러한 기능때문에 티스토리 블로그를 많이 쓰는게 아닐까 생각이 든다. 

 약간 번거롭긴 하지만 블로그를 이쁘게 꾸미기 위해서 소스코드 넣는 기능을 사용해보자!

1. SyntaxHighlighter파일 다운받기

 아래 홈페이지에 접속하여 현재(2013.12.19) 최신버전인 syntaxhighlighter_3.0.83.zip 파일을 다운받는다.
 → 다운로드 하기

2. 다운받은 파일을 임의의 폴더에 압축해제하기

 압축을 해제하면 scripts 폴더와 styles 폴더가 있을것이다.

3. 티스토리 관리자 페이지에 접속

 관리자 페이지 좌측메뉴 -> HTML/CSS편집 -> 파일업로드

4. 필요한 파일을 추가하기

 추가 버튼을 눌러 파일을 추가한다.
 scripts 폴더의 shCore.js 파일, styles 폴더의 shCore.css, shThemeDefault.css 파일은 기본적으로 꼭 추가해줘야 하는 파일이다.

 그리고 scripts폴더에서 모든 파일을 추가해도 상관은 없지만, 주로 사용하는 언어에 대한 파일만 추가해주도록 한다.
 shBrush뒤에 붙은 이름을 보고 필요한 언어만 추가를 해준다.

 styles 폴더에 있는 css파일들은 소스코드 창의 테마를 바꿀때 사용하는듯 한데, 테마를 바꾸고 싶다면 나중에 추가해서 테마를 변경해 줄수 있다.

5. 메뉴에 적용하기

 올려진 파일들을 skin.html에 적용해야한다.
 상단의 HTML/CSS 버튼을 누른 후 skin.html에서 </head> 위 줄에 코드를 추가하여야 한다. 내가 추가한 파일에 대한 코드만 추가하면 된다.

 아래의 소스중 필요한 소스만 골라서 넣는다. 다 넣어도 상관은 없다.

6. 저장후 완료?? -> 에러

 저장을 누르면 끝난다!! 이제 한번 사용해보도록 하자
 글쓰기에서 HTML을 체크하고 내용을 적으면 된다.
 C언어 소스를 올려보았다. 사용법은 다음과 같다.

 <pre class ="brush:사용할 언어">
 소스코드
 </pre>

#include 

void main() {
	printf("소스 코드 입력 완료! \n");
}

??? 
맨 끝에 </stdio.h> 라는게 붙었다.. 왜일까?

HTML에서 '<'기호가 충돌하기 때문에 나온다고 한다 해결하기 위해서는 < 대신 &lt; > 대신 &gt;를 입력해준다.

#include <stdio.h>

void main() {
	printf("소스 코드 입력 완료! \n");
}

 </stdio.h>가 사라졌다!! 

번거로운 작업이긴 하지만.. 이제 소스를 편하게 볼 수 있다.

 간단하게 이미지를 편집하고 싶은데 포토샵이 안깔려 있을경우!! 이 웹사이트에서 이미지를 편집할 수 있다. 

 작업도중 간단히 이미지 크기를 조절하거나, 이미지를 자르고 싶을때 사용하면 정말 편하다. 

 전문적으로 디자인을 하는 사람이 아니라면 포토샵이 필요 없을 정도로 잘 구현을 해놓은 웹사이트다.

 사용법은 포토샵과 동일한것 같다.

바로가기 -> http://pixlr.com/editor/