Emmet (Zen Coding)

2013-04-04

Emmet

과거 zencoding이라는 이름으로 알려진 HTML/CSS 툴킷으로 코딩 속도를 비약적으로 향상시켜준다. 이에 대한 자세한 설명은 생활코딩 Emmet 수업을 참고하자.

Emmet의 문법과 기본적인 사용법은 Emmet의 홈페이지를 참고하자. 사용법을 인터렉티브하게 제공하고 있기 때문에 예제만으로도 충분히 사용법을 익힐 수 있다. (기본적인 사용법은 이번 수업의 동영상을 참고하자)

본 기능은 파일을 html, php와 같은 웹 페이지로 저장한 후에 동작한다.

Emmet 홈페이지

http://docs.emmet.io/

sublime Emmet

https://github.com/sergeche/emmet-sublime

본 수업은 Sublime Text Package Control을 이미 설치했다고 전재한다. Sublime Text Package Control 수업 바로가기

봤어요 98명

아무개3년 전

와 이고잉님 감사합니다 이 Sublime Text 의 Emmet이라는 패키지를 사용하면서 많이 타이핑하지 않고도 많은 태그와 속성들을 적을 수 있게 되었습니다 매번 실습예제를 일일히 타이핑하기 번거롭고 어려웠는데 이거 사용하고 나니 확실히 편리합니다 좋은 정보 감사합니다!

답글
서정규6년 전

jsp에서도 html5와 같이 tab을 누를경우
아무것도 없을경우 스페이스4칸
코드가 있을경우 태그화 시켜주는 기능은 없을까요??
계속 해보는데 둘중 하나만 되는것 같네요.

답글 수정 삭제
난감..7년 전

저도 그런식으로 작동하는데.. 어떻게 해야하나요..ㅠㅠ
대화보기
답글 수정 삭제
김윤아8년 전

수강완료~

답글
JustStudy8년 전

고맙습니다

답글
jade9년 전

전재한다 -> 전제한다
인것같습니다~ ^^;;

답글
서브라임초보9년 전

Emmet 페키지가 설치된 후에 Bootstrap 3 Snippets 페키지를 설치 하면 Emmet 만 작동하고 Bootstrap 3 Snippets 은 작동하지 않는 현상이 생겨서 Emmet 페키지를 제거했더니 정상 작동이 되네요. 두 페키지를 모두 사용할 수 있는 방법은 없을까요?? 고수님들의 코멘트 부탁드립니다. (참조 : https://github.com......gin)

답글 수정 삭제
나그네9년 전

HTML5는 <br>이 맞습니다. <br />은 xhtml에 사용되는 방식입니다.
대화보기
답글 수정 삭제
luv10년 전

html:5하고 tab 누르면 아래처럼 나오던데요...좀 다르게 동작해요..질문에 대한 질문도 저도 가지고 있던터라...^^

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body>
</html>

답글
jsh10년 전

emmet 사용중,
form>input*2 라고하면
<form action="">
<input type="text">
<input type="text">
</form>
이렇게 하이라키로 나와야하는데
<form action=""><input type="text"><input type="text"></form>
이런식으로 일렬로 나와서 일일이 수정해줘야하는데

방법없을까요? 다들이렇게 쓰시나요

답글 수정 삭제
나무마루10년 전

html 만 되는건가요?

답글
샤핀10년 전

이 강의를 보고 나서 제가 좋아하는 이클립스에서도 emmet플러그인을 검색해 봤는데, 있더군요.
이클립스에서도 emmet !! ㅋㅋ 감사합니다.

답글
좀 다르게 동작해요..10년 전

html 하고 tab하면

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

</body>
</html>

이렇게 나오는데 강의 처럼 하려면 어떻게 해야 하나요?

답글 수정 삭제
태그 형식10년 전

emmet 설정에
{
"syntaxProfiles": {
"html": {
"self_closing_tag": "xhtml"
}
}
}
넣어서 해결 했습니다. 일본어로 된 사이트에서 겨우 발견했네요.
혹시라도 필요하신분 계실까봐 적어놓습니다.

답글 수정 삭제
태그 형식10년 전

<!DOCTYPE html>일때 아무리 해도 <br> 이렇게만 나오고 <br /> 이렇게는 안되네요.
해결 방법 인터넷에 찾아봐도 못 찾겠어서 질문 올려요

답글 수정 삭제
egoing10년 전

아 그런 문제가 있을 수 있겠군요. 본문에 반영하겠습니다.
대화보기
답글
tab키10년 전

혹시 새로 만든 파일에서 탭키를 누른거 아닌가요?
편집하는 파일의 확장자가 html 이나 php 같은 웹페이지 파일일때 실행이 됩니다
대화보기
답글 수정 삭제
tab키 작동10년 전

새로 파일을 만들어서 하는 방법 즉 ctr+n 을 눌러 새로 만든 파일은 확장자가 지정이 되어 있지 않습니다

그래서 tab을 눌러도 아무 반응이 없습니다

ctr+shift+s 를 눌러서 새로만든 파일의 확장자를 html 이나 php 같은 웹페이지 파일로 저장을 하고

html 이나 div 같은거 적고 tab을 누르면 작동을 할겁니다
대화보기
답글 수정 삭제
html10년 전

저도 이제 배우기 시작해서 확실한 답변인지는 모르겠지만 저도 그런 문제를 격어서 답글을 씁니다.
아마도 탭키를 치기전에서 <html>이 상태에서가 아닌 <html 이 상태에서 탭키를 눌러야 자동완성 기능이 작동 하는 것 같습니다.
대화보기
답글 수정 삭제
Tab 키가...10년 전

마우스커서를 제일 맨끝에다 두고 'Tab' 을 눌렀는데 자동완성이 안되고 커서만 도망 가드라구요....

근데 저장된 html파일을 열어서 하니깐 또 되고요....

ctrl+N 으로 새로 만들어서 하면 탭 기능이 안먹히고
이미 저장된 파일 불러와서 하면 탭기능이 먹히고...

왜그럴까요...?

답글 수정 삭제
kipid10년 전

이 plug-in은 html 편집할 때 너무 좋은거 같아요.

답글
신기해10년 전

커서를 맨끝에 두고 tab을 눌러보셨나요..? 커서가 맨 끝에 있고 그때 탭을 눌러야 작동이 될껍니다.
대화보기
답글
젠장10년 전

emmit 설치 다 했는데 왜 tab 누르면 그냥 tab만 될까요.ㅠㅠ html 하고 tab 눌렀는데 걍 커서만 이동한다능..

답글 수정 삭제
상상초월10년 전

emmet 자동완성 기능중에 궁금한게 있습니다.
열고 닫는 태그를 1개로 해결할수 있는 source 태그나 track 태그 같은게 있는데요
'source'를 입력하고 탭키를 누르면 <source></source> 이렇게 완성 되는데 -> <source /> 이렇게 완성하는 방법이 없을까요?

답글
egoing11년 전

li 코드는 ul이나 ol 코드 둘 중의 하나가 부모로 와야 합니다.

아래와 같이해보시면 될꺼예요.

ul>li
ol>li

:)
대화보기
답글
Username11년 전

당연히 작동 안하죠
div안에 누가 li를 넣나요..
웹표준에 대해 공부하실 필요가 있습니다..
대화보기
답글 수정 삭제
레드독11년 전

emmet을 설치했는데 제대로 작동아 안되는 이유를 모르겠습니다.
현상은
1.
div>li [tab] <-빈칸없이 Tab했습니다.
하면
div><ul></ul>
로 나옵니다. 즉 마지막 커서가 위치한 ul의 끝에서 ul에 대해서만 zen coding이 동작합니다.
2.
div>li*3 [tab]
하면 zen coding이동작하지 않습니다.

답글 수정 삭제
누렁이11년 전

emmet덕에 sublime을 더 즐겁게 쓰고 있어요 :) 좋은강의 감사합니다!

답글 수정 삭제

Emmet (Zen Coding)

Emmet

Emmet 홈페이지

sublime Emmet

댓글