필자는 HTML 작성을 굉장히 귀찮아하는 편이다.
<div id="page-container" class="product-wrap"> <div class="product-item"> <h4 class="product-title">Product Name</h4> <p class="product-price">1,000₩</p> </div> <div class="product-item"> <h4 class="product-title">Product Name</h4> <p class="product-price">3,000₩</p> </div> </div>
그 이유 중 하나는
id="", class="" 등 속성들을 쓰는 과정이 너무 귀찮기 때문이다.이 작업을 간소화할 방법을 찾아보던 중 Emmet이라는 방법을 오랜만에 발견하였고, 그 기능을 소개하고자 포스팅하게 되었다.
만약 위의 마크업을 해야한다는 상황이 생겼다고 가정해보자.
#page-container.product-wrap>.product-item*2>h4.product-title{Product Name}+p.product-price{1,000₩}
하지만 위 코드가 다소 어렵다고 생각할 수 있다고 생각한다. 생각보다 어렵진 않으니 하나하나 분석해보자.
#page-container.product-wrap
우선
#은 Element의 아이디를 의미한다. CSS 혹은 jQuery를 해본 사람이라면 쉽게 이해할 수 있을 것이다.. 표시는 class를 의미하며 #page-container.product-wrap 을 실행하면,<div id="page-container" class="product-wrap"></div>
위 내용이 출력된다.
여기서 알아두어야 할 것은 아무런 태그 이름 없이 클래스 이름 등만 작성하게 되면 기본적으로
div가 생성된다.#page-container.product-wrap>.product-item*2
> 기호는, 자식 element를 의미하며 바로 아래에 생성될 element를 의미한다.그리고
*2는 2개를 생성한다는 의미이며, 1 이상의 숫자에서만 정상적으로 작동한다.<div id="page-container" class="product-wrap"> <div class="product-item"></div> <div class="product-item"></div> </div>
생각보다 굉장히 직관적이지 않은가?
#page-container.product-wrap>.product-item*2>h4.product-title{Product Name}+p.product-price{1,000₩}
이제 괄호까지 등장해서 눈과 뇌를 혼란스럽게 한다. 하지만 나름대로 단순하니 내용을 들여다보자.
이번에는
h4.product-title을 통해 h4 태그임을 명시했다. 이렇게 되면 기본 생성 element인 div가 아닌 h4 태그가 생성된다.꼭 HTML 태그가 아니더라도 React 등의 컴포넌트 이름을 사용해도 정상적으로 생성이 된다.
element+element는 두 태그가 같은 위치(혹은 depth)에 있다는 것을 의미한다.두 element는 같은 부모 element 아래 생성된다.
이 외
{value}는 태그 안의 내용이다.<div id="page-container" class="product-wrap"> <div class="product-item"> <h4 class="product-title">Product Name</h4> <p class="product-price">1,000₩</p> </div> <div class="product-item"> <h4 class="product-title">Product Name</h4> <p class="product-price">1,000₩</p> </div> </div>
그럼 위와 같이 코드가 생성되며, 나는 Product Name과 가격만 수정해주면 된다.
더 자세한 기능에 대해서는 아래 페이지를 참고해보면 좋을 것 같다.
