HTML Emmet(자동완성)

오늘은 자동완성 기능을 사용해보려고 한다. Emmet은 HTML과 CSS에 대한 자동완성 기능이다.

먼저 실습을 위해 하나의 html 파일을 하나 만들어주고, ! 엔터로 기본 구조를 만들어준다. 여기에 body부분에 상위>하위>~ 이런식으로 적으면 상위 아래 하위의 태그를 만들어주게 된다. div>ul>li이런 식으로 자식태그를 추가해줄 수 있다.
추가로 div아래 자식 태그를 ul과 li로 만들어줄 수도 있다. div>ul+li를 하게 되면 생성된다.

이번에는 자식태그를 원하는 만큼 만들 수 있는 방법이다. div>ul+li*3을 하게 되면 자식 태그가 3개 만들어진다. 이때 주의할 점은 ul과 li가 둘 다 3개 만들어지는 것이 아니라 가장 붙어있는 li만 3개 만들어진다는 점이다.

다음으로 span#item를 입력하면 아이디인 <span id="item"></span>를 생성해준다. 아이디를 item으로 지정해준다.
#item만 작성하게 되면 기본적으로 div로 생성해준다.

마찬가지로 span.title을 입력하면 이번에는 클래스인 <span> class="item"</span>이 생성되는데.title를 입력하면 div로 생성한다.

마지막으로 p태그 컨테이너를 지정해주는데, p.container{Hello World~!}는 <p class="container"?Hello World"</p>를 출력해준다.
변형으로 이렇게 작성하면p.container{item$}*5 item다음 숫자를 1씩 증가시키며 5번 나오게 된다.