728x90
Emmet이란???
강력한 자동완성 기능 등으로 HTML 작성 속도를 크게 향상시켜주는 플러그인
VSCode에 자동 내장 설치되어 있음
걍 VSCode에서 쓰면 됨! 개꿀임
Emmet Docs임
https://docs.emmet.io/abbreviations/syntax/
Abbreviations Syntax
Abbreviations Syntax Emmet uses syntax similar to CSS selectors for describing elements’ positions inside generated tree and elements’ attributes. Elements You can use elements’ names like div or p to generate HTML tags. Emmet doesn’t have a predef
docs.emmet.io
Emmet 사용법
도움이 될만한 문법들을 가져와봄한번 쭈욱 보면 어느정도 감이 잡힐거임
* 얘는 곱하기> 얘는 자식+ 얘는 형제() 얘로 그룹핑{} 얘는 안에 내용(문자열, text) 쓰는거$ 는 숫자?(자동 넘버링), $$$는 세자리.클래스명 가능#아이디명 가능lorem6 은 더미 텍스트 6어절-> 뭐 암튼 이런 식임
주석에 있는 걸 치면 주석 밑에 부분처럼 나옴!
<!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>
<!-- block tag : div 4개 생성 (div*4) -->
<div></div>
<div></div>
<div></div>
<div></div>
<!--목록태그: ol, ul, li -->
<!-- -> ol>li*5 -->
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<!-- -> ul>li*3-->
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<!-- 테이블 : 3행 5컬럼 (table>tr*3>td*5)-->
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<!-- + 형제 노드 -->
<!-- h1+div+p+h3 -->
<h1></h1>
<div></div>
<p></p>
<h3></h3>
<!-- () 그룹핑 -->
<!-- table>(tr>th*2)(tr>td*2) -->
<table>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<!-- css 지정: #아이디명, .클래스명 -->
<!-- div#container -->
<div id="container"></div>
<!-- ul>li.item*3 -->
<ul>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
<!-- 문자열 text: {text} -->
<!-- ul>li.item{Menu}*3 -->
<ul>
<li class="item">Menu</li>
<li class="item">Menu</li>
<li class="item">Menu</li>
</ul>
<!-- 자동 넘버링 -->
<!-- ul>li{menu$$$}*3 -->
<!-- $는 자리 수 -->
<ul>
<li>menu001</li>
<li>menu002</li>
<li>menu003</li>
</ul>
<!-- div.container>div.item.item${menu$}*10 -->
<div class="container">
<div class="item item1">menu1</div>
<div class="item item2">menu2</div>
<div class="item item3">menu3</div>
<div class="item item4">menu4</div>
<div class="item item5">menu5</div>
<div class="item item6">menu6</div>
<div class="item item7">menu7</div>
<div class="item item8">menu8</div>
<div class="item item9">menu9</div>
<div class="item item10">menu10</div>
</div>
<!-- dummy text -->
<!-- p>lorem -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem illo suscipit iusto sequi facere dolores, et tenetur iste similique! Nulla sunt vel non voluptates necessitatibus pariatur! Deserunt velit minima illo!</p>
<!-- p>lorem5 -->
<p>Lorem ipsum dolor sit amet.</p>
<!-- p>lorem6 -->
<p>Lorem ipsum dolor sit amet consectetur.</p>
</body>
</html>728x90