본문 바로가기
HTML CSS

[HTML / CSS] Chapter 4. Emmet(에밋)

by nyeoo 2024. 2. 15.

1. Emmet 이란?

  • 기존에는 Zen Coding(젠코딩) 이라는 이름으로 사용됨
  • 이후에는 Google 에서 이 도구를 수용하면서 emmet 이라는 이름으로 변경
  • HTML 생산성 향상 도구(HTML 코딩을 빠르게 하기 위한 플러그인)
  • CSS 선택자 사용(CSS3 지원)
    → HTML 을 CSS 선택자를 통해 검색하는 방법 대신 CSS 선택자를 통해 HTML 을 생성하도록 하는 개념

2. 환경 설정

  • 대부분의 툴에서 지원하고 있음 (※ 대부분의 편집기 내에서의 액션 키 : Ctrl + E)

① http://https://emmet.io/
→ 메인 페이지 좌측에 있는 Download 메뉴 클릭

 

② https://emmet.io/download/ 페이지로 이동
→ Download 리스트들 중 본인이 사용할 편집툴의 메뉴 클릭

 

③ Installation 항목에서 제시한 순서대로 진행

⚠️ 유의사항 : Emmet 플러그인 설치 이후 이클립스 기본 단축키와 중복되는 항목이 존재함 → 단축키 재설정 (Ctrl + D) (이클립스 > Window(윈도우) > Preparences(설정) > General > Keys)

3. 사용 예

1) 태그 선택자

div
<div></div>

<div>넣을 내용</div>

div{넣을 내용}
<div>넣을 내용</div>

a
<a href="http://www.naver.com">네이버</a>


img
<img src="" alt="" />

table
<table></table>

span
<span></span>

p
<p></p>

2) 아이디 선택자

div#box
<div id="box"></div>

div#box{kkk}
<div id="box">kkk</div>

#box
<div id="box"></div>

#box{1234}
<div id="box">1234</div>

3) 클래스 선택자

div.items
<div class="items"></div>

div.items{aaa}
<div class="items">aaa</div>

.items
<div class="items"></div>

.items{bbb}
<div class="items">bbb</div>

4) 조합

div#box.items
<div id="box" class="items"></div>

div#box.items.unit.control
<div id="box" class="items unit control"></div>

div#box.items.unit{aaa}
<div id="box" class="items unit">aaa</div>

div.items.unit{bbb}
<div class="items unit">bbb</div>

5) 속성 선택자

div[title]
<div title=""></div>

div[title='test']
<div title="test"></div>

a[href='www.naver.com' title='네이버']
<a href="www.naver.com" title="네이버"></a>

a[href='www.naver.com' title='네이버']{사이트로 이동}
<a href="www.naver.com" title="네이버">사이트로 이동</a>

6) PCDATA

div{박스}
<div>박스</div>

a{홈페이지로이동}
<a href="">홈페이지로이동</a>

p{문단내용기술}
<p>문단내용기술</p>

7) 반복 생성

div*5
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

img[src=images/dog.jpg]*5
<img src="images/dog.jpg" alt="" />
<img src="images/dog.jpg" alt="" />
<img src="images/dog.jpg" alt="" />
<img src="images/dog.jpg" alt="" />
<img src="images/dog.jpg" alt="" />

.box*5
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

.box{content}*5
<div class="box">content</div>
<div class="box">content</div>
<div class="box">content</div>
<div class="box">content</div>
<div class="box">content</div>

#box$.box{content}*5
<div id="box1" class="box">content</div>
<div id="box2" class="box">content</div>
<div id="box3" class="box">content</div>
<div id="box4" class="box">content</div>
<div id="box5" class="box">content</div>

img[src=images/obj$.jpg]*5
<img src="images/obj1.jpg" alt="" />
<img src="images/obj2.jpg" alt="" />
<img src="images/obj3.jpg" alt="" />
<img src="images/obj4.jpg" alt="" />
<img src="images/obj5.jpg" alt="" />

h1*6
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>

h$*6
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

h${제목$}*6
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>

8) 연속 생성

div+p
<div></div>
<p></p>

h1{제목}+p{내용}*5
<h1>제목</h1>
<p>내용</p>
<p>내용</p>
<p>내용</p>
<p>내용</p>
<p>내용</p>

(h1{제목}+p{내용}*2)*5
<h1>제목</h1>
<p>내용</p>
<p>내용</p>
<h1>제목</h1>
<p>내용</p>
<p>내용</p>
<h1>제목</h1>
<p>내용</p>
<p>내용</p>
<h1>제목</h1>
<p>내용</p>
<p>내용</p>
<h1>제목</h1>
<p>내용</p>
<p>내용</p>


div+a+div+p+div+img
<div></div>
<a href=""></a>
<div></div>
<p></p>
<div></div>
<img src="" alt="" />

9) 하위 생성

table+
<table>
    <tr>
        <td></td>
    </tr>
</table>


ul+
<ul>
    <li></li>
</ul>

ol+
<ol>
    <li></li>
</ol>

select+
<select name="" id="">
    <option value=""></option>
</select>

10) 자식 생성

div>p
<div>
    <p></p>
</div>

div>p*5
<div>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>

(div>p*2)*5
<div>
    <p></p>
    <p></p>
</div>
<div>
    <p></p>
    <p></p>
</div>
<div>
    <p></p>
    <p></p>
</div>
<div>
    <p></p>
    <p></p>
</div>
<div>
    <p></p>
    <p></p>
</div>

table#tbl>tr*5>td*3
<table id="tbl">
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

table#tbl>tr*3>td.label_td.content
<table id="tbl">
    <tr>
        <td class="label_td content"></td>
    </tr>
    <tr>
        <td class="label_td content"></td>
    </tr>
    <tr>
        <td class="label_td content"></td>
    </tr>
</table>

table#tbl>tr*3>td#label$_td.content
<table id="tbl">
    <tr>
        <td id="label1_td" class="content"></td>
    </tr>
    <tr>
        <td id="label2_td" class="content"></td>
    </tr>
    <tr>
        <td id="label3_td" class="content"></td>
    </tr>
</table>

table#tbl>(tr>th*3)+((tr>td*3)*5)
<table id="tbl">
    <tr>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

11) 더미 키워드

lorem
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Facere repellendus atque suscipit minus nemo esse necessitatibus
enim dolores voluptatum dolorem mollitia ullam voluptatibus unde?
Tempora iusto cum dignissimos. Dolor quibusdam.

lorem
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Ex soluta autem id recusandae ipsum animi!
Assumenda magni autem porro veritatis dignissimos nemo
blanditiis voluptates quam temporibus inventore sunt non nesciunt?


table>(tr>th*2)+(tr>(td{word}+td{lorem}))*3
<table>
    <tr>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <td>word</td>
        <td>lorem</td>
    </tr>
    <tr>
        <td>word</td>
        <td>lorem</td>
    </tr>
    <tr>
        <td>word</td>
        <td>lorem</td>
    </tr>
</table>


방법 ①
table>(tr>th*2)+(tr>(td{word}+td{lorem}))*3
<table>
    <tr>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <td>word</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit eveniet repellat est repellendus perferendis at ipsa consectetur qui delectus itaque iure explicabo quod eum cumque non ex amet cum voluptatem?</td>
    </tr>
    <tr>
        <td>word</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero quo porro ex at aliquam sit quas vel soluta optio molestiae quibusdam labore itaque hic maxime veritatis possimus aperiam sint ullam.</td>
    </tr>
    <tr>
        <td>word</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias libero voluptatum repellat sed consectetur soluta consequuntur et sunt cumque eligendi non deleniti placeat autem fugiat officiis facere pariatur exercitationem unde.</td>
    </tr>
</table>

방법 ②
table>(tr>th*2)+(tr>(td{word}+lorem(td{desc})))*3
<table>
    <tr>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <td>word</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero quam deserunt ducimus ipsam. Ut assumenda delectus amet quisquam laboriosam esse quod iste consectetur illo tempora! Dicta fugiat eaque non temporibus.</td>
    </tr>
    <tr>
        <td>word</td>
        <td>Fugit impedit consectetur excepturi nam dignissimos consequuntur iste aliquam commodi magni neque quod perspiciatis numquam deserunt odit autem amet necessitatibus nemo rerum mollitia nobis itaque reprehenderit minima fuga eum placeat?</td>
    </tr>
    <tr>
        <td>word</td>
        <td>Soluta error rerum dolorum architecto quaerat laborum eligendi inventore fuga veritatis quia culpa pariatur sunt commodi tempore non optio qui facilis dignissimos quo ipsum numquam repudiandae blanditiis dolorem officia alias?</td>
    </tr>
</table>

br*20
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
--> 문법을 엄격하게 규정한 HTML 은 여는 태그가 있으면 닫는태그가 있어야하고,
    단독태그가 존재하기 때문에 과거에 쓰여진 코드에서는 열고 닫고를 한번에 했던 코드들이 존재할 수 있다.

'HTML CSS' 카테고리의 다른 글

[CSS] Chapter 3. CSS 선택자(Selector) 및 선언 방법  (1) 2023.12.17
[HTML] Chapter 2. HTML 기초 - 태그  (0) 2023.12.11
[HTML] Chapter 1. HTML 개요  (0) 2023.12.11

관련글

티스토리툴바