Series Mahir CSS #10 : List dengan CSS

Hai, teman-teman! Ketemu lagi di tutorial CSS kita. Kali ini kita bakal bahas sesuatu yang sering banget kita gunakan di web, yaitu daftar atau list. Mulai dari mengatur tampilan list dasar sampai bikin list yang lebih menarik dan custom, semuanya bisa dilakukan dengan CSS. Yuk, kita mulai pembahasannya!

Apa Itu List di HTML?

Di HTML, list adalah elemen yang digunakan untuk membuat daftar. Ada dua jenis utama:

1. Ordered List (<ol>): Daftar bernomor atau berurutan.
   Contoh:

   <ol>
       <li>Item 1</li>
       <li>Item 2</li>
       <li>Item 3</li>
   </ol>
   

2. Unordered List (<ul>): Daftar tanpa nomor, biasanya menggunakan simbol seperti bullet (titik).
   Contoh:

   <ul>
       <li>Item A</li>
       <li>Item B</li>
       <li>Item C</li>
   </ul>
   

3. Description List (<dl>): Daftar dengan pasangan istilah dan deskripsi.
   Contoh:

   <dl>
       <dt>HTML</dt>
       <dd>Bahasa markup untuk membuat halaman web.</dd>
       <dt>CSS</dt>
       <dd>Bahasa styling untuk mengatur tampilan web.</dd>
   </dl>
   

Properti CSS untuk Mengatur List

1. list-style-type
   Mengatur jenis penanda (marker) untuk elemen list. Nilainya bisa berupa:

   • disc: Titik (default untuk <ul>).
   • circle: Lingkaran kosong.
   • square: Kotak kecil.
   • decimal: Angka (default untuk <ol>).
   • none: Menghilangkan penanda.

   Contoh:

   ul { 
       list-style-type: square; 
   }

2. list-style-position
   Mengatur posisi penanda (marker) list:

   • outside: Penanda berada di luar teks (default).
   • inside: Penanda berada di dalam teks.

   Contoh:

   ul { 
       list-style-position: inside; 
   }

3. list-style-image
   Mengganti penanda list dengan gambar custom.

   Contoh:

   ul { 
       list-style-image: url('icon.png'); 
   }

4. Shorthand list-style
   Kamu bisa menggabungkan semua properti di atas:

   ul { 
       list-style: square inside; 
   }

Membuat List Custom

Mengganti Penanda dengan Ikon atau Emoji

Kalau mau tampilan lebih modern, kamu bisa mengganti penanda dengan emoji:

ul li {
    list-style-type: none;
    position: relative;
    padding-left: 25px;
}

ul li::before {
    content: '?';
    position: absolute;
    left: 0;
}

HTML:

<ul>
    <li>Belajar HTML</li>
    <li>Belajar CSS</li>
    <li>Belajar JavaScript</li>
</ul>

Membuat List Berangka Custom

Kamu bisa mengganti angka pada ordered list:

ol {
    counter-reset: list-counter; /* Inisialisasi counter */
}

ol li {
    counter-increment: list-counter;
    list-style-type: none;
}

ol li::before {
    content: counter(list-counter) '. ';
    font-weight: bold;
}

HTML:

<ol>
    <li>Langkah 1</li>
    <li>Langkah 2</li>
    <li>Langkah 3</li>
</ol>

Mengatur Jarak dan Padding

Biasanya, list punya padding bawaan yang mungkin mengganggu desain. Kamu bisa menyesuaikannya:

ul {
    margin: 0;
    padding: 0;
}

ul li {
    padding: 10px 0;
}

Contoh List Styling yang Kompleks

Gabungkan beberapa teknik untuk membuat list yang menarik:

ul.custom-list {
    list-style: none;
    padding: 0;
}

ul.custom-list li {
    position: relative;
    margin: 10px 0;
    padding-left: 30px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
}

ul.custom-list li::before {
    content: '??';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #2ecc71;
}

HTML:

<ul class="custom-list">
    <li>Langkah 1: Buat file HTML</li>
    <li>Langkah 2: Tambahkan elemen CSS</li>
    <li>Langkah 3: Simpan dan buka di browser</li>
</ul>

Sekianlah belajar CSS tentang list. Dengan properti ini, kamu bisa mengatur list sederhana atau bahkan membuat desain custom yang keren untuk websitemu. Artikel ini sangat berguna sebelum kamu melanjutkan ke tutorial CSS selanjutnya di www.code80vity.com. Sampai jumpa di artikel berikutnya, dan tetap semangat belajar! ?