티스토리 뷰

 html에디터 중에서는 서브라임 텍스트, 브라켓,에디트플러스, atom등 많은 전문 에디터가 있지만, 우선은 간단한 편집기를 사용하는 것이 html을 배우는 데 더 도움이 됩니다. 

 가장 간단한 편집기는 메모장입니다. 

1. 시작=>프로그램=>보조프로그램=>메모장 메뉴를 엽니다.  그리고 html태그를 작성하면 됩니다. 앞서 배웠던 간단한 html코드를 작성해 봅니다.  

[HTML강좌] - html 강좌 (1) html 태그, 문서, 페이지 구조 <= 참조

2. 파일을 다른이름으로 저장합니다. 필요에 따라서 다양하게 이름을 정할 수 있지만 여기서는 "index.html"로 저장합니다. 인코딩은 UTF-8 기본 인코딩으로 설정합니다.  파일 확장명은 html과 htm 둘다 사용할 수 있습니다. 

 저장하고 나면 확장자 html에 따라서 브라우저 모양으로 파일이 보일 것입니다. 

3. html파일 열어봅니다. 이미 확장자에 따라 브라우저에 연결이 되어 있기 때문에 더블클릭하면 브라우저가 열립니다. 또는 파일을 오른쪽 클릭한 후에 연결 프로그램으로 브라우저를 고를 수 있습니다.  파일을 열게 되면 아래와 같이 브라우저에서 작성한 html의 결과물을 볼 수 있습니다. 

 

  직접 html를 써보는게 도움이 많이 된다고는 하지만 아무래도 편집기도 틈틈히 써보고 익히는 것도 좋습니다.  편집기의 패키지 플러그인은 제대로 조합하면 획기적으로 html태그 작성을 빠르게 해줍니다.  예전에 나모웹에디터 등의 태크를 모르더라도 웹페이지를 작성할 수 있게 해주는 프로그램이 있었는데 다음의 html 편집기는 태크 작성을 도와주는 방식이기 때문에 방식이 틀립니다. 

 그리고 태그를 모르고도 페이지를 작성하는 종류의 에디터는 왠만하면 사용하지 않는 것이 좋습니다.  하나의 오류가 나거나 조그만 부분만 고치려고 할 때 해당 프로그램만의 방식으로 태크가 만들어 지기 때문에 수정 시간이 훨씬 더 많이 걸리거나 아예 불가능한 경우가 많습니다.  

 

 추천 html 편집기 링크 

1. 아톰 에디터 

https://atom.io/

 

A hackable text editor for the 21st Century

At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it.

atom.io

2. 서브라임 텍스트

http://www.sublimetext.com/3

 

Download - Sublime Text

Sublime Text 3 is the current version of Sublime Text. For bleeding-edge releases, see the dev builds. Sublime Text may be downloaded and evaluated for free, however a license must be purchased for continued use. There is currently no enforced time limit f

www.sublimetext.com

 

댓글