[HTML5] Emmet
여러 요소 한 줄 작성
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>
간단한 한 줄 입력에 익숙해져서 귀찮은 태그 입력 시간을 줄여보자.
Author And Source
이 문제에 관하여([HTML5] Emmet), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@real-bird/HTML5-여러-요소-한-줄-작성저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)