RSS 구독
이웃추가
이웃추가
안녕하세요. 작은설탕의 "작은"을 맡고있는 Mini입니다. ^^
지난 시간에, 티스토리 반응형 스킨 #2 를 적용하고 앞으로 스킨을 수정해나가는 과정을 시리즈로 연재하겠다고 말씀드렸는데요. 이와 더불어서, 이참에 HTML5와 CSS3를 공부하고자 아예 처음부터 티스토리 반응형 스킨을 제작하기로 마음먹게되었어요. 꿈은 원대하게... ㅋㅋ
그래서 오늘은 그 첫시간으로, 티스토리 스킨을 제작하기위한 환경을 설정하는 과정을 소개할게요. 웹개발환경이야 각자 마음에 드는 방법으로 진행하면 되는데요. 전문적으로 프로그래밍을 다루시는 분들은 Eclipse 개발툴을 많이들 이용하시죠. 그런데 굳이 HTML과 CSS, 그리고 간단한 javascript 정도만 다룰껀데 굳이 Eclipse까지 설치할 필요는 없을 것 같아서, 저는 Brackets 라는 웹개발툴을 사용하려고 해요.
Brackets 란?
Brackets는 Adobe社에서 개발하여 MIT license 적용하에 무료로 배포하고 있는 웹개발도구입니다. 무료이지만 웹개발하는데 있어서 유용한 기능들을 많이 갖고있고, 무엇보다 가볍게 구동되기 때문에 수많은 웹개발자 혹은 웹디자이너 분들이 많이들 사용하고 계시죠. 우선 Brackets 소개 동영상을 볼까요?
설명이 너무 빠르죠? ^^;; 요약하자면 이렇습니다.
- Inline Editors HTML을 편집하면서 특정 엘리먼트에서 Ctrl + E 버튼을 누르면 해당 엘리먼트와 연관된 CSS를 바로 수정하고 적용할 수 있습니다.
- Live Preview 파일들을 수정하면, 변경된 내용들이 미리보기창에서 즉시 반영되어 보여집니다.
- Only HTML/CSS/JavaScript Brackets는 여타 개발도구와 달리 웹개발환경에만 집중하는 툴입니다. 오직 HTML과 CSS, 그리고 JavaScript에만 집중하고 있죠. 그래서 가볍고 전문적입니다.
간략히 세가지 특증으로 요약하면 이러한데요. 위에 요약한 내용 이외에도, 다양한 플러그인을 사용할 수 있다는 점, SCSS/LESS를 지원한다는 점 등, 많은 장점을 갖고있는 프로그램임에는 틀림이 없는것 같습니다.
아차! 그리고 무엇보다 Brackets는 한글 메뉴를 지원 합니다. ^^ 어찌보면 이게 제일 큰 장점일 수도 있겠네요. ㅎㅎ
Brackets 설치
그럼 Brackets를 설치하러 가볼까요? 우선 아래 링크를 클릭해서 Brackets 홈페이지로 이동해주세요.
- Brackets 홈페이지 : http://brackets.io
홈페이지에 접속하면 아래 그림과 같이 Download 버튼이 바로 보이실꺼예요.
Download 버튼을 클릭하면 한개의 설치파일이 다운로드되는데요. 내려받은 설치파일을 실행해서 컴퓨터에 설치해주세요. (설치과정이 워낙 간단해서 이건 따로 설명 안드릴게요)
프로그램 설치가 완료되면, 바로 실행하지 말고 설치폴더로 이동해주세요. 아마 기본 설정대로 설치하셨다면, 설치 경로는 "C:\Program Files (x86)\Brackets\" 일 꺼예요. 이 폴더로 이동하면 Brackets라는 실행파일이 있는데요. 이 파일을 선택하고 마우스 우클릭해서 열리는 창에서 "속성"을 클릭해주세요.
속성창이 열리면 "호환성"탭으로 이동해서 하단에 "관리자 권한으로 이 프로그램 실행" 체크박스에 체크한 후 "확인"을 눌러주세요.
이렇게 해주는 이유는, Brackets를 관리자 권한으로 실행하지 않으면, 폴더나 파일을 생성할 때 권한문제로 오류가 발생하기 때문입니다.
이제 티스토리 스킨을 만들기 위해서 Brackets 프로그램의 환경을 설정하러 가볼까요?
Brackets 환경 설정
Brackets를 처음 실행하면, 방화벽에서 허용여부를 묻는 창이 뜰꺼예요. 이런건 모두 "허용" 해주시구요. 일단 다음과 같은 화면을 보실 수 있을 꺼예요.
이제 Brackets를 좀더 편리하게 쓰기위해 추가기능을 설치해줄껀데요. 제가 추천드리는 플러그인은 Emmet 과 Beautify 예요. 이 두 플러그인이 어떤거냐면요~
- Emmet 약속된 기호 및 형식을 이용하여 HTML 코드를 빠르게 생성해주는 플러그인
- Beautify 줄바꿈이나 들여쓰기를 이쁘게 자동정렬해주는 플러그인
그럼 플러그인 관리창이 뜨는데요. 아래와 같이 검색창에 "emmet"이라고 입력하면 밑에 Emmet 플러그인이 검색될꺼예요. "설치"버튼을 눌러주세요.
Emmet 플러그인 설치는 완료되었습니다. 이제 Beautify 플러그인을 설치해볼 차례예요. 이번에도 emmet 플러그인 설치와 동일한 방법으로 검색해서 설치해주면 되는데요. 이번엔 검색결과가 하나가 아닐꺼예요. 자세히 살펴보면 아래 그림과같이 제일 위에 있는 플러그인이 버전이 더 높죠? 최신버전 설치해주자구요. ㅎㅎ 뭐 하나가 더 많아도 많겠죠.
이렇게 두 플러그인 설치가 완료되었습니다. 이제 Brackets에서 티스토리 스킨을 만들기위한 파일구조를 만들어볼게요.
왼쪽에 파일목록이 보이는 곳에서 마우스 우클릭한 후, "폴더 만들기" 메뉴를 선택해주세요.
새폴더의 이름을 위에 보이는 것처럼 "images"라고 명명해주세요. 티스토리에서는 사용자가 접근가능한 폴더가 딱 하나 있는데요. 그 폴더의 이름이 images 입니다. 원래 용도는 스킨만들때 필요한 이미지들을 넣는 폴더인데요. 꼭 이미지파일만 업로드되는건 아니라서 사용자가 만든 js 파일이나 css 파일들도 업로드해서 사용할 수 있답니다.
이렇게 폴더를 생성했으면, 이번엔 왼쪽패널에 보이는 파일 중 main.css 라는 파일의 이름을 style.css 로 변경해 주세요.
이렇게 이름을 변경해준 이유는, 티스토리 스킨에서 사용하는 기본 CSS 파일이름이 style.css 이기 때문입니다. 티스토리 관리자메뉴에서 "HTML/CSS 편집"메뉴로 들어가면 HTML과 CSS 를 편집할 수 있죠? 여기서 HTML파일 이름은 skin.html 이고 CSS파일 이름이 style.css입니다. 앞으로 우린 HTML파일에 style.css파일을 import해서 사용할껀데, 나중에 HTML파일 내용을 티스토리 HTML편집기에 복사/붙여넣기 할 때, 경로수정을 따로 안해주기 위해서 CSS파일 이름은 맞춰주는 겁니다.
그런데 왜 HTML파일은 이름을 안맞춰줄까요?
그건... Brackets에서 Live Preview 기능을 이용하기 위해선 기본 HTML파일명이 index.html 이어야 하기 때문이죠. 어짜피 HTML과 CSS 모두 파일을 업로드 하는게 아니라, 내용을 붙여넣기 할꺼라서 파일명은 크게 중요하진 않아요.
마지막으로, style.css와 index.html 파일내용은 모두 지워주시고, index.html 에 아래 코드를 붙여넣기해주세요.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GETTING STARTED WITH BRACKETS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
자~ 이제 설정이 모두 끝났습니다. 아니, 사실은 이게 끝이 아닌지도 모르죠. 단지 제가 설정한 부분까지는 잘 따라오셨다는 겁니다. ^^
Epilogue
티스토리 반응형 스킨을 직접 만들어보자는 각오에서 시작된 작업이지만, 스킨을 만든다는 것이 만만한 작업은 아닐꺼같아요. 어쩌면, 이렇게 시리즈로 포스팅을 하다가 중도포기할지도 모르는 일이죠. 지금 단계에서 생각해보더라도, Brackets에서는 티스토리 치환자를 사용하지 못하기 때문에 발생할 어려움들이 눈에 선하네요. ㅠㅠ
그래도 이 시리즈를 꾸준히 따라오실 여러분을 위해 최선을 다해볼테니 많은 응원 부탁드려요. ^^
자~ 그럼 이만, 다음시간에 만나요~
'작은설탕 IT > Blog' 카테고리의 다른 글
| 티스토리 스킨제작기 (3) - 레이아웃 만들기 (1) | 2016.07.28 |
|---|---|
| 티스토리 스킨제작기 (2) - 레이아웃 잡기 (1) | 2016.07.27 |
| [티스토리 반응형스킨#2 - 시리즈1] 반응형스킨#2로 스킨 바꾸기 (16) | 2016.07.22 |
| 티스토리 반응형스킨에 구글 애드센스 광고 삽입하기 (22) | 2016.07.19 |
| 구글 애드센스 가입하기 (8) | 2016.07.15 |