코드랩 레퍼런스

Emmet 본문

ETC

Emmet

webstoryboy 2017. 6. 15. 15:35
Emmet은 코딩을 빠르고 쉽게 만들어 주는 초고속 코딩 도구입니다. 예전에 젠 코딩이라는 이름으로 많은 인기를 끌었으며 현재는 Emmet으로 변경되어 지금까지 사용하고 있습니다.

축약어 Abbreviations

  • 다음과 같이 축약어를 적고, tab 또는 Ctrl + E를 누르면 변환이 됩니다.
  • doc 
    <html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>
  • doc4 
    <html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>
  • !!! 
    <!DOCTYPE html>
  • !!!xt 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • !!!xs 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • html:5 or ! 
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>
  • nav>ul>li>a>img 
    <nav>
	<ul>
		<li><a href=""><img src="" alt=""></a></li>
	</ul>
</nav>
  • div+p+div 
    <div></div>
<p></p>
<div></div>
  • div>ul>li*4^^+p+div 
    <div>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>
<p></p>
<div></div>
  • (div>ul>li*4)+p+span 
    <div>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>
<p></p>
<span></span>
  • #wrap>#header+#nav+#sidebar+#contents+#footer 
    <div id="wrap">
	<div id="header"></div>
	<div id="nav"></div>
	<div id="sidebar"></div>
	<div id="contents"></div>
	<div id="footer"></div>
</div>
  • #link>a[href="#" target="_blank"]*10 
    <div id="link">
	<a href="#" target="_blank"></a>
	<a href="#" target="_blank"></a>
	<a href="#" target="_blank"></a>
	<a href="#" target="_blank"></a>
	<a href="#" target="_blank"></a>
	<a href="#" target="_blank"></a>
	<a href="#" target="_blank"></a>
	<a href="#" target="_blank"></a>
	<a href="#" target="_blank"></a>
	<a href="#" target="_blank"></a>
</div>
  • ul[id="ul" class="ul"]>li*8 
    <ul id="ul" class="ul">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>
  • ul#ul.ul>li*8 
    <ul id="ul" class="ul">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>
  • ul#ul.ul>li*8 
    <ul class="list">
	<li class="desc-1"></li>
	<li class="desc-2"></li>
	<li class="desc-3"></li>
	<li class="desc-4"></li>
	<li class="desc-5"></li>
	<li class="desc-6"></li>
	<li class="desc-7"></li>
	<li class="desc-8"></li>
	<li class="desc-9"></li>
	<li class="desc-10"></li>
</ul>
  • ul#ul.ul>li*8 
    <ul class="list">
	<li class="desc-1"></li>
	<li class="lesc-1"></li>
	<li class="desc-2"></li>
	<li class="lesc-2"></li>
	<li class="desc-3"></li>
	<li class="lesc-3"></li>
	<li class="desc-4"></li>
	<li class="lesc-4"></li>
	<li class="desc-5"></li>
	<li class="lesc-5"></li>
</ul>
  • ul#ul.ul>li*8 
    <ul class="list">
	<li data-num="01"></li>
	<li data-num="02"></li>
	<li data-num="03"></li>
	<li data-num="04"></li>
	<li data-num="05"></li>
	<li data-num="06"></li>
	<li data-num="07"></li>
	<li data-num="08"></li>
	<li data-num="09"></li>
	<li data-num="10"></li>
</ul>
  • ul#ul.ul>li*8 
    <ul class="list">
	<li data-num="10"></li>
	<li data-num="09"></li>
	<li data-num="08"></li>
	<li data-num="07"></li>
	<li data-num="06"></li>
	<li data-num="05"></li>
	<li data-num="04"></li>
	<li data-num="03"></li>
	<li data-num="02"></li>
	<li data-num="01"></li>
</ul>
  • ul#ul.ul>li*8 
    <ul class="list">
	<li class="st-15"></li>
	<li class="st-16"></li>
	<li class="st-17"></li>
	<li class="st-18"></li>
	<li class="st-19"></li>
	<li class="st-20"></li>
	<li class="st-21"></li>
	<li class="st-22"></li>
	<li class="st-23"></li>
	<li class="st-24"></li>
</ul>
  • ul#ul.ul>li*8 
    <ul class="list">
	<li class="st-24"></li>
	<li class="st-23"></li>
	<li class="st-22"></li>
	<li class="st-21"></li>
	<li class="st-20"></li>
	<li class="st-19"></li>
	<li class="st-18"></li>
	<li class="st-17"></li>
	<li class="st-16"></li>
	<li class="st-15"></li>
</ul>
  • ul#ul.ul>li*8 
    <ul>
	<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
	<li>Cum rem doloribus sed eum tempore iusto, cumque!</li>
	<li>Obcaecati, ut rem. Nisi eos amet consequatur a.</li>
	<li>Necessitatibus porro excepturi hic corrupti enim inventore, aspernatur!</li>
	<li>Autem harum expedita pariatur eaque neque? Autem, accusamus.</li>
</ul>
Related Articles more
공유하기 링크

Ad

Comments