Emmet으로 HMTL, CSS 더 빠르게 작성하기 (VS Code)

기타

Emmet으로 HMTL, CSS 더 빠르게 작성하기 (VS Code)

citron031 2023. 3. 6. 08:55

Emmet이란 간단한 키워드로 많이 작성되는 HTML을 더 빠르고 손쉽게 작성할 수 있게 도와주는 것으로, 반복적으로 사용되는 Emmet을 정리, 요약하기로 하였다.

해당 키워드를 입력함으로써 VS Code에서 빠르게 HTML을 작성할 수 있다.

html:5

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

.class이름 (ex - .test-div)

<div class="test-div"></div>

아무런 태그 이름을 적지 않고 .클래스 이름만 적는다면, 해당 클래스 이름을 가지는 div가 생성된다.

tag이름.class이름 (ex - p.test-phrase)

<p class="test-phrase"></p>

만약 클래스 이름을 적지 않고 p만 입력하면, 클래스 이름이 없는 단순 p태그가 생성된다.

🥡 만약 .대신 #을 이용하여 태그를 생성하면, class가 아니라 id로 해당 값을 가지는 태그가 생성된다.

ex - p#test-phrase

<p id="test-phrase"></p>

lorem숫자 (lorem100)

때로 더미 데이터를 넣어 긴 텍스트를 갖는 페이지를 구현, 테스트할 때가 있는데 이때 자동으로 더미 텍스트를 만들어주는 emmet이다.

뒤에 작성한 숫자의 개수만큼의 단어를 자동으로 생성해준다.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempore enim fugit quis iusto officiis consequatur hic corporis debitis earum beatae, veritatis vel nihil itaque tempora cum. Aliquam porro fugiat voluptatum amet quo obcaecati dicta ipsam nihil labore corporis modi quisquam, esse similique perspiciatis voluptates natus placeat assumenda facere illo quod ducimus explicabo, nemo error aliquid. Quos vitae tempore rerum incidunt eveniet aperiam odio sunt, natus nihil laborum porro dignissimos ducimus recusandae laboriosam! Corrupti harum debitis deserunt iure minima ipsam dolorum consequuntur, rem eos accusantium unde voluptatem nulla, temporibus esse nihil blanditiis a eveniet sequi quo facilis eaque dolor facere. Facere!

link:css

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

script:src

<script src=""></script>

위와 같이 태그와 함께 :속성으로 해당 속성을 지니는 태그를 생성할 수 있다.

태그숫자 (ex - section5)

<section></section>
<section></section>
<section></section>
<section></section>
<section></section>

위와 같이 곱하기 연산을 통해서 한 번에 여러개의 태그를 생성할 수 있다.

태그>태그 (div>p)

<div>
  <p></p>
</div>

하위에 생성될 태그를 지정하여 한 번에 중첩된 태그를 생성할 수도 있다.

🎾 또한 이런 emmet은 한 번에 중첩해서 여러개를 사용할 수도 있다.

ex - .container-div#wrapper>p.inner-text*5>lorem10

<div class="container-div" id="wrapper">
  <p class="inner-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit, ullam.</p>
  <p class="inner-text">Repellendus ab repellat fugit maiores, nisi magnam. Dolores, eum cum.</p>
  <p class="inner-text">Vitae aspernatur enim saepe aperiam atque officia aliquam numquam iusto?</p>
  <p class="inner-text">Vel illum eum dolores. Voluptate sequi architecto laudantium debitis temporibus.</p>
  <p class="inner-text">Accusantium est eligendi expedita odit quos nulla repudiandae voluptate nisi?</p>
</div>

>> 🍉 뿐만아니라, emmet은 CSS에서도 사용가능한데, 다음과 같은 문법이 사용 가능하다.

다만, CSS의 emmet은 태그보다는 사용성이 떨어지는 것 같다.

m숫자 (ex - m10)

.container-div {
  margin: 10px;
}

해당 숫자만큼의 px을 가지는 margin을 할당할 수 있다.

p숫자 (ex-p5)

.container-div {
  padding: 5px;
}

해당 숫자만큼 padding을 할당한다.

w숫자, h숫자 (ex - w10%, h100)

.container-div {
  width: 10%;
  height: 100px;
}

해당 숫자만큼 width와 height를 할당할 수 있다.

단위를 적지 않으면 px, 단위를 적어주면 해당 단위로 값을 지정할 수 있다.

저작자표시