Emmet | 웹 개발 입문

유튜브 '짐코딩 GYM CODING' 님의 강의를 통하여 공부한 것을 기록합니다.

✍🏻 HTML 강의 Ep03 - Emmet | 웹 개발 입문 | 함께 웹 개발에 입문해 보는 건 어떨까요?

https://youtu.be/44pQ6p5pHX8?si=scE6LTlvzBuhI4Y2

 

 

 

Emmet

: 자동 완성 기능을 제공하여 작동 시간을 아주 빠르게 단축시켜 주는 확장 기능

 

div>ul>li> 입력 후 enter혹은tab

 

자동완성 시켜줌

 

div>ul+ol+div 후 enter

 

완성!

div>ul>li*3 후 enter

 

li 태그 세 번 반복돼서 출력됨

 

태그에는 그 태그의 고유 이름을 짓는 id라는 속성을 사용할 수 있다

 

아이템이라는 id를 갖는 span 태그를 만들고 싶으면

span#item 후 enter

 

완성!

 

태그의 기본 값은 div이기 때문에 만약

#item하고 enter 하면 자동으로

item이라는 id를 갖는 div태그를 생성할 수 있다

 

클래스 속성을 갖는 태그를 자동완성 시켜보자

타이틀이라는 클래스를 갖는 span 태그를 생성해 보자

 

id와 마찬가지로 디폴트가 div 태그이기 때문에

title이라는 클래스를 갖는 div 태그가 자동완성된다.

 

클래스 명이 container인 p태그를 만든다

그리고 그 안에 Hello World~!라는 문구(콘텐츠)를 삽입한다

 

단순 item이라는 콘텐츠가 아닌, 뒤에 넘버링이 부여되도록 함

넘버링이 부여된 태그가 생성됨을 확인할 수 있다