Emmet 문법 | 코딩을 보다 쾌적하게

✨사람은 도구를 쓸 줄 알아야...

 지성을 가진 사람은 모름지기 도구를 쓸 줄 알아야 한다. 그리고 손가락이 휘날리는 키보드 예술의 경지라 칭할 수 있는 코딩을 함에 있어서 이 예술혼을 더욱 불태울 수 있는 보조도구가 있으리니 그것은 바로 키크론k8 Emmet 문법이라 칭하는 코드 에디터의 편의기능! 왠만한 html 에디터는 해당 기능이 기본 플러그인으로 내장되어 있으며 해당 기능을 익히면서 쾌적하게 이용해보자.

 

✨ Emmet 문법의 기본

• 태그들을 쓸때 띄워쓰면 안된다. space바 압수
• 자식요소 생성은 '>'을 이용하며 문장은 영문화권 베이스의 좌👉우 방향으로 읽는다
• div태그는 기본 베이스. div에 클래스를 넣어 생성할 경우 div.(className) 넣는것이 아닌 '.'만 넣어서 생성
• 아이디는 그대로 #
• 형제요소 생성은 '+'
• 똑같은 요소(형제든,자식이든,부모든 생성되는 무엇이든) 여러개 생성은 '*$(숫자'
  • h1,h2 등 태그에 숫자가 있는 경우에도 차례대로 여러개 생성해야 한다면  h$ 이런식으로 숫자부분을 달러로 변환
• 텍스트 요소는 중괄호 { }, href등의 attibute는 대괄호 [ ]를 이용하여 표현
  • ex) {내 이름은 코란 함정이죠}, [href="http://www.tooniverse.co.kr"] 
  • 문법 마지막이 이렇게 괄호등으로 마무리 지어질때가 있음. 이때 대개 괄호를 둘 다 쓰고 그 안에 텍스트나 attibute를 작성하는데, 이렇게 쓰고나서 엔터를 치면 문법이 실행 안됌. 이럴 경우는 괄호 마지막을 지웠다가 다시 쓰고 엔터치면 실행.

✨ 예제를 보자 (h1, p태그를 예시로)

예제	입력값	결과
태그 생성	h1	<h1></h1>
친구 생성	h1+h2	<h1><h1> <h2></h2>
자식태그 p 생성	h1>p	<h1>   <p></p> </h1>
친구들 생성	h1+h2+p	<h1></h1> <h2></h2> <p></p>
태그 속 텍스트 생성	h1{안녕}	<h1>안녕</h1>
자식태그들 생성	h1>p+p	<h1>   <p></p>   <p></p> </h1>
여섯쌍둥이 자식들 생성	h1>p*6	<h1>   <p></p>   <p></p>   <p></p>   <p></p>   <p></p>   <p></p> </h1>
ID로 'one' 지정	h1#one	<h1 id="one"></h1>
Class로 'one'지정	h1.one	<h1 class="one"></h1>
div태그의 ID로 'one' 지정	#one	<div id="one"></div>
div태그의 Class로 'one'지정	.one	<div class="one"></div>
h1~h6까지 텍스트내용 지정	h${안녕}*6	<h1>안녕</h1> <h2>안녕</h2> <h3>안녕</h3> <h4>안녕</h4> <h5>안녕</h5> <h6>안녕</h6>
a태그의 attibute를 tistory로 생성	a[href="https://www.tistory.com"]	<a href="https://www.tistoy.com"></a>
Lorem Ipsum 생성	lorem	-
Lorem Ipsum 2문단 생성	lorem*2	-
Lorem Ipsum 5어절 생성	lorem5	-