HTML 마크업을 하다보면 비슷한 태그를 여러개 써야 하는 수고로움이 많이 생긴다. 과거에 마크업을 할 때, 나는 항상 괄호 열고 쓰고 괄호 닫고를 노가다로 반복해왔는데 참 지루하고 성가시다고 여겼다.
그런데, 멋사 프론트엔드 스쿨을 통해서 emmet 문법으로 손쉽게 여러 태그를 만들어내면서 생산성을 '향상'하는 수준이 아니라 로켓을 단 수준으로 부스트업할 수 있다는 사실을 알았다.
그동안 괄호 열고 닫고 한 시간이 너무 아깝다 ^^;;;
<html>
h1
<h1></h1>
h1{hello world}
<h1>hello world</h1>
h1+p
<h1></h1>
<p></p>
h1{hello}*3
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
h1#one
<h1 id="one"></h1>
h1.one
<h1 class="one"></h1>
</html>입력할 때, emmet 문법으로 입력하고 키보드의 Tab을 누르면 자동으로 완전한 코드로 변환된다.
예컨대 'h1'을 입력하고 Tab 키를 누르면 '<h1></h1>'이 나오고, 커서는 h1 태그의 안으로 옮겨져 곧바로 입력을 할 수 있게 대기된다.
'CODE > Front-end' 카테고리의 다른 글
| [JS] 함수 선언문과 함수 표현식 (0) | 2021.12.01 |
|---|---|
| [JS] 데이터 형, 연산, 조건문과 반복문 (0) | 2021.11.30 |
| [JS] 변수 선언 (0) | 2021.11.27 |
| [HTML] HTML 마크업 한 눈에 보기 (0) | 2021.11.04 |
| [HTML] table 구성 익숙해지기 (0) | 2021.11.04 |
댓글