본문 바로가기
알아두면 좋은 정보

Atom 프로그램 소개

by AYAYz 2017. 7. 25.

개발자들이 코딩을 할때 개발하는 도구도 중요하죠

오늘은 에디터 "Atom"을 소개하겠습니다.


https://atom.io/


아톰은 여기서 다운하실 수 있습니다.




딱 봐도 Download Windows 64 bit Installer를 누르시면 되겠죠 ㅎㅎ


그리고 켜시면 이렇게 뜹니다.

일단 위쪽에 탭은 다 닫아주죠


그리고 나서, FIle -> Open Folder를 눌러주세요


그리고 자기가 원하는 폴더를 지정해주세요.

저는 미리 만들어놓은 blog폴더에 넣죠.

폴더선택 꾹.

그러시면 이렇게 폴더이름이 뜹니다.


그리고 여기서 폴더이름 우클릭 -> New File을 눌러주세요

그러면 이렇게 파일 이름을 지정할 수 있는 창이 뜨게됩니다.

여기서 이름을 지정해주시면 되는데 꼭 뒤에 .html 을 꼭 붙여주셔야 html형식으로 작성가능합니다.

그리고 여기서 이렇게 써주시면 됩니다. 실행은 그폴더 가셔서 열면되요.

아니면 아파치같은 서버를 열어주는 도구를 이용해서 서버를 열어주는 도구가 여는 html파일이 있는 폴더를 지정해주시고 편집해주시면 바로 인터넷 주소만 치면 열 수 있겠죠.


그리고 소스 편집하시고 저장(Ctrl+S)하시는거 잊지 마세요.

그리고 편리한 기능 한가지를 설명해보자면


File -> Settings에 들어가시면

이렇게 뜨는데요 여기서 Install을 눌러주세요



그러시면 이렇게 검색할 수 있는 창이 뜨는데요.


여기에 emmet라고 검색해 주세요.

그리고 조금만 기다리시면,

이렇게 맨위에 emmet라고 다운로드가 가장 많은 거 있죠? 저는 이미 설치를 해서 저렇게 뜨지만

여러분들은 밑에꺼 처럼 파란색 Install로 되있을겁니다. 이것을 눌러주시고 기다리세요

그리고 저렇게 || Disable라고 뜨면 실행이 되있는겁니다.



이 기능은 아주 편리한 기능입니다.

그 기능을 지금부터 소개해 드리겠습니다.


여기서 html라고만 써주세요 (꺽쇠를 빼주세요)

그리고 이상태에서 Tab키를 눌러주시면..!






이런식으로 자동으로 <>와 함께 닫아주는 태그까지 같이 나옵니다. ㅎㄷㄷ





그리고 input*3을 입력하시고 Tab키를 누르시면..






와...와우... 알아서 입력이 되었습니다.




그리고 h1*3>a라고 입력하시고 Tab키를 눌러주시면..




와! 이런식으로 귀찮은 작업을 수월하게 쓸수 있게되었습니다.



정말 편리한 기능인것같습니다. 이 외에도 많은 기능이 있으니 인터넷에서 찾아보시기 바랍니다.


그럼 지금까지 Atom아톰 소개였습니다.


댓글