[HTML] emmet 활용법

728x90

emmet이란 html이나 css 작성할 때 시간을 단축해주는 확장 플러그인

vscode에는 기본적으로 적용되어 있음

1. 기본 폼 만들기

! + tab 키를 누르면 자동으로 아래와 같은 기본 폼이 만들어진다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>페이지 제목</title>
</head>
<body>
    
</body>
</html>

2. css 파일 연결하기

link:css 라고 입력하고 tab키 누르면 자동으로 스타일시트 코드가 완성

meta:utf 도 가능함

<link rel="stylesheet" href="style.css">

meta:utf 도 가능함

3. 클래스 이름 쉽게 만들기

: div, nav 등 쓰고자 하는 태그명뒤에 .클래스명 + tab을 입력하면 자동으로 태그가 생성

예를 들면 .name + tab키 하면 아래 결과가 나옴

<div class="name"></div>

4. 하위 태그 만들기

태그 이름 > 클래스 > 아이디 > 칠드런 순

헤더 안에 group을 만들려면

header > hgroup + tab키를 입력하면 됨

만약 header안에 hgroup 그 다음 h2 , h4도 쓰고 싶다면?

header>hgroup>h2+h4 그리고 tab키

다른 예시로 header.super>hgroup#awesome>h2.hello+h4.bye 를 하게 되면?

 <header class="super">
      <hgroup id="awesome">
        <h2 class="hello"></h2>
        <h4 class="bye"></h4>
      </hgroup>
    </header>

이런 결과가 나오게 된다! 클래스는 "."을 사용하고 아이디는 "#"을 붙여주면 됨

근데 나는 여기에 text도 추가하고 싶다면? header.super>hgroup#awesome>h2.hello{Hello!}+h4.bye

이렇게 클래스 옆에 { } 브라켓을 열고 텍스트 쓰고 닫으면 됨

    <header class="super">
      <hgroup id="awesome">
        <h2 class="hello">Hello!</h2>
        <h4 class="bye"></h4>
      </hgroup>
    </header>