|
| 1 | +# CSS List |
| 2 | + |
| 3 | +Pada CSS, List adalah sebuah elemen yang digunakan untuk membuat daftar item yang tersusun. List biasa digunakan untuk menampilkan daftar barang semacam _to-do list_. |
| 4 | + |
| 5 | +Untuk membuat List di HTML, kamu bisa menggunakan elemen seperti `ul` atau `ol` sebagai wadahnya dan untuk membuat item-item yang didaftar kamu bisa menggunakan elemen `li`. |
| 6 | + |
| 7 | +```html |
| 8 | +<ul> |
| 9 | + <li>Coffee</li> |
| 10 | + <li>Tea</li> |
| 11 | + <li>Coca Cola</li> |
| 12 | +</ul> |
| 13 | +``` |
| 14 | + |
| 15 | +## Perbedaan `ul` dan `ol` |
| 16 | + |
| 17 | +Ada perbedaan antara elemen `ul` dan `ol`, Elemen `ul` digunakan untuk membuat daftar bullet, sedangkan elemen `ol` digunakan untuk membuat daftar numerik atau tiap-tiap item diwakili dengan angka secara berurutan. |
| 18 | + |
| 19 | +Daftar bullet: |
| 20 | + |
| 21 | + |
| 22 | + |
| 23 | +Daftar numerik: |
| 24 | + |
| 25 | + |
| 26 | + |
| 27 | +Ada beberapa properti yang bisa kamu gunakan untuk men-style list. |
| 28 | + |
| 29 | +## list-style-type |
| 30 | + |
| 31 | +Properti `list-style-type` untuk mengatur tanda pada daftar. |
| 32 | + |
| 33 | +Contoh: |
| 34 | + |
| 35 | +```css |
| 36 | +ul { |
| 37 | + list-style-type: japanese-formal; |
| 38 | +} |
| 39 | +``` |
| 40 | + |
| 41 | +Seperti yang kamu lihat, list bisa diiubah dengan tulisan angka jepang. Kamu juga bisa memberikan value lain seperti `ethiopic-numeric` dan `square`. |
| 42 | + |
| 43 | +Hasil: |
| 44 | + |
| 45 | + |
| 46 | +## list-image |
| 47 | + |
| 48 | +Kamu juga dapat meng-custom tanda dengan gambar menggunakan properti `list-image`. |
| 49 | + |
| 50 | +Contoh: |
| 51 | + |
| 52 | +```css |
| 53 | +ul { |
| 54 | + list-style-image: url("icons8-beef-burger-24.png"); |
| 55 | +} |
| 56 | +``` |
| 57 | + |
| 58 | +Hasil: |
| 59 | + |
| 60 | + |
| 61 | +## list-position |
| 62 | + |
| 63 | +Porperti `list-position` untuk mengatur posisi tanda list dan hanya memiliki dua value yaitu `inside` dan `outside`. |
| 64 | + |
| 65 | +Contoh: |
| 66 | + |
| 67 | +```css |
| 68 | +ul { |
| 69 | + list-style-position: inside; |
| 70 | +} |
| 71 | +``` |
| 72 | + |
| 73 | +Hasil: |
| 74 | + |
| 75 | + |
| 76 | +Jika diperhatikan lebih dalam melalui _inspect_ di browser, kamu akan menemukan bahwa tanda `list` berada dalam sebuah content yang mana secara default tanda `list` seharusnya berada di luar content. Jika kamu ingin memberikan nilai `outside` sebaiknya tidak perlu ditulis karena tanpa di tulis pun tanda list memang posisinya `outside` atau di luar content. |
| 77 | + |
| 78 | +Dari semua properti di atas bisa ditulis sekaligus dalam properti `list-style`. |
| 79 | + |
| 80 | +```css |
| 81 | +list-style: georgian inside url("icons8-beef-burger-24.png"); |
| 82 | +``` |
| 83 | + |
| 84 | +```css |
| 85 | +list-style: square inside url("sqpurple.gif"); |
| 86 | +``` |
| 87 | + |
| 88 | +### Referensi: |
| 89 | + |
| 90 | +- https://www.w3schools.com/css/css_list.asp |
| 91 | +- https://developer.mozilla.org/en-US/docs/Web/CSS/list-style |
0 commit comments