웹을 개발 하기 앞서 어떤 도구를 이용해서 코드를 만들지 생각해 봐야한다.
Html이나 css, JavaScript는 텍스트 문서처럼 작성하면 되므로 메모장으로 만들 수도 있고, 다른 툴을 이용해서 만들 수도 있다.(단, 한글, 마이크로소프트워드, 엑셀은 안됨-_-;)
나는 Sublime Text 3 라는 툴을 이용해서 작성을 하겠다. Sublime Text는 메모장을 좀더 이쁘고 좋은 기능을 넣은 메모장이라고 생가하면 좋을 것 같다.
http://www.sublimetext.com/3 에서 다운받을 수 있다.
설치시 Next만 누르면 되는데 3번째 Step 에서 "Add to explorer context menu" 만 체크
설치 완료 후 실행하면 검은색 화면에 먼가 개발자 포스를 풀풀 품길것 같은 화면이 나온다.
여기에서 사용하기 편리한 기능 한가지만 추가하고 넘어가기로 한다.
자동정렬 기능인데, HTML코드를 작성하다보면 띄어쓰기를 잘 못 할 경우 가독성이 떨어지게 되는데 이럴 경우 간단하게 단축키 하나로 정렬 하는 방법을 설정 하도록 한다.
[Preferences -> Key Bindings -> User] 로가면 빈 화면이 나오는데, 그 안에
{ "keys": ["ctrl+alt+l"], "command": "reindent"}
을 입력해 준다.
그리고 저장.
이제 전체 블럭 설정을 하고, Ctrl + Alt + L 을 누르면 자동 정렬이된다;
간단하게 다음 예제를 입력 후 전체 블럭설정(Ctrl + A) 후 Ctrl + Alt + L을 입력해보자.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div>
<div>
<div>
abc
</div>
</div>
</div>
</body>
</html>
결과확인.
이상으로 Sublime Text설치 및 설정에 대해 다뤄봤다.
이제 다들 설치하러 갑시다~
댓글