본문 바로가기
etc.

[그때 알았더라면] 에밋(Emmet)이라고 들어봤니 hoxy...?

by 돈민찌 2021. 9. 8.
반응형

부트캠프 시작을 앞두고 정신이 집중이 안돼어서 1일1커밋을 실천하지 못할 것 같아 "지금은 별거 아니지만 처음 알았을 때 오와!!!! 했던 것들" 몇가지에 대해 좀 얘기를 해볼까 한다. 뭐 이를테면 깃이나, 정규표현식이라던가.. 숙련자들은 뭐 이런걸로 글을 썼대 하시겠지만(괜한 걱정), 초보자에게는 매우 도움이 될 것 같다. 내가 그랬으니까!!!

코딩을 처음 배운 사람이 보통 접하게 되는 언어가 뭐가 있을까? 요즘은 파이썬부터 시작하는 분들도 많이 있다지만, 보통은 HTML/CSS/(JS) 부터 접하게 될 것이다. "코딩"이라는 단어가 지금처럼 보편화 되기 전에도, ㅅㅇㅋㄹ, ㅆㅇㅇㄷ 등에서 게시물에 html 코드를 작성하는 방법을 아는 사람들끼리는 알았던 기억도 나고, 그때 네이버나 야후 같은 페이지에서 소스보기를 눌러서 그대로 복사해본 뒤 왜 내가 보는 거랑 복사한 html 파일이 다른걸까 생각해본 기억도 난다(더 이상 얘기하면 화석 취급 당하려나). 그리고 반년 전에 코딩을 처음 시작했을 때에도 제일 처음 접한 강의는 스파르타코딩클럽의 프로모션 강의였던 "코딩의 ㅋ자를 알자"라는 강의였다. 최근에야 본격적으로 스파르타코딩클럽의 강의를 듣게 됐고 이제서야 알게 된 사실은 그 강의가 웹개발종합반 강의의 1주차 일부분을 미리보기시켜준 것이었더라. 

나는 이 삼종 세트 로고가 넘 귀여워요

오늘 말하고자 하는 것은 요것들의 기본 개념이나 뭐 그런 것이 아니라, 요것들을 쉽게 다룰 수 있게 해주는 간단한 도구를 소개하고자 한다. 이름은 에밋(Emmet)이다. 혹시 또 뭐 설치해야 하는거야? 또 언어 하나 배워야 하는거야? 생각할 필요 없다. 에밋은 여러분들이 이미 사용하고 있는 파이참/비쥬얼스튜디오코드/서브라임텍스트 등의 IDE에 "이미" 적용되어 있는 가벼운 소프트웨어이다.

MIT 라이선스 오픈소스 조상님들 감사합니다.

0. html:5 템플릿 불러오기!

비쥬얼 스튜디오 코드(물론 다른 IDE에서도 가능)에서 .html 파일을 하나 생성하고 html:5 이라는 텍스트를 입력하고 탭 키를 누르면 (보통 ht...까지만 쳐도 나온다.) 요렇게 자연스럽게 템플릿이 짜여진다. 위의 세 로고들을 보면 주황색 HTML 아이콘에는 5라는 숫자가 쓰여있다. 가장 최근 버전(+호환 역시 잘 되는)의 html이라고 생각하면 된다. html 태그 아래의 body와 head 태그, 그리고 기본적인 인코딩 등의 초기설정까지 담겨있어 크게 손 댈 것이 없이 바로 쓰기 좋다.

Emmet의 최대 장점은 따로 익스텐션 설치하고 할 것 없이 그냥 있다. 원래 있다.

html:5 
<!-- 이라고 입력하고 탭 키를 누르면!!! -->

<!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>
  
</body>
</html>

<!-- 이런 템플릿이 저절로 채워진다! -->

사실 요 정도의 기능은 대부분의 입문 강의에서도 알려주는 것으로 알고 있으니까 조금씩 단계를 높여가면서 에밋에 익숙해져보자.

1. 자식 태그

  nav>ul>li  

위의 템플릿의 빈 곳(body 태그 안)에 위의 내용을 입력하고 탭키를 눌러보자.

<nav>
    <ul>
        <li></li>
    </ul>
</nav>

요렇게 트리 구조로 nav의 자식으로 ul이, ul의 자식으로 li 태그가 자리잡는다. 당연히 모든 html 태그에 지원된다. 별 것 아니지만 일일이 열고 닫는 태그를 신경쓰지 않아도 되어서 좋다.

2. 형제 태그

  ul>li>a+div+p  

위의 내용을 입력하고 탭 키를 눌러보자.

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

따란~~ 설명할 것도 없이 위에서 배운 자식 태그의 계층 구조에 자식 태그인 <a> 태그와 <div> <p> 태그를 형제 관계로 묶어 한 방에 싹 자동완성 해준다. 심지어 a 태그에는 href라는 실과 바늘 같은 속성이 따라 붙었다!! 이미 이걸로도 충분한 것 같나? 아직 한참 남았다.

3. 쌍둥이 태그

  div>ol>li*5  

위의 내용을 입력하고 탭 키를 눌러보자.

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

굳이 설명하지 않아도 보면 바로 이해가 될 것 같다. <li> 태그를 5개 만들어줘! 라는 싸인을 기똥차게 알아들은 것이다. 이 다음부터 살짝 아주 살짝 생각하면서 코드를 써야 할 수도 있다. 하지만 너무너무너무 편하니까 자주 써먹기!

4. 한 계층 위로 올라가기

  nav>div>ul>li*4^img  

위의 내용을 입력하고 탭 키를 눌러보자.

<nav>
  <div>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <img src="" alt="">
  </div>
</nav>

여기서부터는 좀 ?!?! 싶을 수도 있는데, 아까의 코드와 거의 유사한 상황에서, "^" 한 글자는 지금 작성 중인 계층의 한칸 위 태그 다음으로 커서를 옮기는 거라고 생각하면 된다. 그러니까 (1)<nav>태그 아래 (2)<div>태그가, 그 아래 (3)<ul> 태그가, 그 아래 (4)<li>태그 네개가 반복되고, 그 옆이 아니라 한 계층 위 (3)에 img 태그를 달아주는 것이다. 앞에서 언급한 <a> 태그처럼 img 태그에는 기본적으로 src(이미지의 주소)와 alt(이미지가 로드에 실패했거나, 스크린리더기 등으로 이미지를 읽으려 할 때 나타날 텍스트)를 가지고 있어 그 속성까지 불러온 것이다. 웬만하면 빼먹지 말라는 뜻으로 이해하면 된다.

5. 형제든 자식이든 묶어버리기

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

조금 복잡한가? 일단 위의 내용을 입력하고 탭 키를 눌러보자.

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

한번에 최대한 많은 자동완성을 사용하고 싶을 때, 위의 "^" 문법은 쉽게 떠오르지 않거나, 다소 헷갈리게 한다. 그럴 때에는 괄호를 적극적으로 사용하면 좋다. 위의 태그가 읽기에 다소 불편할 수도 있겠지만, 동일한 코드에서 "^"를 많이 사용하는 코드보다는 "()"를 사용한 것이 훨씬 직관적이다. 그루핑을 하는 것이기 때문에 위의 예시처럼 헤더 코드(와 하위 태그들)와 푸터태그(와 하위 태그)를 묶어서 +로 형제 태그로 맺어준다는 것이 코드를 읽기만 해도 쉽게 이해가 된다. 적어도 이 문법을 사용할 때에는 footer의 div 태그와 동일한 계층에 header의 ul이 있는지 li가 있는지 그런건 생각할 필요도 없는 것 아닌가. 어렵게 느껴졌을 수 있으니 예를 하나 더 들어보자면, 이런 식으로 중첩해서 사용할 수도 있다. <dt>와 <dd> 태그 형제를 함께 세번 반복해줘! 깔끔하게 이해되지 않는가? 괄호 문법은 두번의 예시를 든 것은 내가 "^" 보다 선호하기 때문이다. 더 어려울 것도 없다.

(div>dl>(dt+dd)*3)+footer>p

<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

6. ID와 CLASS 입히기

  nav#container>.cards>ul.card-list>li.card*4^img  

위의 내용을 입력하고 탭 키를 눌러보자.

<nav id="container">
  <div class="cards">
    <ul class="card-list">
      <li class="card"></li>
      <li class="card"></li>
      <li class="card"></li>
      <li class="card"></li>
    </ul>
    <img src="" alt="">
  </div>
</nav>

뭐야 갑자기 넘 길어졌어요!!!! 자세히 보면 이 코드는 4번에서 한번 사용한 코드에 ID와 CLASS만 적용한 것이다. CSS 선택자를 사용할 때와 마찬가지로 #은 id(페이지 내 유일한 요소에만 적용되는 선택자)를, .은 class를 표현할 때 쓰인다. 그리고 일부러 div.cards라고 써야 할 것을 .cards만 썼는데, 결과는 잘 나왔다. 아무 html 태그도 입력하지 않고 .class나 #id를 쓰면, 그 태그는 가장 기본적인 태그라고도 할 수 있는 div 태그가 된다. (이 부분이 약간 유동적이긴 한데 아래에서 10번 항목에서 따로 또 설명하겠다.) 그 외에는 특별할 것도 없고 외울 것도 없다. 혹시나 한 요소에 클래스를 여러개 부여하고 싶다면 div.card.content.active 이런식으로 길게 쓰기만 하면 <div class="card content active"></div> 이렇게 깔끔하게 정리된다. 아이디와 클래스를 모두 가지게 할 때에도 마찬가지이다. #container.root 이렇게만 쓰고 탭을 누르면 <div id="container" class="root"></div> 이렇게 자동완성될 것이다.

7. ATTRIBUTE 입히기

  nav[style="display:block"]>div[title="mytab"]>ul.cards>li.card*4^img[alt="user-profile"][src="./profile.png"]  

위의 내용을 입력하고 탭 키를 눌러보자. 마찬가지로 4번에서 사용한 코드에 몇가지 추가한 것이다.

<nav style="display:block">
  <div title="mytab">
    <ul class="cards">
      <li class="card"></li>
      <li class="card"></li>
      <li class="card"></li>
      <li class="card"></li>
    </ul>
    <img src="./profile.png" alt="user-profile">
  </div>
</nav>

<nav> 태그에 인라인 스타일 속성으로 "display:block" 속성을 줬다. <div> 태그에는 title 속성을 주고 "mytab"이라는 값을 줬다. "cards"라는 클래스를 가진 <ul> 태그 아래에는 "card"라는 클래스를 가진 <li> 태그가 4개 나란히 있고, 그로부터 상위로 한칸 더 올라가 <ul> 태그 다음에 추가했던 img 태그에는 실제 src, alt 값까지 Emmet을 통해 불어넣었다. 이렇게 하는 것이 오히려 더 불편하다면 할 말은 없겠지만, 단순히 코드의 길이만 봐도 상당히 유효한 것 같다.

참고로 tag[attribute=""] 이렇게 작성하지 않고 tag[attribute]이렇게만 작성해도 <tag attribute=""> 이런 결과물이 나온다. 빈 값을 굳이 입력해 줄 필요는 없다. 그리고 아래에서 한번 더 예시를 보여주겠지만 input이나 button의 type을 정해줄 때에는 input[type="password"] 이렇게 할 필요 없이 input:password 이렇게 해줘도 된다!! 태그의 type 속성을 입력할때에는 : 콜론 하나만 입력해버리기!!!! (사실 html:5 이것도 비슷한 개념이라고 볼 수 있겠다.)

8. 태그 텍스트 삽입

  nav>div>ul>li{Hello world}*4^img[src="./static/logo.png"]  

위의 내용을 입력하고 탭 키를 눌러보자.

<nav>
  <div>
    <ul>
      <li>Hello world</li>
      <li>Hello world</li>
      <li>Hello world</li>
      <li>Hello world</li>
    </ul>
    <img src="./static/logo.png" alt="">
  </div>
</nav>

크게 설명할 부분은 없을 것 같은데, 태그 뒤에 {} 을 붙이고 그 안에 입력할 텍스트를 적어주기만 하면 된다. 다음과 같은 사용 방법도 있다. 결과물은??? 그대로 적용하자면 """Click here to continue""" 이렇게 나온다.  

<!-- Emmet Before -->
p>{Click }+a[href="#"]{here}+{ to continue}

<!-- Emmet After -->
<p>Click <a href="#">here</a> to continue</p>

9. $ - 태그/텍스트 넘버링

요 문법은 실행하기 전에 약간의 규칙을 설명해야 할 것 같다. 태그를 "*" 연산자로 반복할 때, "$"이라고 쓴 부분은 각 태그의 인덱스(1부터 시작)로 대체된다. $*5 = 1,2,3,4,5 이렇게 이해하면 될 것이다. 이것은 [] 대괄호 안의 속성이나, {} 중괄호 안의 텍스트나, 또는 h1,h2,h3 등의 태그명에도 적용 가능하다.

또한 zerofill(1을 0001로 표기하듯이 필요한 자릿수를 맞추기 위해 앞자리 숫자에 0을 채우는 것)을 구현하기 위해 $$$처럼 여러개를 붙여서 사용할 수도 있다. $$$의 경우 001,002,003....999 이렇게 차례차례 넘버링이 메겨질 것이다.

또한 $뒤에 @를 붙이고 뒤에 숫자를 적으면 그 숫자부터 넘버링을 시작할 수 있다. ( 예: $$$@5*3 = 005,006,007 )
@ 뒤에 -를 붙이면 역순으로 넘버링이 적용된다. ( 예: $$$@-5*3 = 007,006,005 | $@-2*4 = 005,004,003,002 )

참고로 h$ 태그를 적용할 경우, 헤딩 태그는 h6까지만 유효하다는 것 잊지 말기!!! ( 예: h$*6 = h1+h2+h3+h4+h5+h6 )

<!-- Emmet Before -->
ul>li.item$*5

<!-- HTML After -->
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>


<!-- Emmet Before -->
h$[title=item$]{Header $}*3

<!-- HTML After -->
<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>


<!-- Emmet Before -->
ul>li.item$$$*5

<!-- HTML After -->
<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>


<!-- Emmet Before -->
ul>li.item$@-*5

<!-- HTML After -->
<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>


<!-- Emmet Before -->
ul>li.item$@3*5

<!-- HTML After -->
<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

10. 기타 알쓸신잡..

내가 잘 까먹기도 하고, IDE 마다 약간씩의 차이가 있어 자주 쓰진 않지만, 일단은 유용한 HTML 에밋을 모아보자

# <파> 요렇게 줄일 수도 있다 <격> #

!
<!-- 백지 상태의 html에서 "html:5"와 똑같은 기능을 가졌다. -->

link:css
<link rel="stylesheet" href="style.css" />
script:src
<script src=""></script>

<!-- 인풋 태그의 타입을 다음과 같이 적으면 다음과 같이 완성된다. -->
input:text
<input type="text" name="" id="" />
<!-- [text,email,url,password,datetime,file....] 모두 가능. -->

button:submit과 같은 태그들도 지원함.
<button type="submit"></button>
<!-- 참고로 btn으로 줄여쓸 수 있음 -->
# 좀 길다 싶은 코드는 대부분 줄임표현이 있다. #

<!-- fig -> figure -->
<figure></figure>

<!-- bq -> blockquote -->
<blockquote></blockquote>

<!-- btn -> button -->
<button></button>

<!-- tarea -> textarea -->
<textarea name="" id="" cols="30" rows="10"></textarea>

<!-- leg -> legend -->
<legend></legend>

<!-- sect -> section -->
<section></section>

<!-- art -> article -->
<article></article>

<!-- hdr -> header -->
<header></header>

<!-- ftr -> footer -->
<footer></footer>

<!-- str -> strong -->
<strong></strong>
# 암묵적인 태그 지정 예시 #

.class
<!-- 보통 .class 이름을 입력하면 div 태그가 디폴트 태그가 된다. -->
<div class="class"></div>


em>.class
<!-- 그러나 인라인 텍스트 태그 하위에 두면 그에 맞게 span 태그로 수정된다. -->
<em><span class="class"></span></em>


ul>.class
<!-- ul|ol 태그의 경우 하위 태그의 태그명을 입력하지 않으면 <li>태그가 된다. -->
<ul>
    <li class="class"></li>
</ul>


table>.row>.col
<!-- 마찬가지로, table|tbody|thead 태그 하위의 태그는 tr, 그 아래 태그는 td가 된다. -->
<table>
    <tr class="row">
        <td class="col"></td>
    </tr>
</table>

일단은 요 정도만 익숙해지면 코드 타이핑하는데 쓰는 시간이 반 이상 줄 것이라 생각한다. 
요런 기능들은 codepen 같은 온라인 개발도구에서도 지원하는 부분이 많으니까 참고하면 꽤 큰 도움을 받을 수 있을 것 같다! 도움됐기를 바라며 그럼 20000 (참고로 CSS에도 에밋이 있다!

그럼 이만!!

참고자료

 

Zen Coding: A Speedy Way To Write HTML/CSS Code — Smashing Magazine

In this post we present a new speedy way of writing HTML code using CSS-like selector syntax — a handy set of tools for high-speed HTML and CSS coding. It was developed by our author Sergey Chikuyonok and released for Smashing Magazine and its readers.

www.smashingmagazine.com

 

에밋 (소프트웨어) - 위키백과, 우리 모두의 백과사전

에밋(Emmet)은 HTML, XML, XSL 문서 등을 편집할 때 빠른 코딩을 위해 사용하는 플러그인이다. 원래 젠코딩(Zen Coding)으로 부르다가 에밋(Emmet)으로 이름을 변경했다.[1] 매우 간단한 몇 가지 코드만 입력

ko.wikipedia.org

 

반응형
저작자표시 비영리 변경금지

'etc.' 카테고리의 다른 글

PNG와 JPG (또는 JPEG) 차이점은??? 뭘 쓰는 게 더 좋을까?  (0) 2022.03.27
데이터베이스 이론: 트랜잭션(Transaction)과 인덱스(Index)  (0) 2022.03.22
VSCODE 익스텐션 어디까지 알고 있나요?? 나만 알고싶은 확장기능 총정리!!  (0) 2021.10.03
[그 때 알았더라면] 정규 표현식 빠르게 정리해보기 (TIL0917)  (0) 2021.09.19
[그때 알았더라면] 깃은 무엇일까? 오픈 소스는 어떻게 활용할까?  (0) 2021.09.17

관련글

댓글

티스토리툴바