비주얼 스튜디오 코드 (Visual Studio Code) - Emmet 을 이용해 html 빠르게 작성하기

html을 빠르게 작성할 수 있는 Emmet 

Emmet 는 VS Code 에 기본으로 내장되어 있다.

 

https://emmet.io/

 

◑  <div> 태그 자동작성

div  tab 키를 누르면 

 

 

 

◑  <div> 태그에 class나 id 태그를 자동 할당하기

class : div.class 또는 .class  tab 키

 

 

id : div#id 또는 .id  tab 키

 

 

 

◑  부모, 자식, 형제 관계의 노드를 쉽게 작성하기

• 부모, 자식 노드

     div 안에  ul  그 안에 li 아이템을 만들경우

     div>ul>li  tab 키 

 

 

 

• 형제 노드

       div 안에 ul 와 ol 를 만들 경우

       div>ul+ol  tab 키

 

 

◑  아이템 반복해서 만들기

ul 안에 li 를 5번 반복해서 만들경우

ul>li*5  tab 키

 

 

 

◑  꺽쇠기호 (^)를 사용해 상위 노드를 앞 내용을 지우지 않고 만들 수 있다.

div 안에 ul 을 만들고 li 아이템을 넣고,

그런데 생각해보니 ul 다음에 ol 을 넣고 싶은 경우 

 

div>ul>li^ol (^ 는 li 의 부모 옆에 형제 노드를 만든다)  tab 키

ul 옆에 ol 이 생기는 것을 볼 수 있다.

 

 

 

◑  괄호 { } 를 이용해 태그 안에 텍스트 입력하기

p 태그 안에 world 텍스트를 괄호{ } 를 이용해 작성하기

p{world}  tab 키 

 

 

 

 

◑  $ 을 이용해 자동으로 번호 매기기

p 태그 안에 class 넣고

class 에 숫자를 매기고 텍스트 item 에도 숫자를 넣을 경우

그리고 이것을 5번 반복

 

p.class${item$}*5 

 

 

 

 

◑ lorem 을 이용해 더미용 텍스트 생성

 

? 더미용 텍스트가 뭔지는 추후 확인 할 예정?

 

p>lorem

 

입력되는 단어의 숫자도 정할 수 있다

4개의 단어만 입력하길 원할 경우

p>lorem4

 

 

참고 : 드림코딩 by 엘리 https://www.youtube.com/watch?v=m7wsrVQsVjI