Cara Menulis Kode HTML dan CSS Lebih Cepat Menggunakan Emmet

Emmet adalah alat pengembangan penting yang membantu Anda dengan cepat membuat struktur berulang seperti daftar, tabel, atau elemen berurutan dengan pengetikan minimal. Ini lebih seperti singkatan yang diterjemahkan menjadi beberapa baris atribut HTML atau CSS.

Emmet sudah ada di dalam banyak editor teks seperti VS Code. Namun, Anda juga dapat mengunduhnya untuk editor teks favorit Anda dari tautan ini . Emmet juga tersedia di dalam beberapa IDE online seperti CodePen.

Perhatikan baik-baik contoh di bawah ini. Lihat betapa mudahnya kami menghasilkan sepuluh baris kode hanya dengan menggunakan kata kunci ol>li{This is a list}*10?

semut

Dalam tutorial ini, kita akan mempelajari beberapa shortcut Emmet yang menghasilkan HTML dan CSS dengan cepat.

Pintasan Emmet untuk HTML

Cara Membuat Komentar

Untuk mengomentari satu baris, tekan Ctrl + /.

Untuk mengomentari beberapa baris, pilih baris tersebut lalu tekan Ctrl + /.

Perkalian di Emmet

Anda dapat membuat beberapa elemen dengan menentukan jumlah setelahnya *.

Misalnya p*10 akan menghasilkan 10 p elemen.

emmet-s

Cara Membuat Anak Langsung

Anda dapat membuat turunan langsung menggunakan >simbol.

ol>li akan membuat elemen li di dalam ol.

emmet-o

Cara Membuat Saudara

Anda dapat membuat saudara kandung menggunakan + simbol tersebut.

div+p akan membuat div elemen dan p elemen pada level yang sama.

emmet-xx

Cara Menggabungkan penyeleksi

Anda dapat menggabungkan pemilih saudara dan anak untuk membuat struktur. Misalnya div+p>span akan menghasilkan elemen a div dan a p pada level yang sama dengan span elemen sebagai anak p pemilih:

emmet-ss

Cara mengkodekan struktur kompleks menggunakan tanda kurung()

Kurung () dapat digunakan untuk memisahkan bagian-bagian struktur yang berbeda.

Dengan menggunakan pintasan Emmet (main>div)+div>ul>li*5, Anda dapat membuat struktur kompleks berikut:

<main>
    <div></div>
</main>
<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
emmet-ds

Cara menggunakan Emmet untuk mengatur ID

Jika Anda ingin membuat pelemen dengan ID news-section, Anda dapat melakukannya menggunakan Emmet ini: p#news-section.

emmet-vv

Cara menggunakan Emmet untuk mengatur Kelas

Jika Anda ingin membuat pelemen dengan kelas news-espanol, Anda dapat melakukannya menggunakan Emmet ini: p.news-espanol.

emmet-ll

Cara membuat Atribut

Dimungkinkan untuk membuat elemen dengan atribut tertentu menggunakan Emmet.

Pintasan Emmet button[type=submit] akan membuat elemen tombol ini: <button type="submit"></button>.

emmet-bb

Bagaimana cara menambahkan Konten ke Elemen

Menyediakan konten untuk elemen Anda cukup mudah menggunakan Emmets.

p{This is a paragraph} akan membuat pelemen dengan konten “Ini adalah paragraf”.

emmet-pp

Pencacahan

Di Emmet, enumerasi biasanya mengacu pada proses menghasilkan beberapa elemen HTML dengan nomor urut atau huruf.

Berikut ini contoh pencacahannya: ul>li*5{List item number $}.

Itu $ menandakan titik di mana pencacahan dimulai. Artinya *5 mengulangi struktur ini sebanyak lima kali, dengan jumlah yang bertambah untuk setiap iterasi.

Mari kita lihat aksinya:

emmet-pj

Cara menghasilkan teks Lorem Ipsum

Anda tidak perlu mencari teks “Lorem ipsum” di Google jika Anda menggunakan Emmet.

Lorem20 akan menghasilkan teks 20 karakter.

emmet-xxx

Untuk menautkan file CSS, ketik link dan tekan enter.

emmet-gg

Untuk menautkan JavaScript, gunakan pintasan Emmet script:src.

emmet-jjj

Pintasan Emmet untuk CSS

Sama seperti HTML, Emmet juga tersedia untuk CSS.

Berikut adalah pintasan Emmet untuk beberapa properti yang umum digunakan:

  • m10→margin: 10px;
  • p-10→padding: -10px;    
  • m20p→  margin: 20%;  
  • w100p→width: 100%;
  • bgc#ff→background-color: #fff
  • db→display: block;
  • dib  →display: inline-block;
  • df  →display: flex;
  • tac→text-align: center;
  • tar→text-align: right;
  • c  →color: #000;
  • o  →overflow: hidden;
  • z→  z-index: 1;

Sumber: www.freecodecamp.org

Loading