1번 타자는 Emmet 단축키는 아니지만 구조부터 찬찬히 만들어 보자는 의미에서 추가..!
html 구조 만들기
! 누르고 tab키 누르면 뙇!! 뜬다는 사실은 이미 널리 알려져 있어서 패쓰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>요렇게 간편하게 뙇!!! 그치만 Emmet은 진짜 진짜 진짜로 신박한데 많이 알려져 있는거 같진 않다! 그래서 써보는 오늘의 포스팅.
자식요소는 >를 이용하기
nav>ul>li 입력하고 엔터 치면
<nav>
<ul>
<li></li>
</ul>
</nav>이런 구조가 뙇!
자매? 형제?요소는 +를 이용하기
div+p+bq 입력하고 엔터 치면
<div></div>
<p></p>
<blockquote></blockquote>>를 입력하면 부모-자식 관계가 되지만, +를 입력하면 동등한 관계로 태그가 생성됩니다!
여러개의 동일한 속성은 * 를 이용하기
ul>li*5 입력하고 엔터 치면
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>list 일일히 다 쓰는게 얼마나 귀찮게요! 원하는 개수만큼 곱해주면 끝!
id는 # class는 .
#header 입력시 <div id="header"></div>, .header입력시 <div class="title"></div>
여기서 알 수 있는 사실! div는 딱히 div라고 안 써줘도 id나 class 이름만 줘도 자동으로 적용됩니다요
text는 {}안에
a{Click me} 입력하고 엔터 치면
<a href="">Click me</a> Click me라는 text를 클릭시 링크이동하는 anchor 태그가 뙇!
$ 사인으로 숫자 매기기
ul>li.item$*5 입력하고 엔터 치면
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>짠~ $사인이 있는 곳에 번호가 자동으로 생겼슴돠 그렇다면 응용문제…
h$[title=item$]{Header $}*3 이걸 치면 뭐가 나올까요?
정답은…
두
구
두
구
두
구
<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>Emmet 치트키가 편해진다면 코드 칠때 진짜 편할거 같지 않나요?ㅋㅋ 더 자세한 문법은 https://docs.emmet.io/cheat-sheet/ 요기 들어가시면 예시와 함께 다 나와있습니다!!
안그래도 코드치는데 손가락을 많이 혹사시키는데… 단축키 쓰면 건강지수도 2% 정도 올라가고.. 일단 멋있어보입니다 ㅎ
연습만이 살길!!!!