Sublime Text 2

서브라임 텍스트 2에 대한 수업입니다.

Sublime Text 2 서브라임 텍스트 2에 대한 수업입니다.

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. 난감..
    저도 그런식으로 작동하는데.. 어떻게 해야하나요..ㅠㅠ
    대화보기
    • 김윤아
      수강완료~
    • 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 자세히 보기