여러 요소 한 줄 작성

HTML5에서는 셀렉터를 이용해 여러 요소를 한 줄로 작성할 수 있다. 분명 이런 문법 명칭이 있을 텐데, 찾지 못해서 뭐라고 칭해야 하는지 모르겠다. 누군가가 알려주셨으면 좋겠다. ㅠㅠ

• 22.04.07 18:42 -> Emmet이라는 명칭을 우연히 발견했다.

<div class="main_box">
  <div id="box1"><img src="img1.jpg" alt=""><span class="text"></span></div>
  <div id="box2"><img src="img2.jpg" alt=""><span class="text"></span></div>
  <div id="box3"><img src="img3.jpg" alt=""><span class="text"></span></div>
</div>

위와 같은 html 코드를 하나씩 적는 건 꽤나 고생스러운 일이다. 때문에 대부분의 IDE에서는 한 줄로 작성하는 방법을 제공한다. CSS에서 사용하는 셀렉터 문법을 이용한다.

div.main_box>(div#box$>img[src="img$.jpg"]+span.text)*3

CSS 문법을 알고 있다면 이해하지 못할 부분은 거의 없다.

부모 요소 내에서 여러 개를 생성할 때는 해당 요소 부분을 괄호로 감싸고 *를 통해 반복 횟수를 명시하면 된다.

$는 횟수에 따라 순차적으로 정수를 자동 입력한다. 역순으로 입력할 때는 $@-를 붙인다.

각 태그의 속성은 대괄호([ ])내에 속성값을 명시하면 된다.

+는 형제 요소 추가한다.

요소 내 텍스트는 { }를 이용해 입력할 수 있다.

div{$}*10

<!-- 결과 -->
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>

간단한 한 줄 입력에 익숙해져서 귀찮은 태그 입력 시간을 줄여보자.