[HTML] 웹사이트 빨리 만드는 지름길, emmet

html을 빨리 작성/수정하는 것으로 생산성을 증가시킬 수 있다!

아래 단축키 입력하고 + Enter 키 누를 시 코드가 빠르게 작성된다.

 

1. div.클래스명  혹은 .클래스명 

<div class="class"></div>

 

2. div#아이디명

<div id="id"></div>

 

3. div>ul>li  : div 태그 안의 ul 태그 안의 li 태그 작성

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

 

4. div>ul+ol : div 태그를 부모로 ul, ol이 형제 관계로 들어감

<div>
    <ul></ul>
    <ol></ol>
</div>

 

5. div>(header>ul>li*2>a)+footer>p

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

 

6. p{hello} : p태그 안에 { }안의 문자 삽입

<p>hello</p>

 

7. p.class${item $}*5 

<p className="class1">item 1</p>
<p className="class2">item 2</p>
<p className="class3">item 3</p>
<p className="class4">item 4</p>
<p className="class5">item 5</p>

 

8. p>lorem : p 태그 안에 lorem lipsum의 전체 문구 삽입

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia nam repellendus qui minima repellat iste, aperiam eos nemo. Ex fugiat deleniti nam maxime, necessitatibus itaque nobis inventore quasi! Deleniti, aspernatur?</p>

 

9. p>lorem4 : p태그 안에 lorem lipsum 중 4개의 단어 삽입

<p>Lorem ipsum dolor sit.</p>

 

10. div>ul>li^ol : div 태그 안에 1) ul을 부모로 한 li태그 삽입, 2) ol이 1의 형제 관계로 들어감

<div>
    <ul>
        <li></li>
    </ul>
    <ol></ol>
</div>

 

[ 기타 단축키 ] 

• esc : 선택 해제 
• link 입력하고 tap 키 누를 시

<link rel="stylesheet" href="" />

• shift + tap : 왼쪽으로 땡겨쓰기(?)
• 코드 블럭 선택하고 control + d : 같은 단어 중복으로 선택됨 -> 매우 자주 쓴다!
• control + shift + L : 선택되어 있는 문자열을 모두 선택 -> 매우 자주 씀