bellshade · mergify · Jan 13, 2023 · Jan 1, 2023 · Jan 2, 2023 · Jan 2, 2023
@@ -0,0 +1,91 @@
+# CSS List
+
+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_.
+
+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`.
+
+```html
+<ul>
+  <li>Coffee</li>
+  <li>Tea</li>
+  <li>Coca Cola</li>
+</ul>
+```
+
+## Perbedaan `ul` dan `ol`
+
+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.
+
+Daftar bullet:
+
+![list bullet](list-bullet.png)
+
+Daftar numerik:
+
+![list bullet](list-numerik.png)
+
+Ada beberapa properti yang bisa kamu gunakan untuk men-style list.
+
+## list-style-type
+
+Properti `list-style-type` untuk mengatur tanda pada daftar.
+
+Contoh:
+
+```css
+ul {
+  list-style-type: japanese-formal;
+}
+```
+
+Seperti yang kamu lihat, list bisa diiubah dengan tulisan angka jepang. Kamu juga bisa memberikan value lain seperti `ethiopic-numeric` dan `square`.
+
+Hasil:
+![list-type](list-type.png)
+
+## list-image
+
+Kamu juga dapat meng-custom tanda dengan gambar menggunakan properti `list-image`.
+
+Contoh:
+
+```css
+ul {
+  list-style-image: url("icons8-beef-burger-24.png");
+}
+```
+
+Hasil:
+![list-image](list-image.png)
+
+## list-position
+
+Porperti `list-position` untuk mengatur posisi tanda list dan hanya memiliki dua value yaitu `inside` dan `outside`.
+
+Contoh:
+
+```css
+ul {
+  list-style-position: inside;
+}
+```
+
+Hasil:
+![list-position](list-position.png)
+
+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.
+
+Dari semua properti di atas bisa ditulis sekaligus dalam properti `list-style`.
+
+```css
+list-style: georgian inside url("icons8-beef-burger-24.png");
+```
+
+```css
+list-style: square inside url("sqpurple.gif");
+```
+
+### Referensi:
+
+- https://www.w3schools.com/css/css_list.asp
+- https://developer.mozilla.org/en-US/docs/Web/CSS/list-style
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <style>
+      .list-type {
+        /* list-style-type: disc; */
+        /* list-style-type: circle; */
+        /* list-style-type: square; */
+        /* list-style-type: decimal; */
+        /* list-style-type: georgian; */
+        /* list-style-type: trad-chinese-informal; */
+        list-style-type: japanese-formal;
+        /* list-style-type: ethiopic-numeric; */
+        /* list-style-type: kannada; */
+        /* list-style-type: "\1F44D"; */
+
+        /* value */
+        /* list-style-type: "A"; */
+      }
+
+      .list-image {
+        list-style-image: url("icons8-beef-burger-24.png");
+      }
+
+      .list-position {
+        list-style-position: inside;
+        /* list-style-position: outside; */
+      }
+    </style>
+  </head>
+  <body>
+    <h2>List</h2>
+
+    <!-- contoh list bullet -->
+    <ul class="list-bullet">
+      <li>Coffee</li>
+      <li>Tea</li>
+      <li>Coca Cola</li>
+    </ul>
+
+    <!-- contoh list numerik -->
+    <ol class="list-numerik">
+      <li>Coffee</li>
+      <li>Tea</li>
+      <li>Coca Cola</li>
+    </ol>
+
+    <ul class="list-type">
+      <li>Coffee</li>
+      <li>Tea</li>
+      <li>Coca Cola</li>
+    </ul>
+    <ul class="list-image">
+      <li>Coffee</li>
+      <li>Tea</li>
+      <li>Coca Cola</li>
+    </ul>
+    <ul class="list-position">
+      <li>Coffee</li>
+      <li>Tea</li>
+      <li>Coca Cola</li>
+    </ul>
+  </body>
+</html>
@@ -0,0 +1,50 @@
+# CSS Object Position
+
+## Apa itu CSS Object Position?
+
+`Object position` merupakan properti CSS yang menentukan posisi objek yang berada di dalam element (misal: `<img>` atau `<video>` ). kamu bisa menggunakan properti ini bersamaan `object-fit` untuk mengatur objek tersebut.
+
+Contohnya jika `object-position:20% 80%`, maka objek akan ditetapkan memilki jarak 20% dari sisi kiri (left) dan 80% dari bagian atas (top) element. contoh lain, `object-position: 50% 50%`, objek akan ditempatkan tepat di tengah element.
+
+```css
+img {
+  width: 500px;
+  height: 500px;
+  border: 2px solid blue;
+  object-fit: none;
+  object-position: 20% 80%;
+}
+```
+
+![hasil](contoh-1.png)
+
+Pada penulisan diatas object akan ditetapkan 20% dari sisi kiri dan 80% dari bagian atas element.
+
+## Syntax
+
+Beberapa contoh penerapan yang bisa kamu ikuti:
+
+**Positional values**
+
+```css
+object-position: 50% 50%; /* default position */
+object-position: right top;
+object-position: 20px 95px;
+object-position: center 20px; /* mix and match */
+```
+
+![hasil](contoh-lain.png)
+
+**Global values**
+
+```css
+object-position: inherit;
+object-position: initial;
+object-position: unset;
+```
+
+Mungkin sampai disini dulu pembahasan kali ini, referensi yang bisa kamu gunakan untuk belajar lebih lanjut:
+
+- https://developer.mozilla.org/en-US/docs/Web/CSS/object-position
+- https://www.w3schools.com/cssref/css3_pr_object-position.php
+- https://css-tricks.com/almanac/properties/o/object-position/
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>bellshade | CSS Object Position</title>
+    <style>
+      body {
+        margin-top: 100px;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 4rem;
+      }
+
+      .caption {
+        font-size: 2rem;
+        text-align: center;
+        font-weight: 800;
+      }
+
+      .example {
+        width: 460px;
+        height: 460px;
+        border: 2px solid blue;
+        object-fit: none;
+      }
+
+      .image-1 {
+        object-fit: fill;
+        object-position: center; /* default position */
+      }
+      .image-2 {
+        object-position: 50% 50%; /* default position */
+      }
+      .image-3 {
+        object-position: right top;
+      }
+      .image-4 {
+        object-position: 20px 95px;
+      }
+      .image-5 {
+        object-position: center 20px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="contain">
+      <img
+        class="example image-1"
+        src="https://images.unsplash.com/5/unsplash-kitsune-4.jpg?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjEyMDd9&s=dd060fe209b4a56733a1dcc9b5aea53a"
+        alt="contoh gambar css object position"
+      />
+      <p class="caption">Original image</p>
+    </div>
+    <div class="contain">
+      <img
+        class="example image-2"
+        src="https://images.unsplash.com/5/unsplash-kitsune-4.jpg?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjEyMDd9&s=dd060fe209b4a56733a1dcc9b5aea53a"
+        alt="contoh gambar css object position"
+      />
+      <p class="caption">object-position: 50% 50%</p>
+    </div>
+
+    <div class="contain">
+      <img
+        class="example image-3"
+        src="https://images.unsplash.com/5/unsplash-kitsune-4.jpg?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjEyMDd9&s=dd060fe209b4a56733a1dcc9b5aea53a"
+        alt="contoh gambar css object position"
+      />
+      <p class="caption">object-position: right top</p>
+    </div>
+    <div class="contain">
+      <img
+        class="example image-4"
+        src="https://images.unsplash.com/5/unsplash-kitsune-4.jpg?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjEyMDd9&s=dd060fe209b4a56733a1dcc9b5aea53a"
+        alt="contoh gambar css object position"
+      />
+      <p class="caption">object-position: 20px 95px</p>
+    </div>
+
+    <div class="contain">
+      <img
+        class="example image-5"
+        src="https://images.unsplash.com/5/unsplash-kitsune-4.jpg?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjEyMDd9&s=dd060fe209b4a56733a1dcc9b5aea53a"
+        alt="contoh gambar css object position"
+      />
+      <p class="caption">object-position: center 20px</p>
+    </div>
+  </body>
+</html>