[브라켓(Brackets)/확장 기능] Emmet 확장 기능 설치 Part.2

브라켓 에디터에 Emmet 확장기능을 설치하려 합니다.

이번엔 에디터 안에서 검색해서 설치를 진행해 보겠습니다.

emmet 는 일단 젠코딩(Zen coding)과 많이 비슷합니다.

코드의 자동완성을 도와주고 빠른작업을 하게끔 도와주는 기능이죠.

(에디트 플러스(EditPlus), 서브라임 텍스트(SublimeText)등 도 이런 기능을 지원하고 있습니다. 일부 메모장 코딩을 주로 하셨던 분은 손에 익지 않을 수 있습니다만 익숙해지면 굉장히 빠른 코딩을 하실 수 있으리라 생각됩니다.) 

Emmet 에디터 내에서 설치하기.

이 기능의 사용법은 아래에 설치가 끝난뒤 살펴 보도록 하겠습니다.

확장 기능을 설치하면 이렇게 진행이 됩니다.

확장 기능이 설치가 완료되면 닫기 버튼을 눌러 메시지창을 닫아 줍니다.

그 후 다시 전의 화면으로 돌아오는데 '닫기' 버튼을 다시 한번 눌러 줍니다.

이것으로 설치가 완료 되었습니다.

위와 같은 방법이 에디터 내에서 브라켓의 확장 기능을 검색하여 설치하는 방법 입니다.

이제 이 Emmet 의 확장 기능을 사용해 보겠습니다.

특별히 에디터 내에서 위 기능을 활성화 시키거나 그런건 없고.

코딩할때

<p>안녕하세요.</p>

를 치겠다. 생각되면

p{안녕하세요.}

이렇게 친 후에 탭(Tab key) 를 눌러주시면 됩니다.

이해하기 쉽죠?

p만 되느냐...

아닙니다. 모든 태그를 다 하실 수 있습니다!

div, h1~6, span... 갑자기 쓰려니 태그들이 많이 생각이 안나네요.

그럼 이것만 되느냐... 

아닙니다. css 도 가능합니다!

css 를 하기전에 html 태그의 emmet 활용법을 알려드리겠습니다.

a[href="#"]

이렇게 마크업 한뒤 탭을 누르게 되면 href 속성 안에 #이 자동적으로 들어가 있습니다.

ul>li

이렇게 마크업 한뒤 탭을 누르게 되면 ul 태그 안에 li 태그가 한개 들어가 있습니다.

div.box

이렇게 마크업 한뒤 탭을 누르게 되면 class이름이 box 인 div 를 만듭니다.

h1#logo

이렇게 마크업 한뒤 탭을 누르게 되면 id 가 logo인 h1 태그를 생성합니다.

strong{강조}

이렇게 마크업 한뒤 탭을 누르게 되면 strong 태그 안의 내용에 '강조' 라는 문자가 들어가 있습니다.(gif 에 나오죠.)

div*5

이렇게 마크업 하게되면 div 태그를 총 5개 만듭니다.

여기까지는 그냥 직관적으로 알 수 있습니다.

그럼 위의 것들을 응용해서 emmet 코딩을 한번 해보면..

ul>li*5>a{메뉴$}

이렇게 탭하게 되면 어떤 결과가 출력이 될까요?

<ul>
     <li><a href="">메뉴1</a></li>
     <li><a href="">메뉴2</a></li>
     <li><a href="">메뉴3</a></li>
     <li><a href="">메뉴4</a></li>
     <li><a href="">메뉴5</a></li>
</ul>

이런 결과를 출력하게 됩니다.

ul태그 안에 li태그를 5개 만들고 각 li태그 마다 a 태그를 넣어주는것 까지는 알겠는데 $(달러) 표시가 있죠?

$(달러) 표시는 앞으로 만들어지게 될 li 의 갯수를 의미합니다. 순번은 1번부터 li의 갯수만큼 표시해 주거나 뭔가를 '생성'할 수 있습니다.

또

input태그는 속성 종류가 몇개 있습니다. 하지만 일일히 중괄호[] 로 묶어서 입력하기엔 번거롭죠.

input:password

input:text

input:textarea

위의 것들을 차례로 탭하셔서 어떤 결과가 출력되는지 직접 살펴보시기 바랍니다.

css 를 예로 들어 보겠습니다.

css 는 속성(property) 에 emmet 기능을 쓸 수 있습니다.

body{background: ;}

를 하려면 어떻게 해야 될까요?

의외로 간단합니다.

body{bg}

입니다. 단! 커서는 g에다가 놓고 하셔야 합니다.

속성을 건드리는 것이기 때문이죠.

bm은 bottom

bt는 border-top

등등등

...정말 여러가지가 있는데..

생각해서 쓰려니까 또 생각이 안나네요.

그냥.. 이건 이렇게 하면 될꺼 같은데?? 하면..

그게 또 emmet 가 됩니다.

단순하게 생각하시면 될꺼 같습니다.

다음 포스팅은

정말 브라켓 이라는 툴을 왜 쓰는지

'코딩하는대로 바로 보기' 바로 이걸 포스팅 하겠습니다.