[WebStudy] Concept

11 [Emmet(에밋)]

Jelly-fish 2023. 12. 15. 17:07

■■■ Emmet(에밋) ■■■
(생산성 향상 도구)


○ 개요

   - 기존에는 Zen Coding(젠코딩) 이라는 이름으로 사용되었다.
   - 이후... Google 에서 이 도구를 수용하면서 emmet 이라는 이름으로 변경되었다.
   - HTML 생산성 향상 도구(HTML 코딩을 빠르게 하기 위한 플러그인)
   - CSS 선택자 사용(CSS3 지원)
     → HTML 을 CSS 선택자를 통해 검색하는 방법 대신
        CSS 선택자를 통해 HTML 을 생성하도록 하는 개념.

○ 환경 설정

   - 대부분의 툴에서 지원하고 있음
     (※ 그리고 대부분의 편집기 내에서의 액션 키 : Ctrl + E)


   - http://emmet.io/
     ① 메인 페이지 좌측에 있는 Download 메뉴 클릭
        → https://emmet.io/download/ 페이지로 이동

     ② Download 리스트들 중 본인이 사용할 편집툴(IDE)의 메뉴 클릭
     ③ Installation 항목에서 제시한 순서대로 진행
        (Go to Help > Install New Software… in your Eclipse IDE)


(Ctrl+d : 에밋 옵션과 충돌)

※ 특이사항
   
   Emmet 플러그인 설치 이후 이클립스 기본 단축키와 중복되는 항목이 존재함.
                            --------------------
                                  Ctrl + D



   ==> 단축키 재설정
       (이클립스 > Window(윈도우) > Preperences(설정) > General > Keys)