개발
- Development (건축에서 온 말)
- 프로그램을 만드는 과정 = HTML을 활용해서 웹페이지를 만들 때 그것을 도와주는 전문화된 프로그램
HTML - 개발도구
- 우리가 지금까지 사용해온 개발도구라면? 윈도우-메모장, 맥-텍스트 에디트가 있었다.
- 개발도구는 선택사항이지만, 아래의 도구들을 추천합니다.
- <ATOM>,<Sublime Text 2>,<Emmet>,<Bracket>
<ATOM> 아톰
소개
Github에서 만든 에디터로 다양한 프로그래밍 언어의 편집기로 사용할 수 있도록 고안된 도구
특징
- 무료
- 플러그인으로 기능을 쉽게 확장할 수 있다.
- 또한 HTML,CSS,JavaScript와 같은 웹기술로 화면을 구현했기 때문에 웹페이지를 편집하듯이 UI를 제어할 수 있는 특징이 있다.
다운로드
- <아톰> 다운로드 https://atom.io/
- <아톰>이 깔리지 않을 때 추천 1 : http://www.sublimetext.com/
- <아톰>이 깔리지 않을 때 추천 2 : http://brackets.io/
<ATOM> 아톰 - Emmet
적용되는 기술
html, css
패키지 홈페이지
아래 페이지에서 emmet의 atom 버전 단축키 조합을 알 수 있다.
https://atom.io/packages/emmet
emmet
Emmet – the essential tool for web developers
atom.io
Emmet 홈페이지
emmet는 단축 코딩을 위한 일종의 표준과 같은 것이고 emmet 패키지는 그 표준에 따라서 atom을 위해서 제작된 소프트웨어입니다. emmet의 구체적인 문법은 아래 emmet의 홈페이지를 통해서 익힐 수 있다.
Emmet — the essential toolkit for web-developers
Emmet — the essential toolkit for web-developers Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow: Demo | @@@ tooltip: Type CSS-like abbreviation type: ul#nav>li.item$*4>a{Item $} wait: 1000 tooltip: Run “Expan
emmet.io
Atom 에디터 수업
https://opentutorials.org/module/1579
Atom Editor
소개 Github에서 만든 에디터로 다양한 프로그래밍 언어의 편집기로 사용할 수 있도록 고안된 도구입니다. 특징 무료이고, 플러그인으로 기능을 쉽게 확장할 수 있습니다. 또한 HTML,CSS,JavaScript와
opentutorials.org
크롬 개발자 도구 수업
https://opentutorials.org/module/306/2865
둘러보기 - 크롬 개발자 도구
둘러보기 2012-09-27 23:16:03
opentutorials.org
Sublime Text 2
소개
코드 에디터(code editor)로 프로그래밍 언어를 작성 할 때 사용하는 프로그램으로 빠르고 가볍고 확장성이 좋은 에디터다.
주요기능
- 프로젝트 기능을 통해서 여러개의 폴더를 손쉽게 관리
- GOTO 기능을 통해서 원하는 파일로 빠르게 이동 화면을 쉽게 분할 할 수 있다.
- 패키지 관리를 이용해서 손쉽게 확장 기능을 설치 제거 할 수 있다.
- 단축키
- vi의 단축키를 기본적으로 내장해서 vi 스타일로 사용 할 수 있다.
- 매크로 기능
- 빌드 기능
