HTML 웹페이지 개발 도구: 아톰 에디터와 Emmet 확장팩 설치하기

개발 도구란 사용하는 개발 언어를 보다 쉽고 편리하게 사용할 수 있게 해주는 도구죠. 저는 생활 코딩에서 추천한 아톰(ATOM)을 현재 사용 중인데요.

 

ATOM을 설치한 다음에는 확장 툴인 EMMET을 설치하면 몇 가지 확장 기능을 통해 보다 수월한 코딩이 가능합니다. 확장 툴을 설치하려면 ATOM - SETTING - INSTALL에서 Emmet을 검색하시면 되공요.

 

Emmet 설치 후 특정 태그를 입력하고 TAB을 누르면, 자동으로 닫히는 태그가 형성되는 등 보다 간편한 코딩을 할 수 있습니다. Emme을 활용하면 여러 리스트를 한 번에 만들 수도 있는데요. ol>li*4라고 입력 후 TAB키를 누르면 다음과 같은 코드가 완성됩니다.

  <ol>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ol>

또한 태그와 내용 간의 빠른 이동을 원할 경우 옵션키와 좌우 방향키를 사용할 수 있고요. 보다 자세한 사항은 Packages - Emmet 탭 또는 아톰 emmet 깃허브에서 확인할 수 있습니다.  아래 영상은 아톰과 Emmet을 소개한 생활코딩 영상이에요.