[html&css] html 태그 쉽게 작성하는 법 : 약어 사용법 (Emmet Abbreviation)

VS Code에는 약어를 이용해서 코드를 빠르게 생성할 수 있는 기능이 내장되어 있어요. 약어 사용법을 같이 익혀볼까요? 약어 입력 후 Tab키나 Enter키를 누르면 태그가 자동으로 생성돼요.

 

HTML 약어

 

✅ 태그 생성하기

태그 이름을 입력한 후 Tab키 누르면 좌우 <> 입력하지 않고 빠르게 코드 생성 가능

약어	생성된 태그
header	<header></header>

 

✅ 아이디명, 클래스명 생성

#(샵)은 아이디를 의미

div#아이디명

약어	생성된 태그
div#container	<div id = "container"></div>

 

✅ 자식요소와 함께 생성

.(점)은 클래스명 의미

>는 자식요소 의미

중괄호 { } 안에는 태그 안에 생성될 내용(Content) 입력

 

약어	생성된 태그
div.logo > a {logo}	<div class = "logo"><a href ="">logo</a></div>

 

✅ 형제요소 생성

+는 형제 요소 생성

약어	생성된 태그
p+p	<p></p> <p></p>
div.item+div.item	<div class="item"></div> <div class="item"></div>

 

✅ 속성의 값 생성

속성명은 대괄호 [ ] 안에 속성명과 같은 값을 이용하여 생성 가능

약어	생성된 태그
td[colspan=2]	<td colspan="2"></td>
input[type=text value]	<input type="text" value="">

 

✅ 개수 지정

- 별표 * 다음에 생성할 태그의 개수를 지정- 달러사인 $ 으로 연속되는 번호 생성 가능

약어	생성된 태그
ul.news-list>li.item*3	<ul class="news-list">     <li class="item"></li>     <li class="item"></li>     <li class="item"></li> </ul>
h2{title$} * 3	<h2>title1</h2> <h2>title2</h2> <h2>title3</h3>

 

 

 

CSS 약어

 

하이픈 - 으로 연결되는 속성은 두문자만 적으면 대부분 작동

예) font-style은 fs만 입력하면 됨

약어	생성된 태그
@i	@import url();
@f	@font-face{     font-family: ;     src: url(); }
pos:r	position: relative;
pos:a	poisition: absolute;
pos:f	position: fixed;
fl	float: left;
df	display: flex;
dn	display: none;
m:a	margin: auto;
fz6	font-size: 16px;
lh32px	line-heightL: 32px;
bgp0:20	background-positioni: 0 20px;