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 (

   ): Daftar bernomor atau berurutan.
   Contoh:

   
       
   Item 1
       
   Item 2
       
   Item 3
   
   

   1. Unordered List (

      ): Daftar tanpa nomor, biasanya menggunakan simbol seperti bullet (titik).
      Contoh:

      
          
      Item A
          
      Item B
          
      Item C
      
      

      • Description List (

        ): Daftar dengan pasangan istilah dan deskripsi.
        Contoh:

        
            
        HTML
            
        Bahasa markup untuk membuat halaman web.
            
        CSS
            
        Bahasa styling untuk mengatur tampilan web.
        
        

   ---

   Properti CSS untuk Mengatur List

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

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

        Contoh:

        ul { 
            list-style-type: square; 
        }

      • 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; 
        }

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

        Contoh:

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

      • 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:

   
       
   Belajar HTML
       
   Belajar CSS
       
   Belajar JavaScript
   
   

   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:

   
       
   Langkah 1
       
   Langkah 2
       
   Langkah 3
   
   

   ---

   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:

   
       
   Langkah 1: Buat file HTML
       
   Langkah 2: Tambahkan elemen CSS
       
   Langkah 3: Simpan dan buka di browser
   
   

   ---

   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! ?