[Emmet] Emmet 빠르게 마크업 하기 1

Visual Studio Code에서 HTML 마크업을 할 때 

! 를 입력하면 emmet 이라는 내용이 나오면 엔터를 치면 HTML 기본 마크업이 실행된다.

!를 입력

HTML 기본 마크업

 

- div class 를 작성할 때는. 클래스 이름을 입력한다.

.class Name

div class 생성

- div id 를 만들고 싶을 때는 #id이름을 입력한다.

id name 입력

div id 생성

 

- div 안에 ul 안에 li를 생성하고 싶을 때는 > 마크업으로 진행

div>ul>li

div>ul>li 실행

- div 안에 ul 과 ol를 나란히 만들고 싶을 때는 +를 이용

div>ul+ol 입력

div>ul+ol 실행

- ul 안에 li를 7개 만들고 싶다면 * 사용

ul>li*7 입력

ul>li*7 실행

ul 안에 li가 있는데 ul 과 나란히 ol을 넣고 싶을 때는 ^ 를 사용한다.

ul>li^ol 입력

ul>li^ol 실행

 

*드림 코딩 엘리님의 youtube를 보고 개인적인 공부를 위한 포스팅입니다 ^^

원본을 보실 분은 밑에 클릭 해 주시면 돼요 ^^

https://www.youtube.com/watch?v=m7wsrVQsVjI&t=446s