[태그:] emmet

ATOM editor 사용법

다솜돌이 Leave a comment

생활코딩에 Atom editor 사용법(https://opentutorials.org/module/1579)이 있길래, 보면서 몇가지 적는다. 적다보니, 내가 뭘 또 이런 것까지 적고 있나 싶긴 한데… ^^;;

  • Toggle tree view:  View / Toggle Tree view (Ctrl + \)
  • Find in buffer: Ctrl + F
  • Find Next: F3, Find Previous: Shift + F3
  • Find File: Ctrl + P. 파일명 일부 혹은 패턴만 쳐도 찾아준다.
  • 아래쪽 오른쪽에 나온 Auto detect 된 File type이 나온다. 변경하고 싶다면 클릭 후 변경.
  • Toggle Developer tools: View / Developer / Toggle Developer tools (Ctrl + Shift + I)
  • Stylesheet: Atom 에디터 내의 element들의 lesscss를 수정할 수 있다. File / Stylesheet
  • Plugins:
    • emmet: HTML tag 작성 시, syntax 작성 후 Tab 혹은 Ctrl+E 하면 html로 풀어준다.
      • !: html template 입력
      • li*20: <li></li> 가 20개 입력.
      • li>a*20: <li> <a href=””></a><a href=””></a>…<a href=””></a> </li>
      • (li>a)*20: <li><a href=””></a></li> <li><a href=””></a></li>…<li><a href=””></a></li>
      • Syntax: https://docs.emmet.io/cheat-sheet/, 더 자세히는 https://docs.emmet.io/abbreviations/syntax/, CSS도 abbreviation 제공(https://docs.emmet.io/css-abbreviations/)
        • Child: >
          • div>ul>li 
            <div>
    <ul>
        <li></li>
    </ul>
</div>
        • Sibling: +
          • div+p+bq 
            <div></div>
<p></p>
<blockquote></blockquote>
        • Climb up: ^
          • nav>ul>li^^a 
            <nav>
    <ul>
        <li></li>
    </ul>
</nav>
<a href=""></a>
        • Multiplication: *
          • a*10 
            <a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
        • Grouping: ()
          • nav>ul>(li>a)*5 
            <nav>
    <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</nav>
        • Attiribute:
          • ID attribite: #
            • nav#navigation 
              <nav id="navigation"></nav>
          • Class attribute: .
            • li.list 
              <li class="list"></li>
          • Tag attribute: []
            • a[target=”_blank” title=”asdf”] 
              <a href="" target="_blank" title="asdf"></a>
        • Value: {}
          • li>a>{table} 
            <li><a href="">table</a></li>
        • Numbering: $
          • ul.li.item$*5 
            <ul class="li item1"></ul>
<ul class="li item2"></ul>
<ul class="li item3"></ul>
<ul class="li item4"></ul>
<ul class="li item5"></ul>
    • script: script를 입력 후 단축키(Shift + Ctrl + B로 바로 실행 결과 확인. 실행 환경은 따로 설치해야 함.