Emmet

Emmet은 셀렉터와 비슷한 형태의 축약 표현을 통해 HTML과 CSS 작성을 편하고 빠르도록 돕는다.

거의 모든 종류의 에디터에서 지원한다. 다운로드에서 지원 가능한 에디터 종류에 맞게 다운로드 할 수 있다.

내가 주로 사용하는 Atom 에디터에 설치 했다.

$ apm install emmet

스니펫 설정

축약된 형태의 표현에서 바꿀 스니펫이 snippet.json에 설정되어있다.

  1. Atom 에디터에서 Ctrl + ,로 세팅창을 연 뒤 Packages 탭에서 emmet을 찾는다. 그 후 View Code 버튼을 누르면 emmet의 패키지가 새창으로 뜬다.

  2. Ctrl + t로 snippet.json을 찾을 수 있다.

snippet.json에서 설정들을 확인한다.

html 문서 스니펫에 들어갈 lang과 locale 값을 변경하기 위해 snippet.json에서 variables 속성을 아래와 같이 바꿨다.

"variables": {
    "lang": "ko",
    "locale": "ko-KR",
    ...
}

에디터를 다시 시작하면 저장한 설정이 적용된다.

축약 표현 사용하기

  • 축약 표현은 cheatsheet을 참고.

  • 공백 없이 붙여서 쓴다. 공백은 축약 표현 파싱을 어디에서 멈출지 표시하는 심볼이다.

  • tab이나 Ctrl + e로 변환한다. Atom 기본 패키지에서 Ctrl + e를 사용중이기 때문에 작동하지 않을 수 있다. tab으로 사용은 문제 없다.

results matching ""

    No results matching ""