생활 웹디자인

코스 전체목록

닫기

Emmet (Zen Coding)

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 수업 바로가기

댓글

댓글 본문
  1. 아무개
    와 이고잉님 감사합니다 이 Sublime Text 의 Emmet이라는 패키지를 사용하면서 많이 타이핑하지 않고도 많은 태그와 속성들을 적을 수 있게 되었습니다 매번 실습예제를 일일히 타이핑하기 번거롭고 어려웠는데 이거 사용하고 나니 확실히 편리합니다 좋은 정보 감사합니다!
  2. 서정규
    jsp에서도 html5와 같이 tab을 누를경우
    아무것도 없을경우 스페이스4칸
    코드가 있을경우 태그화 시켜주는 기능은 없을까요??
    계속 해보는데 둘중 하나만 되는것 같네요.
  3. 난감..
    저도 그런식으로 작동하는데.. 어떻게 해야하나요..ㅠㅠ
    대화보기
    • 김윤아
      수강완료~
    • JustStudy
      고맙습니다
    • jade
      전재한다 -> 전제한다
      인것같습니다~ ^^;;
    • 서브라임초보
      Emmet 페키지가 설치된 후에 Bootstrap 3 Snippets 페키지를 설치 하면 Emmet 만 작동하고 Bootstrap 3 Snippets 은 작동하지 않는 현상이 생겨서 Emmet 페키지를 제거했더니 정상 작동이 되네요. 두 페키지를 모두 사용할 수 있는 방법은 없을까요?? 고수님들의 코멘트 부탁드립니다. (참조 : https://github.com......gin)
    • 나그네
      HTML5는 <br>이 맞습니다. <br />은 xhtml에 사용되는 방식입니다.
      대화보기
      • html:5하고 tab 누르면 아래처럼 나오던데요...좀 다르게 동작해요..질문에 대한 질문도 저도 가지고 있던터라...^^

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

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

        방법없을까요? 다들이렇게 쓰시나요
      • 나무마루
        html 만 되는건가요?
      • 샤핀
        이 강의를 보고 나서 제가 좋아하는 이클립스에서도 emmet플러그인을 검색해 봤는데, 있더군요.
        이클립스에서도 emmet !! ㅋㅋ 감사합니다.
      • 좀 다르게 동작해요..
        html 하고 tab하면

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

        </body>
        </html>

        이렇게 나오는데 강의 처럼 하려면 어떻게 해야 하나요?
      • 태그 형식
        emmet 설정에
        {
        "syntaxProfiles": {
        "html": {
        "self_closing_tag": "xhtml"
        }
        }
        }
        넣어서 해결 했습니다. 일본어로 된 사이트에서 겨우 발견했네요.
        혹시라도 필요하신분 계실까봐 적어놓습니다.
      • 태그 형식
        <!DOCTYPE html>일때 아무리 해도 <br> 이렇게만 나오고 <br /> 이렇게는 안되네요.
        해결 방법 인터넷에 찾아봐도 못 찾겠어서 질문 올려요
      • egoing
        아 그런 문제가 있을 수 있겠군요. 본문에 반영하겠습니다.
        대화보기
        • tab키
          혹시 새로 만든 파일에서 탭키를 누른거 아닌가요?
          편집하는 파일의 확장자가 html 이나 php 같은 웹페이지 파일일때 실행이 됩니다
          대화보기
          • tab키 작동
            새로 파일을 만들어서 하는 방법 즉 ctr+n 을 눌러 새로 만든 파일은 확장자가 지정이 되어 있지 않습니다

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

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

            html 이나 div 같은거 적고 tab을 누르면 작동을 할겁니다
            대화보기
            • html
              저도 이제 배우기 시작해서 확실한 답변인지는 모르겠지만 저도 그런 문제를 격어서 답글을 씁니다.
              아마도 탭키를 치기전에서 <html>이 상태에서가 아닌 <html 이 상태에서 탭키를 눌러야 자동완성 기능이 작동 하는 것 같습니다.
              대화보기
              • Tab 키가...
                마우스커서를 제일 맨끝에다 두고 'Tab' 을 눌렀는데 자동완성이 안되고 커서만 도망 가드라구요....

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

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

                왜그럴까요...?
              • kipid
                이 plug-in은 html 편집할 때 너무 좋은거 같아요.
              • 신기해
                커서를 맨끝에 두고 tab을 눌러보셨나요..? 커서가 맨 끝에 있고 그때 탭을 눌러야 작동이 될껍니다.
                대화보기
                • 젠장
                  emmit 설치 다 했는데 왜 tab 누르면 그냥 tab만 될까요.ㅠㅠ html 하고 tab 눌렀는데 걍 커서만 이동한다능..
                • 상상초월
                  emmet 자동완성 기능중에 궁금한게 있습니다.
                  열고 닫는 태그를 1개로 해결할수 있는 source 태그나 track 태그 같은게 있는데요
                  'source'를 입력하고 탭키를 누르면 <source></source> 이렇게 완성 되는데 -> <source /> 이렇게 완성하는 방법이 없을까요?
                • egoing
                  li 코드는 ul이나 ol 코드 둘 중의 하나가 부모로 와야 합니다.

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

                  ul>li
                  ol>li

                  :)
                  대화보기
                  • Username
                    당연히 작동 안하죠
                    div안에 누가 li를 넣나요..
                    웹표준에 대해 공부하실 필요가 있습니다..
                    대화보기
                    • 레드독
                      emmet을 설치했는데 제대로 작동아 안되는 이유를 모르겠습니다.
                      현상은
                      1.
                      div>li [tab] <-빈칸없이 Tab했습니다.
                      하면
                      div><ul></ul>
                      로 나옵니다. 즉 마지막 커서가 위치한 ul의 끝에서 ul에 대해서만 zen coding이 동작합니다.
                      2.
                      div>li*3 [tab]
                      하면 zen coding이동작하지 않습니다.
                    • 누렁이
                      emmet덕에 sublime을 더 즐겁게 쓰고 있어요 :) 좋은강의 감사합니다!
                    버전 관리
                    egoing
                    현재 버전
                    선택 버전
                    graphittie 자세히 보기