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. ZZYYTT
    http://www.mbtshoesonline.com
    http://www.kevindurant-shoes.us.com
    http://www.yeezy-boost.us.com
    http://www.goyardbags.us
    http://www.katespadehandbags-outlet.us.com
    http://www.yeezy-shoes.org.uk
    http://www.balenciaga.us.com
    http://www.ultraboost.us.com
    http://www.longchamphandbagsoutlets.com
    http://www.yesyeezy.shop......tml
    http://www.kd11.us
    http://www.adidas-tubular.us.com
    http://www.mlbjerseys.in.net
    http://www.yeezyboost-350v2.us.com
    http://www.jordan6.us.com
    http://www.supremeclothing.us
    http://www.balenciagashoes.us.org
    http://www.airmax90.us.org
    http://www.yeezyshoesuk.com
    http://www.goldengoosesneakers.us
    http://www.yeezy-boost350.us.com
    http://www.calvinkleinoutlet.us.com
    http://www.lebronjames-shoes.us.com
    http://www.supremehoodie.us.com
    http://www.yeezysuk.com
    http://www.yeezyboost.in.net
    http://www.goyardhandbags.us.com
    http://www.hermesbelts.com
    http://www.michael-kors-handbags.org.uk
    http://www.balenciagashoes.us.com
    http://www.coachoutletstorefactory.com
    http://www.jordan13.us.com
    http://www.rolex-replica.us.com
    http://www.hermes-belt.us.com
    http://www.coachoutletssale.com
    http://www.nhljerseysshop.us.com
    http://www.yesyeezy.shop......tml
    http://www.kyrie3.us.com
    http://www.michaelkors-outletonlines.us.com
    http://www.nike-shox.us.com
    http://www.cheap-airjordans.us.com
    http://www.jordanssneakers.us.com
    http://www.nikejordans.us.com
    http://www.nikebasketballshoes.us.com
    http://www.yesyeezy.shop
    http://www.adidasultraboost.us.org
    http://www.jordan11retro.us.com
    http://www.chromeheartsstore.us
    http://www.goldengoose.us.com
    http://www.paulgeorgeshoes.us.com
    http://www.yeezy-500.us.com
    http://www.michaeljordanshoes.us.com
    http://www.adidas-nmds.us.com
    http://www.nikeairforce1.us.com
    http://www.redbottom-shoes.us.com
    http://www.adidasstansmith.uk
    http://www.goldengoose-sneakers.com
    http://www.lebron16.us.com
    http://www.hermeshandbags.us.org
    http://www.adidasnmds.com
    http://www.offwhite.us.com
    http://www.yeezysshoes.us.com
    http://www.airjordanretro.uk
    http://www.lacostepolo.us.com
    http://www.toryburchs.us
    http://www.adidaszxflux.com
    http://www.monclerjackets.us
    http://www.yeezy-shoes.org
    http://www.long-champ.us.com
    http://www.kd11.us.com
    http://www.lebron16.us
    http://www.filashoes.org
    http://www.goyard-handbags.us.com
    http://www.hermes-birkin.us.com
    http://www.monclerjacket.net
    http://www.nikeair-max.us.com
    http://www.hardenshoes.us.com
    http://www.ferragamobelt.us.org
    http://www.converseoutlet.us.com
    http://www.chromehearts.name
    http://www.yeezy-shoes.ca
    http://www.linksoflondon.us.com
    http://www.goyardhandbags.org
    http://www.nikehuaracheshoes.us.com
    http://www.adidasiniki.us
    http://www.lacosteonlineshop.us.com
    http://www.jordanshoes.org.uk
    http://www.yesyeezy.shop/adidas-yeezy-desert-rat-500-blush-db2908-p-425.html
    http://www.caterpillarboots.us.com
    http://www.canada--goose.co.uk
    http://www.nike-hyperdunk.us.com
    http://www.guccibelt.us.com
    http://www.off-whiteshoes.us.com
    http://www.bape-hoodie.us.com
    http://www.nikefoamposite.us.com
    http://www.pandorabracelet.in.net
    http://www.outlettimberland.us.org
    http://www.kyrie4.org
    http://www.yeezyboost.com.co
    http://www.handbagsmichaelkors.com
    http://www.nike-roshe.us.com
    http://www.nikecortez.us.com
    http://www.goyard.us.com
    http://www.long-champhandbags.org.uk
    http://www.polosralphlaurenuk.com
    http://www.russellwestbrookshoes.us.com
    http://www.jordansshoes.us.org
    http://www.michael-korsoutlets.us
    http://www.shoesjordan.us.com
    http://www.yeezy700.us.com
    http://www.vans-outlet.us.com
    http://www.michael-kors-handbags.com.co
    http://www.goldengoose-sneakers.us
    http://www.lacostepolosshirts.com
    http://www.golden-goose.us.com
    http://www.kd-10.us
    http://www.longchamp-bags.us.org
    http://www.hermes-handbags.us.com
    http://www.yesyeezy.shop/supreme-x-nike-air-more-uptempo-varsity-redwhite-902290600-p-592.html
    http://www.hoganoutletonline.us.com
    http://www.nikepolo.us
    http://www.longchamphandbagsonlines.com
    http://www.retro-jordans.us.com
    http://www.curry5.us
    http://www.nikeairmax2018.us.com
    http://www.kobeshoes.uk
    http://www.michaelkors-outletstore.com
    http://www.nike-airmax2017.us.com
    http://www.asics-shoes.us.org
    http://www.adidasgazelle.us.com
    http://www.yeezy-boosts.us.com
    http://www.yeezyboost350v2.org.uk
    http://www.fila.us.org
    http://www.yesyeezy.shop/adidas-ultra-boost-c-82_89.html
    http://www.kobe-shoes.us.com
    http://www.lebron15.net
    http://www.hermesbelts.co.uk
    http://www.yesyeezy.shop/adidas-yeezy-boost-350-v2-beluga-solar-red-bb1826-p-422.html
    http://www.outletlacoste.us.com
    http://www.adidasshoesonline.com
    http://www.adidasstansmith.us.com
    http://www.adidasyeezys.us
    http://www.kobesneakers.com
    http://www.adidasyeezys.us.com
    http://www.jordan-retro.us.com
    http://www.goldengooseoutlet.us
    http://www.kyrieirving-shoes.us.com
    http://www.kobebasketballshoes.net
    http://www.fakerolex.us.com
    http://www.coachsonline.us.com
    http://www.coachoutletsfactory.com
    http://www.nikeairmax2019.us.com
    http://www.nikereact.org
    http://www.nikereact.us.com
    http://www.jordan12.us.com
    http://www.michaelkors-outletfactory.us.org
    http://www.vapormaxshoes.us
    http://www.jordan4.us.com
    http://www.offwhiteclothing.us.com
    http://www.birkinbag.us.com
    http://www.adidaseqts.com
    http://www.adidas-crazyexplosive.us.com
    http://www.yesyeezy.shop/adidas-yeezy-700-boost-wave-runner-b75571-p-428.html
    http://www.filas.us.com
    http://www.jordansforcheap.us.com
    http://www.yeezyboost-350.uk
    http://www.yesyeezy.shop/nike-air-max-197-sean-wotherspoon-aj4219400-p-66.html
    http://www.yeezy500.us
    http://www.outletmichael-kors.us.com
    http://www.nikeflyknit.us.com
    http://www.airmax270.us.com
    http://www.curry5.us.com
    http://www.adidas-pureboost.us.com
    http://www.curry4shoes.us.com
    http://www.valentinos.us.com
    http://www.cheapnbajerseyswholesales.us.com
    http://www.chromehearts.com.co
    http://www.bapehoodie.us
    http://www.nike-huarache.com
    http://www.adidasnmduk.com
    http://www.goldengoose-outlet.us.com
    http://www.coachoutlets.name
    http://www.offwhitexjordan1.com
    http://www.lebron16.net
    http://www.yesyeezy.shop/adidas-pharrell-williams-c-82_88.html
    http://www.yesyeezy.shop/offwhite-air-jordan-1-retro-chicago-the-ten-aa3834101-p-837.html
    http://www.yeezyboost350v2shoes.us.com
    http://www.adidasoutletonline.com
    http://www.yslhandbags.net
    http://www.yesyeezy.shop/offwhite-x-nike-air-presto-black-aa3830002-p-291.html
    http://www.air-max.us.com
    http://www.hermesonlineshop.com
    http://www.michaelkorsoutletonlineus.com
    http://www.outletonline-michaelkors.us.org
    http://www.yesyeezy.shop/balenciaga-17fw-triple-s-black-pink-women-sneaker-483523w06e38080-p-618.html
    http://www.michael--korsoutlet.us.org
    http://www.yesyeezy.shop/balenciaga-17fw-triple-s-trainer-black-red-mens-w05m23972-p-613.html
    http://www.jimmychoo-shoes.us.com
    http://www.reebokoutlet.us.org
    http://www.offwhitehoodie.us.com
    http://www.nikesneakers.us.com
    http://www.yeezy-shoes.us.org
    http://www.curry4.us.com
    http://www.adidasyeezy.co.uk
    http://www.monclersoutlet.us.com
    http://www.nfljerseys.us.org
    http://www.ferragamobelt.us
    http://www.fitflops-saleclearance.us.com
    http://www.adidassuperstar.us.com
    http://www.fila-shoes.us.com
    http://www.louboutinshoes.uk
  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 자세히 보기