[ HTML ] Emmet 문법 정리

 

 

궁모닝 에브리원~!! ^^

 

 

---

 

 

 

오늘은 HTML을 마크업할때 VS code에서 사용하는
Emmet 문법을 정리해 볼게요

 

 

Emmet

 

---

 

• HTML 마크업을 조금 손쉽게 해줄 수있는 기능이며 알게모르게 우리가 쓰고있는 것도 있어요.
• 방법 몇가지를 소개 해 봅니다.

 

맨 하단에 Emmet 단축키를 정리해놓은 사이트를 링크 걸어 두었어요~!

 

Welcome to CODING HELL

1. VS Code에서 설정하기

Emmet 기능이 적용되지 않는다면, 아래의 화면에서 확인한다. 

- cmd + shift + p 눌러서 emmet을 검색한다.

- 첫번째 나오는 Emmet:Balance(inward)을 선택한다.

- 사용시 주의할 점은 띄어쓰기를 하지 않는다.

- 단축키를 띄어쓰기없이 입력후 Tab키를 눌러 실행한다.

 

Cmd + Shift + P 눌러서 검색하는 화면

 

 

2. 다양한 사용방법을 알아보자. css 선택자와 비슷한 개념으로 사용 할 수 있다.

 

A. HTML5  보일러 플레이트 자동완성 '!' , 'html:5'

 

- HTML 확장자를 가진 문서를 생성후 입력하면 기본 html 필수 태그들을 자동 입력해 준다.

 

B. 코드를 원하는 횟수만큼 반복해주는 ' * '

- '>'는 child 로 생성하라는 의미이다.

- 명령 : ul의 자식요소로 li 태그 4개를 생성해라

- {$}는 순번을 넣어준다.

ul > li{$} * 4

<ul>
	<li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

 

C. 텍스트 입력하려면 ' {     } ' 안에 넣는다.

- div의 child로 h2를 생성하고 뒤에 p를 넣어라. 

- {}안의 내용은 입력할 컨텐츠 텍스트

 div>h2{hello}+p{world} 을 입력후 Tab키로 emmet 실행


<div>
    <h2>hello</h2>
    <p>world</p>
 </div>

 

D.  그룹으로 묶는 ' ( ) '

- ' ( ) ' 

- {}안의 내용은 입력할 컨텐츠 텍스트

- 필수속성은 내가 넣지 않아도 자동으로 생성되며, tab키를 눌러 자동으로 입력하게 해준다.

<!-- 단축키 아래 입력 -->
ul>(li>a{$})*4 

<!-- 결과 : href의 속성값에 커서가 가며, tab키를 눌러가며 입력을 마무리 한다. -->
<ul>
  <li><a href="">1</a></li>
  <li><a href="">2</a></li>
  <li><a href="">3</a></li>
  <li><a href="">4</a></li>
</ul>

 

- HTML5부터 우리는 웹문서를 시작할때에 DTD선언부에서 HTML의 버전과 타입을 적지 않게 되었습니다.

- 하여, 현재는 HTML문법과 XHTML문법 둘다 사용이 가능합니다.

- 하지만, 프레임웤이나 상황에 맞게 한가지로 통일하여 쓰는 것을 권합니다.

 

 

E.  속성입력하기  ' [   ] '  와 클래스, 아이디명 직접주기

- html의 필수 속성이 아닌 것은 직접 입력해주면 된다.

- 속성에 차례대로 autofocus되어 tab키를 이동하면서 입력할 수 있게 해준다.

- 태그를 적으면서 .클래스명 또는 #아이디명을 붙이면 해당 속성이 붙는다.

header.page-header>div[class]>nav.gnb>ul>(li>a[title])*2


<header class="page-header">
    <div class="">
        <nav class="gnb">
            <ul>
                <li><a href="" title=""></a></li>
                <li><a href="" title=""></a></li>
                <li><a href="" title=""></a></li>
            </ul>
        </nav>
    </div>
</header>

 

 

 

F.  메뉴구조 만들기 따라해보기

- 자주쓰는 메뉴구조를 따라해 보세요

 nav.gnb>ul>(li>a{menu$})*4

<nav class="gnb">
    <ul>
        <li><a href="">menu1</a></li>
        <li><a href="">menu2</a></li>
        <li><a href="">menu3</a></li>
        <li><a href="">menu4</a></li>
    </ul>
</nav>

 

 

 

 

---

 

 

자, 어렵지 않아요~ 우리 영혼 챙겨가며 계속 공부해봅시다잉~~~!

 

 

본 문서는 제가 오랫동안 일해왔던 내용을 강의와 책편집을 위해 정리해둔 내용입니다.

힘들게 만든 만큼 공부하시는 분들께 도움이 되면 좋겠습니다.

제 피드를 공유하거나 링크를 해주시는것은 감사합니다~

 

 

 

본 블로그에 사용된 기본 스티커 외의 이미지들 또한 직접 제작한 것들입니다.

하여 출처없이 이미지나 내용만을 카피해서
포스트를 쓰신다거나 하는것은 하지말아주세요 ^^

감사합니다.

  

 

 

[ 관련사이트 소개 ]

https://docs.emmet.io/cheat-sheet/

Cheat Sheet