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. 김윤아
    수강완료~
  2. JustStudy
    고맙습니다
  3. jade
    전재한다 -> 전제한다
    인것같습니다~ ^^;;
  4. 서브라임초보
    Emmet 페키지가 설치된 후에 Bootstrap 3 Snippets 페키지를 설치 하면 Emmet 만 작동하고 Bootstrap 3 Snippets 은 작동하지 않는 현상이 생겨서 Emmet 페키지를 제거했더니 정상 작동이 되네요. 두 페키지를 모두 사용할 수 있는 방법은 없을까요?? 고수님들의 코멘트 부탁드립니다. (참조 : https://github.com......gin)
  5. 나그네
    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 자세히 보기