텀블러 테마로 배우는 웹개발 입문 2
프로그램 설치
텀블러는 자체적으로 테마 제작을 위한 HTML/CSS 편집기를 제공하고 있지만, 웹에서 구현된 편집기의 특성상 코딩 자체에 불편함이 많고 저장하거나 저장한 내용을 반영하는 데에 있어서 잦은 오류가 발생한다. 텀블러가 제공하는 변수와 블럭요소들을 눈에 띄게 보거나 하는 데에는 편할 수는 있지만, 빠른 코딩을 위해 유용한 기능이 많은 Texteditor의 도움을 받는 것이 좋다.
Sublime Text 2
Sublime Text 2 는 오픈소스로 제작된 Text Editor 이다. 오픈 소스인 만큼 다양한 플러그인이 개발되어 어떤 형태의 개발에도 손색없이 사용할 수 있다. HTML과 CSS를 하나의 파일에 병기해야만 하는 텀블러 테마 제작의 특성상 기능이 좋은 Text Editor 의 활용은 꼭 필요하다고 생각한다.
기본적으로는 Sublime Text 2 에서 작업을 하고, 내용을 복사해서 텀블러 편집기에 붙여넣어 적용하는 방식으로 작업을 진행한다. 화면 전환이 잦은 것이 번거로울 수 있지만 소스가 저장되지 않을 채 날아가는 것을 미연에 방지하고, Emmet같은 자동완성 기능을 활용하여 빠른 코딩을 할 수 있다.
원하는 기능을 플러그인으로 붙히는 방식이기 때문에, 설치 이후에 몇 가지 플러그인을 추가로 설치해주어야 한다.
Package Control
Package Control은 Sublime에 플러그인을 설치할 수 있도록 돕는 프로그램이다. 설치 방법이 조금 특이한데, 가이드를 천천히 읽어보면 어렵지 않게 설치할 수 있다. 설치 이후에는 단축키 ctrl + shift + p cmd + shift + P 를 눌러 활성화할 수 있다. 단축키로 활성화된 창에 Install Package 를 입력해서 인스톨할 플러그인을 찾는 새로운 창을 활성화 시킨 후, 아래의 플러그인의 이름을 타이핑하여 하나씩 차례차례 설치해 준다.
- ConvertToUTF8 한글을 무리없이 사용할 수 있도록 언어셋을 설치해 준다.
- Emmet 코딩을 빠르게 돕는 Zen Coding 프로그램 중 하나인 Emmet 을 설치한다. 활용법은 검색을 하면 쉽게 찾을 수 있다.
Google Chrome
Chrome 은 구글에서 개발한 웹브라우저이다. 요즈음에는 메모리 문제 등으로 많이 느려지긴 했지만 여전히 강력한 기능이 많고 빠르기도 빠른 좋은 브라우저이다. 비교적 타 브라우저에 비해 표준에 가까운 렌더링을 하기 때문에 개발 시에 테스트용으로 활용하기 좋으며, F12를 누르면 튀어나오는 개발자 도구의 기능이 아주 막강하다.
HTML과 CSS의 내용이 궁금한 웹사이트의 특정 UI에 마우스 우클릭 > 요소 검사 를 하면 개발자 도구 창에서 해당하는 내용을 낱낱이 살펴보고, 또한 다른 값을 입력해 테스트해볼 수도 있다.
