HTML 문서는 여러 요소(element)들로 구성됩니다. 최상위 요소는 html 요소이며 그 밑에는 head 요소와 body 요소가 나란히 나와야 합니다. 아래의 단순한 예제를 통해 이해를 돕도록 하겠습니다.
<!DOCTYPEhtml><html><!-- head open --><head><metacharset="utf-8"><title>제목</title></head><!-- head close --><!-- body open --><body><h1>제목</h1><p>단락</p></body><!-- body close --></html>
기본적으로 HTML 태그는 여는 태그와 닫는 태그로 한 조를 이루는 특징이 있습니다. 간혹 닫는 태그가 없는 경우도 있으니 기억해두기 바랍니다.
<html> 여는 태그</html> 닫는 태그<body> 여는 태그</body> 닫는 태그<h1> 여는 태그</h1> 닫는 태그<p> 여는 태그</p> 닫는 태그
DTD 선언
표준 HTML5 문서의 첫 줄에 DTD선언을 해야 합니다. DTD란 문서 형식 정의(Document Type Definition)의 약어입니다.
<!DOCTYPEhtml>
HEAD 태그
head 태그는 HTML 문서에 대한 메타 데이터이며, 메타 데이터는 표시되지 않습니다. 메타 데이터는 일반적으로, 문자 집합, 스타일, 링크, 스크립트 및 기타 메타 정보와 문서 제목을 정의합니다. 메타 데이터 종류 : <title>, <style>, <meta>, <link>, <script>, and <base>.
meta 요소는 여러가지 용도로 쓰이는데 아래 예시에서는 이 문서가 utf-8이라는 문자셋으로 저장되어 있음을 나타내는 용도로 쓰였습니다. 문자셋이란 컴퓨터가 글자(한글, 영문 등)를 저장하는 방식을 나타내는데, utf-8은 그 중에서도 다국어로 작성된 문서를 저장할 때 가장 널리 쓰이는 방식입니다.
<metacharset="utf-8">
다만 여기서 참고해야 할 것은 닫는 태그가 없는 이유는 meta 요소 안에는 담을 수 있는 내용이 없기 때문입니다.
문서의 몸체(BODY)
body 태그는 문서의 모든 보여지는 것을 관장합니다. 올바른 HTML을 작성하려면 지금까지 살펴본 내용 이외에도 지켜야할 많은 규칙들이 있습니다. 몇 가지 예제를 통해 살펴보도록 하겠습니다.
<!-- 수식에서의 괄호와 마찬가지로 태그도 여는 태그와 닫는 태그의 쌍이 잘 맞아야 합니다.--><!-- 올바른 예제 --><p>태그를 열고 닫는 <em>순서</em>를 잘 지켜야 합니다</p><!-- 잘못된 예제 --><p>태그를 열고 닫는 <em>순서</p>를 잘 지켜야 합니다</em><p>태그를 열고 닫는 <em>순서를 잘 지켜야 합니다</p>
들여쓰기와 줄바꿈
HTML 문서를 작성하는 사람이 보기 편하게 하기 위한 것이고 사실은 아래와 같이 들여쓰기를 하지 않아도 상관 없습니다. 모두 한 줄로 붙여서 쓰거나, 줄바꿈을 다른 방식으로 해도 동일한 HTML 문서입니다. 하지만 HTML 문서가 길고 복잡할수록 줄바꿈과 들여쓰기를 적절히 활용하는 것이 중요해집니다. 그렇지 않으면 읽고 쓰기가 어렵기 때문입니다.
HTML의 문법은 생각보다 복잡해서 완전히 외우기 쉽지 않고, 익숙해진 후에도 간혹 실수를 하게 됩니다. 가장 좋은 방법은 유효성 검사 프로그램을 활용하여 자신이 작성한 문서가 표준을 준수하고 있는지에 대하여 검사하는 것입니다. 아래의 순서대로 접근하면 확인 할 수 있습니다.
TextMate2가 오픈소스가 된 이후, 지속적인 변경이 이루어지고 있지만 TextMate와 같이 괜찮은 책 형태의 문서나 온라인 문서가 없는 것 같아 찾아보던 중 이곳에서 TextMate2 기본 사용법을 기술해 놓은 것을 찾을 수 있었다.
일부 내용은 불필요한 것도 있고 해서 기초적인 사용법 중 괜찮은 내용만 번역해 보았다. 번역이 이상한 부분이나 기술되지 않은 상세한 내용은 원 저자의 페이지를 참조하시길…
Bundles
TextMate의 진정한 힘은 Bundle에 있다. 당신이 내가 하는 것처럼 Ruby나 Shell 코드를 작성하든 또는 다른 소수 사용자가 사용하는 언어를 사용하든, 그 언어에 대한 syntax highlighting 뿐만 아니라 프로그래밍을 더욱 쉽게 작성할 수 있게 도와주는 다양한(whole bunch) snippet들을 가지고 있는 bundle을 사용할 수 있을 것이다. 프로그래밍 언어, build system, source code control, 테스팅용 언어, 그리고 여러가지 파일 포맷들에 대한 bundle이 존재한다. 심지어 테마용 bundle도 있다.
나는 모든 bundle을 한꺼번에 설치하지 않고 내가 필요한 것만 설치한다(그리고 필요하지 않은 것들은 다 지운다). 이러한 식의 무분별한 모든 설치는 TextMate 1이 잘 나가던 시절, 키보드 입력시 충돌을 발생시켰다.
한 언어용 또는 특정 기능에 대한 bundle을 설치하기 위해서, Preferences… 를 열거나 ⌘,를 누른다 그리고 Bundles 를 누른다. 설치할 bundle의 체크 박스를 클릭하여 체크한다. 지우려면 체크되어 있는 체크 박스를 클릭하여 체크를 해제한다. 아니면 아직 bundle을 설치하지 않은 형식의 파일(an unrecognized file)을 열면 TextMate2가 설치할 bundle을 추천해 줄 것이다.
Bundle에 어떤 기능이 들어있는지 배우기 위한 방법은 다양하다. Bundle / Edit Bundles… 메뉴를 클릭(또는 ⌃⌥⌘B 단축키 사용)하고 나서 내용을 확인하고 싶은 bundle을 클릭한다. 아니면 사용가능한 bundle을 확인하기 위해 열린 파일의 내용 아래에 보이는 톱니바퀴 메뉴(gear menu)를 클릭해 볼 수도 있다.
아니면 가장 좋은 방법으로 ⌘⌃T 단축키를 눌러 bundle 검색 창을 띄워 어디에 무엇이 있는지 찾는 방법도 있다. 당신이 존재할 것으로 생각하는 것이나 수행했으면 하는 것을 입력하면 나올 것이다. 이 방식이 내가 매일 사용하는 snippet들과 단축키들을 사용 가능 리스트에서 찾아 쓰는 방식이다.
Default file
단축키 ⌘N 은 프로그래머의 친구다. 이 단축키는 모든 에디터에서 새로운 파일을 생성한다. TextMate 2에서, 기본 설정은 프로그래머용 에디터에서 정말로 아무런 의미없는 순수 텍스트 파일(plain text file)을 생성하도록 한다. 나는 내가 대부분의 시간을 보내는 나가 가장 일반적으로 사용하는 파일 형식인 Ruby 포맷을 이 단축키가 생성하도록 하였고 이것이 나에게 필요한 것이다. 기본 파일 타입을 설정하기 위해서, Preferences… 를 열고 Files 탭에서 당신이 선호하는 새로운 문서 타입을 설정하면 된다. Favorites
나는 TextMate2를 사용할 때 동일한 프로젝트를 반복해서 열고 또 여는 것을 알고 있다. TextMate 1은 프로젝트용 파일들이 있었지만 나는 결코 그 파일들을 사용하지 않았다. 그래서 나는 터미널을 열고 프로젝트를 열어 사용하곤 했다. 이를 위해 프로젝트 폴더로 이동해서 mate . 명령을 수행해 프로젝트 폴더를 에디터에서 열었다(그리고 나중에 TextExpander script를 사용하여 이를 수행하도록 하였다. 상세한 것은 TextExpander in Terminal를 참고하라).
TextMate 2에서, Favorites 기능은 나에게 있어서 더 편리한 기능이다(works better for me). Favorite를 설정하기 위해서는, 프로젝트들에서 사용되고 있는 파일들을 살펴볼 수 있는 파일 브라우저를 이용한다.
Favorate를 생성하기 위해, 프로젝트 폴더 상에서 오른쪽 마우스를 클릭한 후 “Add <folder> to Favorites”를 선택한다.
다음부터 Favorate로 지정한 프로젝트를 열기 원하면 ⇧⌘O (숫자 0이 아니라 알파벳 O)를 눌러 Open Favorite 창을 열고 열기 원하는 프로젝트를 클리하거나 입력하면 된다. 나는 이 기능이 좋다(I just love this). 현재 TextMate 2 알파 버전에서는 favorate를 업데이트하기 위해서는 어플리케이션을 재시작해야만 하니 참고하시길.
mate and rmate
하루 대부분의 시간을 shell에서 보내기 때문에 나는 TextMate 2에서 열고 수정하는 많은 파일들에 대해 mate 명령을 이용하여 작업한다. mate 명령을 설치하기 위해서는, Preferences…를 열고 Terminal 탭을 클릭한 후 install을 클릭한다. 그러면 어디서든 파일을 열어 편집하고 싶은 파일에 대해 mate <filename> 명령을 이용할 수 있다. 또한 나는 많은 가상 서버에 있는 파일들을 수정 및 관리하기 위해 ssh 을 사용한다. vi 는 단순한 편집은 정말 잘 해준다. 그러나 나는 내 컴퓨터에서 좀 더 복잡한 편집을 하기 위해 TextMate 2가 원격 머신(remote machine)에서 동작하도록 하기 위해 rmate 명령을 사용한다.
서버에서 rmate 가 동작하도록 설정하기 위해서는, ssh 을 수행해 서버에 접속한 후 필요하다면 sudo를 이용해야 한다. 다음 명령을 입력해 스크립트를 다운로드하고 실행 권한을 주도록 하자:
curl -Lo /usr/local/bin/rmate https://raw.github.com/textmate/rmate/master/bin/rmate chmod a+x /usr/local/bin/rmate rmate 를 수행하기 위해 ssh 연결을 할 때 역방향 tunnel을 생성할 필요가 있다. ~/.ssh/config 파일에 다음과 같은 각각의 원격 서버용 entry를 생성하자:
Host nimitz User hiltmon HostName 192.168.xx.xxx RemoteForward 52698 localhost:52698 이제 서버로 ssh 연결을 하고 TextMate 2로 편집을 하기 위해 rmate를 수행하자. 예를 들면:
local $ ssh nimitz nimitz $ rmate .bash_profile 위와 같이 수행을 하면 로컬에서 TextMate 2를 이용해 원격 서버에 있는 .bash_profile 파일을 열 것이다.
Muscle memory keys
한명의 Mac 유저로써, 나는 이미 내 근육 기억(muscle memory)에 Mac에서 사용되는 편집용 단축키들이 기억되어 있다. 여기에 내가 TextMate 2에서 생산성을 최대화하기 위해 늘 사용하는 몇가지 추가적인 단축키들을 제시한다:
⌘T 는 내가 가장 좋아하는 단축키로써, 문자열을 입력할 수 있는 Go to File 창을 띄운다. 그리고 TextMate 2는 project에서 사용되고 있는 파일들 중 일치하는 모든 파일들을 찾아준다. 흔한 사용 예는 routes.rb 파일 열기 (⌘T rou ↩) 또는 Rails project들에서 사용하는 schema.rb 파일 열기 이다.
⌘R 는 현재 파일을 실행한다. 나는 에디터 윈도우 아래에 실행 결고가 출력되는 기본 설정을 좋아하지 않아, Preferences, Projects 탭에서 New window 에 출력되도록 설정을 변경하였다. ⇧⌃D 는 한 라인(또는 현재 선택되어 있는 부분)의 복사본을 생성한다. 나는 코드 패턴들의 복사본을 생성한 후 parameter들만 수정하는데 자주 사용한다. 예를 들어, 다음과 같은 ActiveRecord에 CVS import를 이용해 코드를 넣을 때
⌥→ 는 다음 단어로 이동(⇧ 는 선택 모드)시킨다 그리고 ⌘→ 는 표준 Mac에서 하는 것과 마찬가지로 라인 끝으로 이동시킨다. 그래서 새로운 것을 배우지 않고도, 파일에서 caret을 더 빨리 이동시킬 수 있다. But TextMate 2 goes further, if you do not have it mapped in Mission Control, ⌃→ moves to the next part in a CamelCase word (I do not use this). ⌥← 는 이전 단어로 이동(⇧ 는 선택 모드)시킨다 그리고 ⌘← 는 라인 시작으로 이동시킨다. ⌘↩ 는 현재 라인 중 어느위치에 커서가 있어도 새로운 라인을 현재 라인 다음에 생성한다. 특히 Textmate auto-inserts 기능은 {나 ‘ 가 열려있을 경우 자동으로 닫아준다(}, ‘를 자동으로 생성해 주는 것을 의미하는 것으로 보임) ⌘] 는 현재 라인에 대해 들여쓰기를 수행한다. TextMate2는 입력할 때 주로 이 기능을 수행된다. 그러나 지우기를 할 때는 이 기능이 항상 잘 동작하지는 않는다. ⌘[ 는 현재 라인에 대해 역방향 들여쓰기를 수행한다(un-indents). ⌘/ 는 현재 라인 전체를 주석으로 변경해 주거나 일반 라인으로 변경해준다. 나는 테스트 하는 경우 또는 디버그를 발견했을 때 디버그용 출력문을 주석처리할 때 이 기능을 많이 사용한다. 여러 라인을 한번에 선택후 주석처리하는 것도 가능하다. ⇧⌘] 는 다음 탭으로 이동시킨다. 주로 뷰, 컨트롤러, 헬퍼 사이에 이동할 때 많이 사용된다. 흥미롭게도, Ruby 번들도 이와 같이 이동하는 macro들을 제공하지만 나는 사용하지 않는다. ⇧⌘[ 는 이전 탭으로 이동시킨다.
Column mode
컬럼모드는 간단히 설명하면, 먼저 컬럼 모드 시작을 원하는 컬럼 위치로 캐럿을 이동 시킨 후 여러 라인을 한꺼번에 선택하되 컬럼모드 마지막으로 선택되기 원하는 커럼에서 선태을 종료한다. 그 후 ⌥ 키를 누르면 컬럼모드가 선택된다. 컬럼모드 선택한 상태에서 ⇧→ 를 입력해 추가 선택을 할 수 있고 ⌥→를 눌러 필드간 이동을 할 수 있다.
Searching
다른 모든 에디터들처럼, TextMate도 완전한 검색 및 대치 기능을 지원한다. 나는 파일내 검색 및 대치를 많이 사용하고 뿐만 아니라 project내 검색도 자주 사용해서 관련 단축키들을 암기하고 있다.
한 파일 내에서 검색 및 이동을 위해 나는 검색에 사용할 단어를 선택하기 위해 ⌘E 를 먼저 누른다. ⌘G는 선택한 패턴이 다음으로 존재하는 위치를 찾고 그 위치로 이동한다. ⇧⌘G 는 이전에 존재하는 위치를 찾는다.
나는 또 빠른 대치 기능을 사용한다. 찾고자 하는 패턴을 선택한 후 ⌘E 를 누른다. 그리고나서 선택한 패턴을 바꾸고 싶은 새로운 내용으로 변경한다. 변경한 내용을 선택한 후 ⇧⌘E 를 입력해 TextMate에게 새로운 선택항목은 대체할 내용임을 알려준다. 만약 용감하다면 ⌃⌘G 를 입력해 모든 대치하고자 하는 텍스트를 한번에 변경하면 된다.
만약 항목 선택없이 검색을 시작하고자 한다면, ⌘F 가 당신의 친구가 될 것이다. ⌘F 를 입력해 Find 창을 열고 검색하고자 하는 내용을 입력 후 return을 눌러 검색을 시작한다. 여기서도 ⌘G 과 ⇧⌘G 를 입력해 다음과 이전에 존재하는 항목에 대한 검색을 할 수 있다.
그리고 project내 모든 파일에 대해 검색을 수행하려면, ⇧⌘F 를 누르면 검색이 project내 모든 파일에 대해 적용될 것이다.
