html emmet

DoahKim·2024년 2월 12일

: .。. o(≧▽≦)o .。.:

Emmet은 웹 개발자들 사이에서 널리 사용되는 코드 작성 도구 중 하나입니다. 이 도구를 사용하면 HTML과 CSS를 더욱 빠르게 작성할 수 있으며, 코드의 가독성과 유지보수성을 향상시킬 수 있습니다.
Emmet은 작성된 코드를 템플릿 또는 기본 구조로 사용하여 웹 개발 작업을 빠르고 효율적으로 만듭니다. 이를 통해 생산성을 향상시키고, 코드 작성 과정에서의 반복적인 작업을 최소화할 수 있습니다.

emmet의 주요 기능

  1. 약어(Abbreviations) 사용:
    Emmet을 사용하면 HTML 요소를 표현하는 데 약어를 사용할 수 있습니다. 예를 들어, ul>li*5와 같은 약어는 <ul> 안에 5개의 <li> 요소를 생성합니다.

  2. 중첩(Nesting):
    Emmet은 중첩 구조를 간단히 작성할 수 있게 해줍니다. 예를 들어, div>ul>li*3>a<div> 안에 <ul>이 있고, 각 <ul> 안에 3개의 <li>와 각 <li> 안에 <a> 요소가 있는 구조를 생성합니다.

  3. 클래스 및 ID 지정:
    Emmet을 사용하여 요소에 클래스 및 ID를 지정할 수 있습니다. 예를 들어, .container>.item#first-item와 같이 작성하면 클래스가 "container"이고 ID가 "first-item"인 요소가 생성됩니다.

  4. 반복 및 계산:
    Emmet은 반복과 간단한 계산을 지원합니다. 예를 들어, ul>li.item$*3과 같이 작성하면 "item1", "item2", "item3"과 같은 클래스를 가진 3개의 <li> 요소가 생성됩니다.

👉입력

header>.logo+.nav>ul>li*3>a

👉출력

<header>
    <div class="logo"></div>
    <nav>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </nav>
</header>

: .。. o(≧▽≦)o .。.:

이렇게 emmet을 이용하면 코드 작성이 빠르고 즐겁게 될 것입니다!(●'◡'●)

0개의 댓글