오늘의 학습 목표

• Emmet을 활용할 수 있다.
• 자주 사용되는 HTML 요소와 그 특징을 다섯 가지 이상 설명할 수 있다.
• 웹페이지의 구조를 보고 어떤 시맨틱 요소를 활용하는 것이 바람직한지 말할 수 있다.

Emmet

정체가 무엇인가요?

HTML 요소를 축약형으로 작성하여 자동완성하는 플러그인이다. 이 기능을 사용하면 반복적인 코드 타이핑을 줄일 수 있어 HTML 작성 속도가 크게 향상된다.

예전에 엘리님이 언급한 적이 있는데, 당시에는 코드를 이해하는 것에 바빠 새로운 문법(?)을 익힐 엄두가 나지 않았다. 이제는 열린 마음으로 받아들일 준비가 되었으므로 방법을 정리한다.

기호 사용법

1. 텍스트({}) / 반복(*)

• * : n회만큼 반복하여 작성
• {} : 태그 사이에 들어갈 content를 작성

div{this is content}*10

2. 클래스(.) / 아이디(#)

• class, id 생성 시 사용
• . : 기호 뒤에 오는 이름을 가진 class를 생성
• # : 기호 뒤에 오는 이름을 가진 id를 생성

#login
<div id="login"></div> // 결과

h1.title
<h1 class="title"></h1> // 결과

div.password.blue.round
<div class="password blue round"></div> // 결과

3. 속성([])

input[type="checkbox"]

// 결과
<input type="checkbox">

4. 연속 작성(+)

• 여러 개의 태그를 연속적으로 작성

#login+h1.title+div.password.blue.round

// 결과
<div id="login"></div>
<h1 class="title"></h1>
<div class="password blue round"></div>

5. 자식 레벨 생성(>)

• 자식 레벨에 생성될 태그를 작성

h1>section.red>div.content

// 결과
<h1>
  <section class="red">
    <div class="content"></div>
  </section>
</h1>

6. 넘버링($)

• $ 자리를 숫자로 치환하여 1부터 순차적으로 생성

div.username$*5

// 결과
<div class="username1"></div>
<div class="username2"></div>
<div class="username3"></div>
<div class="username4"></div>
<div class="username5"></div>