🪄🎩Emmet단축키 자동생성 활용

!    →HTML템플릿자동생성

div.className  →<div class="className"></div> 자동생성

div#id →<div id="idName"></div>

div>ul>li →    
<div>
        <ul>
            <li></li>
        </ul>
    </div>

div>ol+ul →    
    <div>
        <ol></ol>
        <ul></ul>
    </div>

div.wrap>ul>li*3.item →
<div class="wrap">
    <ul>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
    </ul>
</div>

div.wrap>(ul>li*3.item)+ol>li*3.item  →
    <div class="wrap">
        <ul>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
        </ul>
        <ol>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
        </ol>
    </div>

ul>li*3>a[href="#"] →
<ul>
    <li><a href="#">홈</a></li>
    <li><a href="#">제품</a></li>
    <li><a href="#">연락처</a></li>
</ul>

    header>nav>ul>li*3>a[href="#"]  →
    <header>
        <nav>
            <ul>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
            </ul>
        </nav>
    </header>

📌 설명

Emmet 코드의미변환 결과

ul>	<ul> 생성	<ul>
li*3>	<li>를 3개 생성	<li>...</li> 3개
a[href="#"]	<a> 태그 생성 & href="#" 속성 추가	<a href="#">...</a>

 

ul.nav-menu> li*3 > a[href="#"] →
<ul class="nav-menu">
    <li><a href="#">홈</a></li>
    <li><a href="#">제품</a></li>
    <li><a href="#">연락처</a></li>
</ul>

 

---

✅ CSS에서 자주 쓰는 Emmet 단축어

1️⃣ 기본 속성

Emmet 입력 변환 결과

w100	width: 100px;
h100	height: 100px;
m10	margin: 10px;
p20	padding: 20px;
bgc#f00	background-color: #f00; (빨강)
c#333	color: #333; (텍스트 색상)

📌 예제

div {
    w100; /* width: 100px; */
    h50;  /* height: 50px; */
    bgc#f00; /* background-color: red; */
}

🔹 입력 후 Tab 또는 Enter 키 누르면 자동완성! 🚀

---

2️⃣ margin & padding (여러 값)

Emmet 입력 변환 결과

m10-20	margin: 10px 20px;
m10-20-30-40	margin: 10px 20px 30px 40px;
p5-10	padding: 5px 10px;

📌 예제

.box {
    m10-20; /* margin: 10px 20px; */
    p5-10;  /* padding: 5px 10px; */
}

---

3️⃣ display, position, border, flex 관련

Emmet 입력 변환 결과

d	display: block;
dib	display: inline-block;
df	display: flex;
jc-sb	justify-content: space-between;
ai-c	align-items: center;
pos-a	position: absolute;
pos-r	position: relative;
b1-s#000	border: 1px solid #000;

📌 예제

.flex-container {
    df;       /* display: flex; */
    jc-sb;    /* justify-content: space-between; */
    ai-c;     /* align-items: center; */
}

---

4️⃣ font, text, opacity

Emmet 입력 변환 결과

fs20	font-size: 20px;
fw700	font-weight: 700;
ta-c	text-align: center;
lh1.5	line-height: 1.5;
o0.8	opacity: 0.8;

📌 예제

h1 {
    fs20;  /* font-size: 20px; */
    fw700; /* font-weight: 700; */
    ta-c;  /* text-align: center; */
}

---

🎯 정리

🔹 Emmet을 사용하면 CSS 코드도 빠르게 작성 가능!
🔹 Tab 또는 Enter 키를 눌러 자동완성
🔹 자주 쓰는 w100, m10-20, df 같은 단축어 활용

---